jQuery基础修炼圣典—DOM篇

最新推荐文章于 2024-10-11 17:39:47 发布

weixin_33676492

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量68

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/huangsuhong/blog/675212

版权

6.jQuery遍历

（1）children()方法

jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$("div").find()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。

（2）find()方法

如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。

注意重点：

.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点

例子：

$("button:last").click(function(){
var $spans = $('span');
$('p').find($spans).css('color', 'red');
});

转载于:https://my.oschina.net/huangsuhong/blog/675212

关注