资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jquery中find()与children()有什么区别-创新互联

这篇文章主要介绍jquery中find()与children()有什么区别,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

做网站、网站建设的关注点不是能为您做些什么网站,而是怎么做网站,有没有做好网站,给创新互联一个展示的机会来证明自己,这并不会花费您太多时间,或许会给您带来新的灵感和惊喜。面向用户友好,注重用户体验,一切以用户为中心。

区别:children(selector)方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈),参数是可选的;find(selector)方法是返回匹配元素集合中每个元素的后代(只要符合,不管是儿子辈,孙子辈都可以),参数是必选的。

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素仅儿子辈)。参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选。

.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的,可以为选择器、jquery对象可元素来对元素进行筛选。

.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。这里的children,我理解为儿子,只在儿子这一级遍历。看下例子:

  • I
  • II
      不包括自己
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III
$('ul.level-2').children().css('background-color', 'red');

这行代码的结果是,项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式,返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话,那么只会包括匹配的项目。

在看个例子:


Hello

Hello Again

<--换成

And Again

aaAnd Again

<--换成

And One Last Time

得到的结果如下:

这个是预期的结果,但是如果将上面的

换成

,见上面代码注释,得到的结果却是:

.find()方法要注意的知识点:

1、find是遍历当前元素集合中每个元素的后代。只要符合,不管是儿子辈,孙子辈都可以。

2、与其他的树遍历方法不同,选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回,可以传递通配选择器 '*'。

3、find只在后代中遍历,不包括自己。

4、选择器 context 是由 .find() 方法实现的;因此,$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。

选择器的语法是:jQuery(selector, [context])

一般情况对jquery的选择器的用法,都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的是将前面选择器限定在context这个环境中。在默认情况下,即不传第二个参数,选择器从文档根部对 DOM 进行搜索($()将在当前的HTML document中查找DOM元素);如果指定了第二个参数,如一个DOM元素集或jquery对象,那就会在这个context中查找。
 
下面看个例子

$("p.foo").click(function() {
    $("span", this).addClass("bar");
});

由于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的class。


在内部,选择器 context是通过 .find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span"),$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')

以上是jquery中find()与children()有什么区别的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章题目:jquery中find()与children()有什么区别-创新互联
文章路径:http://cdkjz.cn/article/isodc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220