jQuery学习　四　jQuery jQuery 遍历_jquery遍历的网页设计-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_22327455/article/details/55045844

jQuery学习　四　jQuery jQuery 遍历

四　jQuery jQuery 遍历
(1) 向上遍历 DOM 树
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素
parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});//父元素
$("span").parents().css({"color":"green","border":"2px solid green"});//祖父元素
$("span").parentsUntil().css({"pink":"red","border":"2px solid pink"});//曾祖父元素
});

(2) 向下遍历 DOM 树
children()　返回被选元素的所有直接子元素。　也可以使用可选参数来过滤对子元素的搜索。
$(document).ready(function(){
    $("div").children().css({"color":"red","border":"2px solid red"});
});

<div class="descendants" style="width:500px;">div (当前元素)
<p class="1">p (儿子元素)
    <span>span (孙子元素)</span>
</p>
<p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
</p>
</div>
$(document).ready(function(){
    $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});

find()　返回被选元素的后代元素，一路向下直到最后一个后代。
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (儿子元素)
    <span>span (孙子元素)</span>
</p>
<p>p (儿子元素)
    <span>span (孙子元素)</span>
</p>
</div>
$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});

(3)水平遍历同胞(siblings)
siblings() 返回被选元素的所有同胞元素
<div>div (父元素)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
$(document).ready(function(){
   $("h2").siblings().css({"color":"red","border":"2px solid red"});
});

next() 方法返回被选元素的下一个同胞元素
$(document).ready(function(){
   $("h2").next().css({"color":"red","border":"2px solid red"});
});

nextAll() 返回被选元素的所有跟随的同胞元素。
$(document).ready(function(){
$("h2").nextAll();
});

nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
<div>div (父元素)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
$(document).ready(function(){
   $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});//h3,h4,h5将变红色
});

prev()　与next()类似，只不过方向相反而已，返回被选元素的上一个同胞元素
prevAll()　与nextAll()类似，只不过方向相反而已，　返回被选元素的上面所有的同胞元素。
prevUntil() 与nextUntil()类似，只不过方向相反而已

(4) 过滤
缩写搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素
$(document).ready(function(){
$("div p").first(); //选取首个 <div> 元素内部的第一个 <p> 元素
});

last() 方法返回被选元素的最后一个元素
$(document).ready(function(){
$("div p").last(); //选择最后一个 <div> 元素中的最后一个 <p> 元素
});

eq() 方法返回被选元素中带有指定索引号的元素,索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
<body>
<h1>欢迎访问我的主页</h1>
    <p>W3Cschool教程 (index 0).</p>
    <p>http://www.w3cschool.cn (index 1)。</p>
    <p>google (index 2).</p>
    <p>http://www.google.com (index 3)。</p>
</body>
$(document).ready(function(){
$("p").eq(1).css("background-color","yellow"); //选取第二个 <p> 元素（索引号 1）：
});

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
<body>
<h1>欢迎访问我的主页</h1>
    <p>W3Cschool教程 (index 0).</p>
    <p class="url">http://www.w3cschool.cn (index 1)。</p>
    <p>google (index 2).</p>
    <p class="url">http://www.google.com (index 3)。</p>
</body>
$(document).ready(function(){
   $("p").filter(".url").css("background-color","yellow");//class='url' p元素背景色将变黄色
});

not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。
$(document).ready(function(){
   $("p").not(".url").css("background-color","yellow");//不是class='url' p元素背景色将变黄色
});