jQuery遍历节点元素方法介绍

jQuery遍历节点元素方法介绍

在使用jQuery库的javascript代码中经常需要根据选择器选中指定的节点元素，并对其进行操作。jQuery提供了一系列遍历节点元素的方法，可以方便实现这个目标。

1. children() 方法

children() 方法返回指定选择器匹配的子元素。只会匹配子元素，非子元素则不匹配。

语法：$(selector).children(filter)

示例：

<div id="parent">
    <div id="child-1">Child 1</div>
    <div id="child-2">
        <div id="grandchild">Grandchild</div>
    </div>
</div>

$("#parent").children().css("color", "red");  // 将 parent 的直接 <div> 子元素的文字颜色设为红色
$("#parent").children("#child-1").css("font-weight", "bold"); // 将 id 为 child-1 的子元素的文字设置为加粗

2. find() 方法

find() 方法返回指定选择器匹配的后代节点元素。

语法：$(selector).find(filter)

示例：

<div id="parent">
    <div id="child-1">Child 1</div>
    <div id="child-2">
        <div id="grandchild">Grandchild</div>
    </div>
</div>

$("#parent").find("#grandchild").css("color", "red");  // 将 id 为 grandchild 的后代元素的文字颜色设为红色

3. parent() 方法

parent() 方法返回指定节点元素的直接父元素。

语法：$(selector).parent(filter)

示例：

<div id="parent">
    <div id="child-1">Child 1</div>
    <div id="child-2">
        <div id="grandchild">Grandchild</div>
    </div>
</div>

$("#child-1").parent().css("background", "yellow");  // 将 id 为 child-1 的元素的直接父元素的背景色设置为黄色

4. parents() 方法

parents() 方法返回指定节点元素的所有祖先元素，从近到远的顺序排列。

语法：$(selector).parents(filter)

示例：

<div id="grandparent">
    <div id="parent">
        <div id="child">Child</div>
    </div>
</div>

$("#child").parents().css("border", "1px solid black");  // 将 id 为 child 的元素的所有祖先元素的边框样式设置为实线黑色

5. siblings() 方法

siblings() 方法返回指定节点元素的所有同级节点元素。

语法：$(selector).siblings(filter)

示例：

<div id="parent">
    <div id="child-1">Child 1</div>
    <div id="child-2">Child 2</div>
</div>

$("#child-1").siblings().css("font-size", "2em");  // 将 id 为 child-1 的元素的同级元素的字体大小设置为2倍

6. next() 和 prev() 方法

next() 方法返回指定节点元素的下一个同级元素。

prev() 方法返回指定节点元素的上一个同级元素。

语法：$(selector).next(filter) 和 $(selector).prev(filter)

示例：

<div id="parent">
    <div id="child-1">Child 1</div>
    <div id="child-2">Child 2</div>
</div>

$("#child-1").next().css("background", "green");  // 将 id 为 child-1 的元素的下一个同级元素的背景色设置为绿色
$("#child-2").prev().css("border", "1px dashed blue");  // 将 id 为 child-2 的元素的上一个同级元素的边框样式设置为虚线蓝色

7. eq() 方法

eq() 方法返回指定节点元素在它的同名兄弟节点元素中的索引位置。

语法：$(selector).eq(index)

示例：

<div id="parent">
    <div>Apple</div>
    <div>Cake</div>
    <div>Banana</div>
</div>

$("#parent div").eq(1).css("font-weight", "bold");  // 将索引为1的div元素的字体设置加粗

以上就是 jQuery 遍历节点元素方法的介绍。需要注意的是，许多遍历方法都可以接受一个 filter 参数，以进一步筛选出符合条件的元素。如果没有指定 filter 参数，则会返回所有匹配的元素。