网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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()有什么区别
URL标题:http://bjjierui.cn/article/iepijj.html

其他资讯