Jquery中的DOM操作 (八.遍历节点)

最新推荐文章于 2025-07-29 14:00:13 发布

张大仙是个妖怪

最新推荐文章于 2025-07-29 14:00:13 发布

阅读量615

点赞数 1

CC 4.0 BY-SA版权

文章标签： jQuery 操作DOM节点 DOM对象

本文链接：https://blog.youkuaiyun.com/NDKHBWH/article/details/60574513

本文详细介绍了jQuery中的选择器方法，包括childrend()、next()、prev()、sliblings()等用于获取元素间关系的方法，并通过实例展示了这些方法的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.childrend()方法

该方法用于取得匹配元素的子元素集合.

2.next()方法

该方法用于取得匹配元素后面紧邻的同辈元素

3.prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素

4.sliblings()方法

该方法用于取得匹配元素前后所有的同辈元素

5.parent()

获取集合中每个匹配元素的父级元素

6.parents()

获取集合中每个匹配元素的祖先元素

7.closest()

从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素

        $(function () {
                    alert($("p").children().length);
                    alert($("ul").children().length);
                    for(var i=0;i< $("ul").children().length;i++){
                        alert(  $("ul").children()[i].innerHTML );
                    };
            //--------------------------------------------------------
                    var $p1 = $("p").next();
                    alert( $p1.html() );  //  紧邻<p>元素后的同辈元素
                    var $ul = $("ul").prev();
                    alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素
                    var $p2 = $("p").siblings();
                    alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素
                    $(document).bind("click", function (e) {
                        $(e.target).closest("li").css("color","red");
                    })
            //--------------------------------------------------------
                //parent
                $("input:eq(0)").click(function(){
                    resetStyle();
                    $('.item-1').parent().css('background-color', 'red');
                });
                //parents
                $("input:eq(1)").click(function(){
                    resetStyle();
                    $('.item-1').parents('ul').css('background-color', 'red');
                });
                //closest
                $("input:eq(2)").click(function(){
                    resetStyle();
                    $('.item-1').closest('ul').css('background-color', 'red');
                });

                function resetStyle(){
                    $("*").removeAttr("style");
                }
        });

<p  title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>
<hr/>
<input type="button" value="parent()"/>
<input type="button" value="parents()"/>
<input type="button" value="closest()"/>

<ul id="one" class="level-1">
    <li class="item-i">I</li>
    <li id="ii" class="item-ii">II
        <ul class="level-2">
            <li class="item-a"><a href="#" class="item-1">Home</a></li>
            <li class="item-b"><a href="#" class="item-2">Product</a></li>
            <li class="item-c"><a href="#" class="item-3">About</a></li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>