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元素背景色将变黄色
});
四 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元素背景色将变黄色
});
2587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
