前端的初学习 -- 第十一章 -- 遍历节点

最新推荐文章于 2024-11-04 20:33:37 发布

港猫鱼未归

最新推荐文章于 2024-11-04 20:33:37 发布

阅读量164

点赞数

分类专栏：前端学习文章标签： js jquery java html

本文链接：https://blog.csdn.net/zy3062231314/article/details/113865696

版权

前端学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前端的初学习 -- 第十一章 -- 遍历节点

遍历节点

遍历节点

遍历父级元素

parent() 返回被选元素的直接父元素，仅仅是上一级（找爸爸）
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

<body>
    <input>
    <button id="add">测试</button>
    <ul>
        <li>Test1</li>
        <li>Test2
            <b>TestB</b>
        </li>
        <li>Test3</li>
    </ul>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#add").click(function(){
            var x = $("b").parent().html();//找b标签的父节点

            //找b标签的指定节点(只能是父节点)
            var x = $("b").parents("ul").html();
            var x = $("b").parents("body").html();
            
            alert(x);
        })
    </script>
</body>

遍历同级元素

next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

<body>
    <input>
    <button id="add">测试</button>
    <p>p1</p>
    <ul>
        <li>Test1</li>
        <li>Test2
            <b>TestB</b>
        </li>
        <li>Test3</li>
    </ul>
    <p id="p2">p2</p>
    <p>p3</p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#add").click(function () {
            // var x = $("ul").next().text();//找ul标签的下一个节点
            // var x = $("ul").prev().text();//找ul标签的上一个节点
            // var x = $("ul").siblings("#p2").text();//找ul标签所有同辈节点中id是p2的

            //ul所有的同辈标签
            var arr = $("ul").siblings();
            for (var i = 0; i < arr.length; i++) {
                alert(arr[i]);
            }
            alert(x);
        })
    </script>
</body>

遍历子级元素

children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”

<body>
    <input>
    <button id="add">测试</button>
    <ul>
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
    </ul>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#add").click(function () {
            var x = $("ul").children().text();//ul的全部子节点
            var x = $("ul").children("li:first").text();//ul的第一个子节点
            alert(x);

        })
    </script>
</body>

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<body>
    <input>
    <button id="add">测试</button>
    <ul>
        <li>Test1</li>
        <li>Test2
            <p>Test5</p>
        </li>
        <li>Test3
            <p>Test6</p>
        </li>
        <h1>Test4</h1>
    </ul>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#add").click(function () {
            var x = $("ul").find("p").text();//在ul中查找p标签，忽略层级
            alert(x);
        })
    </script>
</body>

元素过滤

first()：过滤第一个元素
last()：过滤最后一个元素
eq(index)：过滤到下标为index的元素
not()：除了什么之外的元素
is()：返回布尔，判断是不是这种元素

<body>
    <input>
    <button id="add">测试</button>
    <ul>
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
        <h1>Test4</h1>
    </ul>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#add").click(function () {
            var x = $("li").first().text();//ul的第一个li
            var x = $("li").last().text();//ul的最后一个li
            var x = $("li").eq(1).text();//下标为1的li
            var x = $("li").not("li:eq(1)").text();//除了下标为1的li
            var x = $("li").parent().is("ul");//返回布尔类型，li的父节点是否为ul
            alert(x);
        })
    </script>
</body>