traverse
jQuery traversal, meaning "move", is used to "find" (or select) HTML elements based on their relationship to other elements. Start with a selection and move along the selection until you reach the element you want.
Examples of structural relationships:
The relationship in the diagram:
- The <div> element is the parent of the <ul> and the ancestor of all content within it.
- The <ul> element is the parent of the <li> element and the child of the <div>
- The <li> element on the left is the parent of <span>, the child of <ul>, and the descendant of <div>.
- The <span> element is a child of <li> and a descendant of both <ul> and <div>.
- Two <li> elements are siblings (have the same parent).
- The <li> element on the right is the parent of <b>, the child of <ul>, and the descendant of <div>.
- The <b> element is a child of the <li> on the right, and a descendant of both <ul> and <div>.
Ancestors are father, grandfather, great-grandfather, etc. Descendants are children, grandchildren, great-grandchildren, etc. Siblings have the same parent.
ancestor
parent() method
The parent() method returns the immediate parent of the selected element.
This method will only traverse the DOM tree one level up.
1 <script> 2 $(document).ready(function(){ 3 $("span").parent().css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 …… 8 9 <div class="ancestors"> 10 <div style="width:500px;">div (曾祖父元素) 11 <ul>ul (祖父元素) 12 <li>li (父元素) 13 <span>span</span> 14 </li> 15 </ul> 16 </div> 17 </div>
parents() method
The parents() method returns all ancestors of the selected element, all the way up to the root element (<html>) of the document.
1 <script> 2 $(document).ready(function(){ 3 $("span").parents().css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 8 <body class="ancestors">body (曾曾祖父元素) 9 <div style="width:500px;">div (曾祖父元素) 10 <ul>ul (祖父元素) 11 <li>li (父元素) 12 <span>span</span> 13 </li> 14 </ul> 15 </div> 16 </body>
parentsUntil() method
The parentsUntil() method returns all ancestor elements between two given elements.
1 <script> 2 $(document).ready(function(){ 3 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 <body class="ancestors"> body (曾曾祖父元素) 8 <div style="width:500px;">div (曾祖父元素) 9 <ul>ul (祖父元素) 10 <li>li (父元素) 11 <span>span</span> 12 </li> 13 </ul> 14 </div> 15 </body>
offspring
children() method
The children() method returns all immediate children of the selected element.
This method will only traverse the DOM tree one level down.
1 <script> 2 $(document).ready(function(){ 3 $("div").children().css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 <body> 8 <div class="descendants" style="width:500px;border:2px solid blue">div (当前元素) 9 <p>p (儿子元素) 10 <span>span (孙子元素)</span> 11 </p> 12 <p>p (儿子元素) 13 <span>span (孙子元素)</span> 14 </p> 15 </div>
可以使用可选参数来过滤对子元素的搜索。
1 $(document).ready(function(){ 2 $("div").children("p.1"); 3 });
例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素。
find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
1 <script> 2 $(document).ready(function(){ 3 $("div").find("span").css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 <div class="descendants" style="width:500px;border:2px solid blue">div (当前元素) 8 <p>p (儿子元素) 9 <span>span (孙子元素)</span> 10 </p> 11 <p>p (儿子元素) 12 <span>span (孙子元素)</span> 13 </p> 14 </div>
1 <script> 2 $(document).ready(function(){ 3 $("div").find("*").css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 <div class="descendants" style="width:500px;border:2px solid blue">div (当前元素) 8 <p>p (儿子元素) 9 <span>span (孙子元素)</span> 10 </p> 11 <p>p (儿子元素) 12 <span>span (孙子元素)</span> 13 </p> 14 </div>
fellow
siblings() method
The siblings() method returns all siblings of the selected element. (you can use the selector to filter)
1 <script> 2 $(document).ready(function(){ 3 $("h2").siblings("p").css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 <div>div (父元素) 8 <p>p</p> 9 <span>span</span> 10 <h2>h2</h2> 11 <h3>h3</h3> 12 <p>p</p> 13 </div>
next() method
The next() method returns the next sibling element of the selected element.
The method returns only one element.
1 <script> 2 $(document).ready(function(){ 3 $("h2").next().css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 <div>div (父元素) 8 <p>p</p> 9 <span>span</span> 10 <h2>h2</h2> 11 <h3>h3</h3> 12 <p>p</p> 13 </div>
nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的（后面的）同胞元素。
1 <script> 2 $(document).ready(function(){ 3 $("h2").nextAll().css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 <div>div (父元素) 8 <p>p</p> 9 <span>span</span> 10 <h2>h2</h2> 11 <h3>h3</h3> 12 <p>p</p> 13 </div>
nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
1 <script> 2 $(document).ready(function(){ 3 $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"}); 4 }); 5 </script> 6 7 <div>div (父元素) 8 <p>p</p> 9 <span>span</span> 10 <h2>h2</h2> 11 <h3>h3</h3> 12 <h4>h4</h4> 13 <h5>h5</h5> 14 <h6>h6</h6> 15 <p>p</p> 16 </div>
prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
过滤
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法
first() 方法返回被选元素的首个元素。
1 <script> 2 $(document).ready(function(){ 3 $("div p").first().css("background-color","yellow"); 4 }); 5 </script> 6 7 <h1>欢迎访问我的主页</h1> 8 <div> 9 <p>这是 div 中的一个段落。</p> 10 </div> 11 12 <div> 13 <p>这是另外一个 div 中的一个段落。</p> 14 </div> 15 16 <p>这是一个段落。</p>
last() 方法
last() 方法返回被选元素的最后一个元素。
1 <script> 2 $(document).ready(function(){ 3 $("div p").last().css("background-color","yellow"); 4 }); 5 </script> 6 7 <h1>欢迎访问我的主页</h1> 8 <div> 9 <p>这是 div 中的一个段落。</p> 10 </div> 11 12 <div> 13 <p>这是另外一个 div 中的一个段落。</p> 14 </div> 15 16 <p>这是一个段落。</p>
eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
1 <script> 2 $(document).ready(function(){ 3 $("p").eq(1).css("background-color","yellow"); 4 }); 5 </script> 6 7 <h1>欢迎访问我的主页</h1> 8 <p>菜鸟教程 (index 0).</p> 9 <p>http://www.runoob.com (index 1)。</p> 10 <p>google (index 2).</p> 11 <p>http://www.google.com (index 3)。</p>
filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
1 <script> 2 $(document).ready(function(){ 3 $("p").filter(".url").css("background-color","yellow"); 4 }); 5 </script> 6 7 <h1>欢迎访问我的主页</h1> 8 <p>菜鸟教程 (index 0).</p> 9 <p class="url">http://www.runoob.com (index 1)。</p> 10 <p>google (index 2).</p> 11 <p class="url">http://www.google.com (index 3)。</p>
not() 方法
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反
1 <script> 2 $(document).ready(function(){ 3 $("p").not(".url").css("background-color","yellow"); 4 }); 5 </script> 6 7 <h1>欢迎访问我的主页</h1> 8 <p>菜鸟教程 (index 0).</p> 9 <p class="url">http://www.runoob.com (index 1)。</p> 10 <p>google (index 2).</p> 11 <p class="url">http://www.google.com (index 3)。</p>
