jQuery过滤、遍历同级元素、向上遍历、向下遍历

最新推荐文章于 2021-02-12 13:51:25 发布

面对一无所有

最新推荐文章于 2021-02-12 13:51:25 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript jQuery 文章标签： jQuery过滤 jQuery遍历同级元素 jQuery向上遍历 jQuery向下遍历

本文链接：https://blog.csdn.net/zzm_1219/article/details/78484505

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

话不多说，直接贴代码（我只是希望能在温习原生js的同时，发现一些有趣的东西！）

.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#sibling *{
display: block;
border: 2px dashed gray;
color: grey;
padding: 5px;
margin: 5px;
}
</style>
</head>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="js/jQueryFilter.js"></script>
<link type="text/css" href="css/jQueryFilter.css" rel="stylesheet"/>
<body>
<div id="filter">
<p>p1</p>
</div>
<div>
<p class="cla">p1</p>
</div>
<div>
<p class="cla">p1</p>
</div>
<div>
<h3>p1</h3>
</div>
<div>
<h1>p1</h1>
</div>

<div style="" id="sibling">
<p>p</p>
<p>pp</p>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
</div>

<div id="toDown1">div1
<div id="toDown2">div2
<p id="pid">p
<a>
Hello!
</a>
</p>
</div>
</div>
</body>
</html>

//下图代码块用于向上及向下遍历

// go on

.js:

$(document).ready(function(){
// filterElement()
// siblingElement();
// toDown();
toUp();
})

function filterElement(){
/*
jQuery过滤
first()
last()
eq()
filter()
not()
*/
$("div p").first().css("background-color","red");//div下的p元素中的第一个
$("div p").last().css("background-color","blue");//最后一个
$("div p").eq(1).css({"background-color":"grey","color":"red"});
$("div p").filter(".cla").css("background-color","grey");//过滤div中的p元素，class为cla的
$("div p").not(".cla").css("background-color","red");//过滤div下的所有p元素，class不为cla的
}

function siblingElement(){
/*
jQuery遍历同级元素
siblings() 所有同级元素
next() 下一个同级元素
nextAll() 下面所有的同级元素
nextUntil() 下面元素的区间
prev() 上一个同级元素
prevAll() 上面所有的同级元素
prevUntil() 上面元素的区间
*/
// $("#sibling h3").siblings().css({border:"3px solid #FF0000"});
// $("#sibling h3").next().css({border:"3px solid #FF0000"});
// $("#sibling h2").nextAll().css({border:"3px solid #FF0000"});
// $("#sibling h1").nextUntil("h4").css({border:"3px solid #FF0000"});//到h4,不包括h4
// $("#sibling h4").prev().css({border:"3px solid #FF0000"});
// $("#sibling h4").prevAll().css({border:"3px solid #FF0000"});
$("#sibling h4").prevUntil("p").css({border:"3px solid #FF0000"});//到p,不包括p
}

function toDown(){
/*
* jQuery向下遍历
* children() 只向下遍历一级（儿子辈）
* find() 可向下遍历任意子元素（儿孙满堂）
* */
// $("#toDown1").children().css({border:"3px dashed #FF0000"});
// $("#toDown1").children("#toDown2").children("p").css({border:"3px dashed #FF0000"});//带参只能是直接子元素
$("#toDown1").find().css({border:"3px dashed #FF0000"});//不带参不寻找
$("#toDown1").find("p").css({border:"3px dashed #FF0000"});//带参可跨元素寻找如：中间有一个#toDown2
}

function toUp(){
/*
* jQuery向上遍历
* parent() 只向上遍历一级（爸爸辈）
* parents() 可向上遍历任意子元素（长辈们）
* parentsUntil() 向上遍历一个区间
* */
// $("#pid").parent().css({border:"3px dashed #FF0000"});
// $("#pid").parent("toDown1").css({border:"3px dashed #FF0000"});//带参，没有任何变化，只能遍历直接父元素
// $("#pid").parents().css({border:"3px dashed #FF0000"});//包括body和html
// $("#pid").parents("toDown1").css({border:"3px dashed #FF0000"});//可访问非直接父元素
$("a").parentsUntil("#toDown1").css({border:"3px dashed #FF0000"});
}

.css:

#sibling {
margin-top: 10px;
background-color: none;
height:300px;
width: 48%;
float:left;
}

#sibling * {
display: block;
border: 2px dashed gray;
color: grey;
padding: 5px;
margin: 5px;
}

#toDown1{
width: 48%;
height:300px;
border: 2px solid chocolate;
float: left;
}

#toDown2{
width: 80%;
height:80%;
margin-top: 10px;
margin-left: 10px;
border: 2px solid chocolate;
}

#toDown2 p{
margin-left: 10px;
margin-top: 10px;
width: 50%;
height: 20%;
border: 2px solid chocolate;
vertical-align: middle;
line-height: 40px;
}

基础差的，有兴趣可以贴到编译器中玩一玩。大牛勿喷。

面对一无所有

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery过滤、遍历同级元素、向上遍历、向下遍历

话不多说，直接贴代码（我只是希望能在温习原生js的同时，发现一些有趣的东西！）.html:Insert title here#sibling *{display: block;border: 2px dashed gray;color: grey;padding: 5px;margin: 5px;}p1
复制链接

扫一扫