Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what is the method of jquery traversing nodes", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the method of jquery traversing nodes"?

The way JQ traverses nodes: 1, children (); 2, next (); 3, prev (); 4, siblings (); 5, find (); 6, eq (); 7, first (); 8, last (); 9, filter (); 10, is (); 11, map (), and so on.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The method of traversing nodes in jquery

1. Children () method: $('p') .children ()-traverses to find all child element nodes of p element

Hello

Hello, Hello Again!

And Again

$('div'). Children (); / / Hello Again Hello!

$('div'). Children (' .box') / / Hello!

2. Next () method: $('p') .next ()-find the adjacent sibling elements after the p element, but not all sibling elements

[related methods]

(1) nextAll () method: $('p') .nextAll ()-find all sibling elements after p

(2) nextUntil () method: $('p'). NextUntil ('p')-find all sibling elements after p until p element

Hello

Hello Again

And Again $('p') .next (); / /

Hello Again

And Again $('p') .next ('.box'); / / Hello Again

3. Prev () method: $('p') .prev ()-find the sibling elements adjacent to p

[related methods are]

(1) prevAll () method: $('p') .prevAll ()-find all sibling elements before p

(2) prevUntil () method: $('p'). PrevUntil ('p')-find all elements up to p element before p

Hello

Hello Again

And Again

$('p'). Prev (); / / Hello Again

4. Siblings () method: $('p') .siblings ()-find all sibling elements before and after p

5. The find () method: $('p') .find ('span')-find the child element within the p element and is the span element

6. Eq () method: $('p') .eq (1)-find the second p element (index subscript starts at 0)

7. First () method: $('li') .first ()-get the first li element

8. The last () method: $('li') .last ()-gets the last li element

9. The filter () method: $('p'). Filter ('.box')-get the p element named box

10. Is () method: $('.box'). Is ('p')-determine whether .box is a p element

11. The map () method: $('p') .map (callback)-- executes the callback function for each p

Example: traverse the input element to get its value value separated by "," and add it to the end of the p element

Values:

$("p") .append ($("input") .map (function () {return $(this). Val ();}) .get () .join (",")); / /

John, password, http://ejohn.org/

12. The hasClass () method: $('p') .hasClass ('box')-find the p that contains the class name box

13. The has () method: $('p') .has ('span')-find the p element that contains the span element

14. Not () method: $('p') .not ('span')-find p elements that do not contain span elements

15. The slice () method: $('p'). Slice (0Power2)-find the first p element to the third p element

16. OffsetParent () method: $('p') .offsetParent ()-find the first located ancestor element of p element

17. The parent () method: $('p') .parent ()-returns the collection of elements containing the unique parent node of the p element

18. The parents () method: $('p') .parent ()-returns all ancestor nodes containing p elements (excluding the root node)

19. ParentUntil () method: $('p'). ParentUntil ('# box')-find the ancestor element of p element until # box

20. The contents () method: $('p') .contents ()-returns all child nodes within the p element (including text nodes)

21. The end () method: $('p'). Find ('span'). End ()-changes the body of the statement back to the previous state, that is, after finding the span element, the focus returns to the p element

Hello, how are you? $('div'). Find (' span'). AddClass ('test'). End (). Attr (' title','title1'); / / span add class=test;div and add title=title1 here. I believe you have a deeper understanding of "what is the method of jquery traversing nodes". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.