【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之遍历篇(2)
今天接着上篇来总结遍历同胞、过滤这两块使用方法。
本篇主要是介绍jQery遍历同胞、过滤的使用方法。
遍历-同胞（siblings）
在DOM树中水平遍历
jQuery中有很多方法来实现DOM树中的水平遍历
siblings() 返回被选元素的所有同胞元素
next() 返回被选元素的下一个同胞元素
nextAll() 返回被选元素之后的所有同胞元素
nextUntil() 返回介于两个指定元素之间所有的同胞元素
prev() 返回被选元素的上一个同胞元素
prevAll() 返回被选元素之前的所有同胞元素
prevUntil() 返回介于两个指定元素之间之前的同胞元素
siblings使用
<body>
<style>
.cssDiv *{
border:1px solid black;
color:gray;
margin:5px;
padding:5px;
display:block;
}
</style>
<div class="cssDiv">div父元素
<p>p子元素</p>
<span>span子元素</span>
<h1>h1子元素</h1>
<h2>h2子元素</h2>
<h3>h3子元素</h3>
<h4>h4子元素</h4>
<h5>h5子元素</h5>
<h6>h6子元素</h6>
<p class="divTxt">p子元素(class="divTxt")</p>
</div>
<p>1、选中h3元素的所有同胞元素</p>
<button id="btn1">$("h3").siblings()</button>
<script>
$("#btn1").click(function(){
$("h3").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</body>
next、nextAll、nextUntil使用
接上一个示例代码
<p>2、选中h3元素的下一个元素</p>
<button id="btn2">$("h3").next()</button>
<script>
$("#btn2").click(function(){
$("h3").next().css({"color":"red","border":"2px solid red"});
});
</script>
<p>3、选中span元素开始向下所有的同胞元素</p>
<button id="btn3">$("span").nextAll()</button>
<script>
$("#btn3").click(function(){
$("span").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
<p>4、选中h1与h6元素之间所有的同胞元素</p>
<button id="btn4">$("h1").nextUntil("h6")</button>
<script>
$("#btn4").click(function(){
$("h1").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
prev、prevAll、prevUntil使用
接上一个示例代码
<p>5、选中h3元素的上一个元素</p>
<button id="btn5">$("h3").prev()</button>
<script>
$("#btn5").click(function(){
$("h3").prev().css({"color":"red","border":"2px solid red"});
});
</script>
<p>6、选中h3元素开始向上所有的同胞元素</p>
<button id="btn6">$("h3").prevAll()</button>
<script>
$("#btn6").click(function(){
$("h3").prevAll().css({"color":"red","border":"2px solid red"});
});
</script>
<p>7、选中h1与h6元素之间之前的所有同胞元素</p>
<button id="btn7">$("h1").prevUntil("h6")</button>
<script>
$("#btn7").click(function(){
$("h1").prevUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
知识点
nextUntil和prevUntil语法虽然相近，但是实现效果上却有所不同，nextUntil选中的是指定元素之间的同胞元素，prevUntil则是选中指定元素之间之前的同胞元素。
遍历-过滤
jQuery提供了五个过滤方法
first() 返回被选元素中的首个元素
last() 返回被选元素中的最后一个元素
eq() 返回被选元素中有指定索引号的元素，索引号从0开始
filter() 匹配某些指定条件的元素
not() 排除配某些指定条件的元素
first、last、eq使用
接上一个示例代码
<p>8、选中div内的第一个p元素</p>
<button id="btn8">$("p").first()</button>
<script>
$("#btn8").click(function(){
$("div p").first().css({"color":"red","border":"2px solid red"});
});
</script>
<p>9、选中div内的最后一个p元素</p>
<button id="btn9">$("p").last()</button>
<script>
$("#btn9").click(function(){
$("div p").last().css({"color":"red","border":"2px solid red"});
});
</script>
<p>10、选中div内p元素(根据索引号1)</p> //索引号从0起始
<button id="btn10">$("p").eq(1)</button>
<script>
$("#btn10").click(function(){
$("div p").eq(1).css({"color":"red","border":"2px solid red"});
});
</script>
filter、not使用
接上一个示例代码
<p>11、选中所有p元素，通过filter匹配类名为divTxt的p元素</p>
<button id="btn11">$("p").filter(".divTxt")</button>
<script>
$("#btn11").click(function(){
$("p").filter(".divTxt").css({"color":"red","border":"2px solid red"});
});
</script>
<p>12、选中所有p元素，通过not排除类名为divTxt的p元素</p>
<button id="btn12">$("p").not(".divTxt")</button>
<script>
$("#btn12").click(function(){
$("p").not(".divTxt").css({"color":"red","border":"2px solid red"});
});
</script>
总结到这遍历篇就结束了，当我们掌握了DOM树向上、向下、水平移动的各种操作，就应该能理解开篇时介绍过遍历的目地就是在DOM元素中移动的原因。水平移动的方法有点多需要仔细琢磨。关于过滤的五个方法前三个很好理解不多做解释，filter和not可以理解为条件下的关键词，当我们选中的一个或多个元素后，是匹配还是排除，通过这filter和 not两个关键字设置好条件后就能实现了。
实例代码已上传我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/jQuery
书山有路勤为径，学海无涯苦作舟!!!
zhoubo
2020.8.16 at home
- 点赞
- 收藏
- 关注作者
评论（0）