- jQuery 遍历
- jQuery 过滤
jQuery 遍历
1、向下遍历
向下遍历.png
/**
* 向下遍历
* children
* find
*/
$(document).ready(function () {
//children 的参数可选,只向下遍历一级
$("#div1").children("#div2").css({border:"3px solid #FF0000"});
//find 可以一直向下遍历 find 参数必选
// $("#div1").find("#div2").css({border:"3px solid #FF0000"});
// $("#div1").find("a").css({border:"3px solid #FF0000"});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<p>
<a>
Hello
</a>
</p>
</div>
</div>
</body>
</html>
#div1{
width: 500px;
height: 200px;
border: 3px solid chocolate;
}
#div2{
width: 400px;
height: 150px;
margin-top: 10px;
margin-left: 10px;
border: 3px solid chocolate;
}
p{
margin-left: 10px;
margin-top: 10px;
width: 150px;
height: 80px;
border: 3px solid chocolate;
}
2、向上遍历
/**
* parent() 只能遍历一层，直接父类，不能指定父类，默认向上遍历一层，
* parents() 可以向上遍历所有的福利，可以指定父类
* parentUntil() 两个标签之间的元素
*/
$(document).ready(function () {
$("a").parent().css(
{border:"3px solid #FF0000"}
);
$("a").parents().css(
{border:"3px solid #FF0000"}
);
区间
$("a").parentsUntil("#div1").css(
{border:"3px solid #FF0000"}
);
});
3、同级元素遍历
/**
* sibings() 修改除了当前标签外的所有同集元素
* next() 修改下一个元素
* nextAll() 修改下面所有的元素
* nextUntil() 没有参数就是后面所有元素，有参数指定区间在该标签和参数标签之间
* prev() 修改前一个元素
* prevAll() 修改前面所有的元素
* preUntil() 没有参数就是前面所有元素，有参数指定区间在该标签和参数标签之间
*/
$(document).ready(function () {
$("h4").siblings().css({border:"3px solid #FF0000"});
$("h4").next().css({border:"3px solid #FF0000"});
$("h4").nextAll().css({border:"3px solid #FF0000"});
$("h4").nextUntil().css({border:"3px solid #FF0000"});
$("h4").prevUntil().css({border:"3px solid #FF0000"});
});
jQuery 过滤
过滤.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="filter.js"></script>
</head>
<body>
<div>
<p>div1</p>
</div>
<div>
<p class="pclass">div2</p>
</div>
<div>
<p class="pclass">div3</p>
</div>
<div>
<p>div4</p>
</div>
</body>
</html>
/**
* first () 第一个
* last() 最后一个
* eq() 等于规定的索引值
* filter() 过滤
* not() 非
*
*/
$(document).ready(function () {
// $("div p").first().css("background-color","#FF0000");
// $("div p").last().css("background-color","#FF0000");
//指定索引
// $("div p").eq(2).css("background-color","#FF0000");
//指定标准
$("div p").filter(".pclass").css("background-color","#FF0000");
//指定标准 设置不是指定类的属性
// $("div p").not(".pclass").css("background-color","#FF0000");
});
