jquery的父、子、兄弟节点查找,节点的子节点循环方法

一、jQuery的父、子、兄弟节点查找

在jQuery中，我们可以通过一些便捷的方法来查找HTML文档中的父元素、子元素以及兄弟元素。

1. 父元素查找

可以使用parent()方法来查找当前元素的直接父级元素，例如：

$(document).ready(function(){
    $('p').parent().css('background-color', 'yellow');
});

上述例子中，我们选择了所有的<p>元素，并使用parent()方法找到它们的直接父级元素（也就是父元素），然后给这些父元素设置了背景颜色。

1. 子元素查找

使用children()方法可以查找当前元素的所有直接子元素，例如：

$(document).ready(function(){
    $('div').children().css('background-color', 'yellow');
});

上述例子中，我们选择了所有的<div>元素，并使用children()方法找到了它们的所有直接子元素（包括文本节点），然后给这些子元素设置背景颜色。

1. 兄弟元素查找

使用siblings()方法可以查找当前元素的所有兄弟元素，例如：

$(document).ready(function(){
    $('h1').siblings().css('background-color', 'yellow');
});

上述例子中，我们选择了所有的<h1>元素，并使用siblings()方法找到了它们的兄弟元素们（不包括自己），然后给这些兄弟元素设置背景颜色。

二、节点的子节点循环方法

如果我们想要循环遍历一个DOM节点的所有子级节点，可以使用find()方法来实现。

示例：

HTML代码：

<ul>
    <li>列表项1</li>
    <li>列表项2
        <ul>
            <li>嵌套列表项1</li>
            <li>嵌套列表项2</li>
            <li>嵌套列表项3</li>
        </ul>
    </li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

JavaScript代码：

$(document).ready(function(){
    $('ul').find('*').each(function(){
        console.log(this.tagName);
    });
});

上述例子中，我们选择了一个<ul>元素，并使用find()方法找到了其所有的子级元素。然后我们使用each()方法遍历找到的节点，并打印出它们的名称。

这段代码最终会输出如下结果：

LI
LI
UL
LI
LI
LI

上述结果说明我们成功循环访问了所有的子级节点。注意find()方法中的通配符符号*代表了选择所有的子节点，包含文本节点。