jQuery查找笔记

最新推荐文章于 2024-09-07 14:37:16 发布

哒哒哒Q

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量85

点赞数

文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/m0_54089303/article/details/120780882

版权

<!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>
    <div class="first">
        第一个div
        <div class="second">
            第二个div
            <span id="s1">第一个span</span>
        </div>
    </div>
    <div>第三个</div>
    <div>第四个</div>
    <p>第一个p</p>
    <p>第二个p</p>
    <p>第三个p</p>


    <script src="../jquery.js"></script>
    <script>
        // 返回指定父元素下的div元素，只获取子元素
        console.log($("body").children("div"));

        // 返回离span最近的祖先元素并且是div
        console.log($("#s1").closest("div"));

        // 查找兄弟元素
        console.log($(".first").next());
        // 找p的兄弟元素并且是script标签
        console.log($("p").next("script"));
        // nextAll() 查找参照物p下的所有数据元素
        console.log($("p").nextAll());
        // nextUntil() 查找兄弟元素直到后面的选择器为止，不包含这个选择器
        console.log($("p:last").nextUntil("script:eq(1)"));
        // 查找上一个兄弟元素为div
        console.log($("p").prev('div').text());// 第四个
        // find() 找后代元素
        console.log($(".first").find("span"));
        //$("#s1").parents() 如果不传参数可以找到所有的父元素
        console.log($("#s1").parents());
        //可以添加具体的选择器字符串
        console.log($("#s1").parents("body"));
        // 找直系父元素
        console.log($("#s1").parent());
        // jQuery的串联  add() 串联函数，把多个选择器进行合并
        console.log($("div").add("p"));
        console.log($(".first").add(".second").add("#s1"));
        // 回退函数 addBack() 只能回退一次
        console.log($(".first").find(".second").find("#s1").addBack().css({
            color:'red',
        }));
        // end() 可以多次回退
        console.log($(".first").find(".second").find("#s1").end().end().css({
            color:'pink',
        }));







    </script>
    
</body>
</html>

哒哒哒Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery查找笔记

<!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>Do.
复制链接

扫一扫

jQuery查找 笔记

jQuery查找笔记