jQuery:遍历节点

1 祖先元素

用于向上遍历 DOM 树的方法

  parent() 返回被选元素的直接父元素,仅仅是上一级 (找爸爸)

  parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素,可以选择辈分

<p><button>测试</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("b").parent().html(); // 找爸爸
        //var x = $("b").parents("ul").html(); // 找祖宗 ul
        //var x = $("b").parents("body").html(); // 找祖宗 body
        alert( x );
    });
</script>

 

2 同辈元素

  next() 获取紧邻匹配元素之后的元素

  prev() 获取紧邻匹配元素之前的元素

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

<button>测试</button>
<p>p1</p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
    //var x = $("ul").next().text(); // 紧邻的下一个元素
    //var x = $("ul").prev().text(); // 紧邻的上一个元素
    //var x = $("ul").siblings("#x").text(); // 所有的兄弟中,id=x的

    var arr = $("ul").siblings(); // ul的所有兄弟,1个button,3个p,2个script
    for(var i = 0 ;i< arr.length ;i++){
        alert(arr[i]);
    }
    });
</script>

 

3 后代元素

后代是子、孙、曾孙等等

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

<button>测试</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
    //var x = $("ul").children().text(); //所有子节点:abc
    var x = $("ul").children("li:first").text(); //ul中的第一个子节点
    alert(x);
});
</script>

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

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>龚工</p>
    </li>
    <h3>祝融</h3>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("ul").find("p").text(); //在ul中查找p元素,忽略层级
        //var x = $("ul").find("h3").text(); //在ul中查找h3元素,忽略层级
        var x = $("ul").find().text(); // 找什么?不知道!
        alert(x);
});
</script>

 

4 元素的过滤

  first():过滤第一个元素

  last():过滤最后一个元素

  eq(index):过滤到下标为index的元素

  not():除了什么之外的元素

  is():返回布尔,判断是不是这种元素

<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("li").first().text(); // 第一个li
        //var x = $("li").last().text(); // 最后一个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>

 

上一篇:0712 NOTE


下一篇:通过js实现隔行变色效果