jQuery之元素的遍历和元素的过滤

最新推荐文章于 2022-11-03 19:42:49 发布

百奇

最新推荐文章于 2022-11-03 19:42:49 发布

阅读量152

点赞数

分类专栏： JQuery 文章标签：学习元素遍历

本文链接：https://blog.csdn.net/qq_43264596/article/details/83900297

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

元素的遍历
1）、向下遍历
两种方法 children find

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://127.0.0.1/web/jquery-3.3.1.js"></script>
<script src="http://127.0.0.1/web/TraversingDown.js"></script>
<style>
#div1{
	width:500px;
	height:200px;
	border:3px solid #FF33FF;}
#div2{
	width:400px;
	height:150px;
	margin-top:10px;
	margin-left:10px;
	border:3px solid  #0F0;}
p{
	width:150px;
	height:80px;
	margin-left:10px;
	margin-top:10px;
	border:3px solid  #0F0;
}

</style>
</head>

<body>
<div id="div1">div1
    <div id="div2">div2
        <p>
        	<a>Hello</a>
        </pv>
    </div>
</div>
</body>
</html>

第一种：改变的是div2的边框颜色 children（）是可选参数是可以传递参数的比如.childre("#div2")
children（）方法只向下遍历一级

$(document).ready(function(e) {
    $("#div1").children().css({
		"border":"3px solid #FF0000"		});
});

第二种方法find必须加参数
find（）方法可以向下遍历很多级，只需要指定即可

$("#div1").find("#div2").css({
		"border":"3px solid #FF0000"		});

2）、向上遍历
parent():
只能向上遍历一级只能看到直接父类，可选参数
parents()：
向上遍历所有，可选参数加上参数跟区间一样
parentsUntil("#div1")：
向上遍历到div1

$(document).ready(function(e) {
   // $("p").parent().css({
//		"border":"3px solid red",
//		});
//$("p").parents().css({
//		"border":"3px solid red",
//		});
 $("p").parentsUntil("#div1").css({
		"border":"3px solid red",
		});
});

3）、同级遍历

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://127.0.0.1/web/jquery-3.3.1.js"></script>
<script src="http://127.0.0.1/web/TraversingCurrent.js"></script>
<style>
.bd *{
	display:block;
	border:3px solid #3F0;
	color:#6F0;
	padding:5px ;
	margin:15px;}
</style>
</head>

<body>
<div class="bd">
	<p>p</p>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>
</body>
</html>

有7中方法
其中next和prev只是方向相反 next向下prev向上
1）、sibings()
同级元素全部被修改
2）、next()
向下遍历一个
3）、nextAll()
向下遍历所有
4）、nextUntil()
向下遍历一个区间

5）、prev()
向上遍历一个
6）、prevAll()
向上遍历所有
7）、prevUntil()
向上遍历一个区间

// JavaScript Document

$(document).ready(function(e) {
	//除了h4以外同级的所有元素都被修改
//    $("h4").siblings().css({
//		"border":"3px solid red",
//	
//})
//h4下面的h5被修改	
//$("h4").next().css({
//	"border":"3px solid red",
//	})
//h4下面的h5、h6被修
//$("h4").nextAll().css({
//	"border":"3px solid red",
//	})
//h4下面的h56被修,h4到h6的区间只有h5
$("h4").nextUntil("h6").css({
	"border":"3px solid red",
	})
//h4上面的h3被修改
$("h4").prev().css({
	"border":"3px solid red",
	})
});

2、元素的过滤
first():
寻找同样元素中的第一个
last()：
寻找同样元素中的第二个
eq():
返回当前指定元素的索引元素的索引id id从0开始必选值
$(“div p”).eq(0).css({
“background-color”:“red”,
});
filter()：
返回当前的标准符合就返回不符合就不改变
$(“div p”).filter(".pclass").css({
“background-color”:“red”,
});
not():
指定一个标准不符合的改变符合的不改变
$(“div p”).not(".pclass").css({
“background-color”:“red”,
});

<div>
	<p>div1</p>
</div>
<div>
	<p class="pclass">div1</p>
</div>
<div>
	<p class="pclass">div1</p>
</div>
<div>
	<p>div1</p>
</div>

百奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录