JQuery节点遍历

1、遍历祖先元素

  • parent() 方法返回被选元素的直接父元素。
  • parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。可带参，带参则向上一直遍历到参数元素 $(obj).parents(“tr”)`向上遍历祖先一直到tr元素
  • parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

<!-- 最外围的红色边框，在 body 元素之前，是 html 元素（也是祖先）。 -->
</html>

上诉代码：将span 的所有组员元素css样式进行了修改

2、后代遍历

children() 方法返回被选元素的所有直接子元素。

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。带参：向下遍历找到参数类型的元素

<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="../js/jquery-2.1.4.min.js">
</script>
<script>
$(document).ready(function(){
    $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (子)
    <span>span (孙)</span>     
  </p>
  <p>p (child)
    <span>span (孙)</span>
  </p> 
</div>

</body>
</html>

3、水平遍历

siblings() 方法返回被选元素的所有同胞元素。可带参数来过滤对同胞元素的搜索。

next() 方法返回被选元素的下一个同胞元素。

nextAll() 方法返回被选元素的所有跟随的同胞元素。返回选中元素后面所有的同胞元素

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素

4、过滤

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<div>
<p>这是 div 中的一个段落。</p>
</div>

<div>
<p>这是 div 中的另一个段落。</p>
</div>

<p>这也是段落。</p>

</body>
</html>

上述代码有两个div，因调用方法是first()；所以修改样式的是第一个div的第一个元素p；

eq() 方法返回被选元素中带有指定索引号的元素。（首个元素的索引号是 0 而不是 1）这是匹配便签中的元素内容吗？？？

<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭 (index 0)。</p>
<p>唐老鸭 (index 1)。</p>
<p>我住在 Duckburg (index 2)。</p>
<p>我最好的朋友是米老鼠 (index 3)。</p>

</body>

filter() 方法允许您规定一个标准，匹配的元素会被返回。匹配p标签中定义了class=intro的元素

$(document).ready(function(){
  $("p").filter(".intro");
});

ot() 方法返回不匹配标准的所有元素。与filter() 方法方法刚好相反