What are the methods for traversing nodes in jquery?

JQ methods for traversing 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.

jquery method of traversing nodes

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

<p>Hello</p>
<div>
    <span>Hello Again</span>
    <p class="box">您好!</p>
</div>
<p>And Again</p>

<script type="text/javascript">
    $(&#39;div&#39;).children();      //<span>Hello Again</span><p class="box">您好!</p>
    $(&#39;div&#39;).children(&#39;.box&#39;)    //<p class="box">您好!</p>
</script>

2. next() method: $('p').next() --- Find p element Next adjacent sibling elements 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 up to p Element

<p>Hello</p>
<p class="box">Hello Again</p>
<div>
    <span>And Again</span>
</div>

<script type="text/javascript">
    $(&#39;p&#39;).next();      //<p>Hello Again</p><div><span>And Again</span></div>
    $(&#39;p&#39;).next(&#39;.box&#39;);   //<p class="box">Hello Again</p>
</script>

3, prev() method: $('p').prev() ---- Find the adjacent sibling elements before p

[Related methods are]

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

　(2) prevUntil() method: $('p').prevUntil('p') --- Find all elements before p until p element

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

<script type="text/javascript">
   $(&#39;p&#39;).prev();   //<div><span>Hello Again</span></div>
</script>

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

5. find() method: $('p').find('span') ---- Find the children within p element The element is also a span element

6. eq() method: $('p').eq(1) --- Find the second p element (index subscript starts from 0)

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

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

9, filter() method: $('p').filter('.box') --- Get the p element with the class name box

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

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

Example: Traverse the input element to obtain its value and add it to the back of the p element separated by ","

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

<script type="text/javascript">
    $("p").append( $("input").map(function(){
          return $(this).val();
        }).get().join(", ") );   //<p>John, password, http://ejohn.org/</p> 
</script>

12. hasClass() method: $('p').hasClass('box') ---- Find p

#13. has() method: $(' p').has('span') ---- Find p elements that contain span elements

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

15. slice() method: $('p').slice(0,2) ---- Find the 1st p element to the 1st p element 3 p elements

16, offsetParent() method: $('p').offsetParent() --- Find the first positioned ancestor element of the p element

17, parent() method: $('p').parent() ---- Returns the element set containing the unique parent node of the p element

18, parents() method: $('p'). parent() ---- Returns all ancestor nodes containing the p element (excluding the root node)

19. parentUntil() method: $('p').parentUntil('#box') -- -- Find the ancestor elements of the p element until #box

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

21. end() method: $('p').find('span').end() ---- Change the body of the statement back to the previous state, that is: find span After the element, the focus returns to the p element

<div>
    <span>Hello</span>,
    how are you?
</div>
 
<script type="text/javascript">
    $(&#39;div&#39;).find(&#39;span&#39;).addClass(&#39;test&#39;).end().attr(&#39;title&#39;,&#39;title1&#39;);
    //span添加class=test;div添加title=title1
</script>

Related video tutorial recommendations: jQuery Tutorial (Video)

The above is the detailed content of What are the methods for traversing nodes in jquery?. For more information, please follow other related articles on the PHP Chinese website!