子元素遍历
$(selector).children(参数可选)
无:获取全部子元素
参数(“p”):返回所有子元素中的p元素
同辈元素遍历
方法 | 说明 |
---|---|
$(selector).next() | 选取该元素紧邻的下一个元素 |
$(selector).prev() | 选取该元素紧邻的前一个元素 |
$(selector).siblings(参数可选) | 选取该元素前面后面的所有同辈元素 无参数:所有同辈元素; |
前辈元素遍历
$ (selector).parent()
选取该元素的父元素
$ (selector).parents(参数可选)
无参数:选取该元素的全部前辈元素;
有参数:选取符合条件的前辈元素;
其他遍历
$ (selector).find(参数)
选取该元素子元素中符合参数的元素
$ (selector).end()
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<p>ss</p>
</li>
<li></li>
</ul>
</body>
</html>
<script src="../book3/01.素材库/jquery-3.6.0.js"></script>
<script>
$("ul").children().children().css("background", "red")
</script>
上述代码样式如下:
加入了end()后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<p>ss</p>
</li>
<li></li>
</ul>
</body>
</html>
<script src="../book3/01.素材库/jquery-3.6.0.js"></script>
<script>
$("ul").children().children().end().css("background", "red")
</script>
样式如下:
返回当前链条中的上一个匹配状态
$ (selector).each(function(index,element){
相关代码;
})
经典实用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>0000</li>
<li>1111</li>
<li>2222</li>
</ul>
</body>
</html>
<script src="../book3/01.素材库/jquery-3.6.0.js"></script>
<script>
$("ul").find("li").each(function (index, element) {
$(element).on("click", function () {
alert(index)
})
})
</script>
样式如下:
今天的分享就是这些啦,欢迎正在学习web的伙伴们“挑毛病”“提意见”,当然了也欢迎各种表扬奥~(比心,比心)