jQuery遍历

最新推荐文章于 2024-07-19 03:08:33 发布

Leona__

最新推荐文章于 2024-07-19 03:08:33 发布

阅读量71

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Leona__/article/details/120552304

版权

jQuery 元素遍历选择器 DOM操作事件绑定

关键词由CSDN通过智能技术生成

子元素遍历

$(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>