码迷,mamicode.com
首页 > Web开发 > 详细

jquery遍历之children()与find()的区别

时间:2015-07-01 23:25:41      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

 

[html] view plaincopy
 
  1. <ul class="level-1">  
  2.     <li class="item-i">I</li>  
  3.     <li class="item-ii">II  
  4.         <ul class="level-2">不包括自己  
  5.             <li class="item-a">A</li>  
  6.             <li class="item-b">B  
  7.                 <ul class="level-3">  
  8.                     <li class="item-1">1</li>  
  9.                     <li class="item-2">2</li>  
  10.                     <li class="item-3">3</li>  
  11.                 </ul>  
  12.             </li>  
  13.             <li class="item-c">C</li>  
  14.         </ul>  
  15.     </li>  
  16.     <li class="item-iii">III</li>  
  17. </ul>  

 

[javascript] view plaincopy
 
  1. $(‘ul.level-2‘).children().css(‘background-color‘, ‘red‘);  

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

 

在看个例子:

 

[html] view plaincopy
 
  1. <script>  
  2. $(document).ready(function(){  
  3.     $("#abc").children(".selected").css("color", "blue");  
  4. });  
  5. </script>  
  6. <div id="abc">  
  7.     <span>Hello</span>  
  8.     <class="selected">Hello Again</p>  
  9.     <div><--换成<p>  
  10.         <div class="selected">And Again</div>  
  11.         <span class="selected">aaAnd Again</span>  
  12.     </div><--换成</p>  
  13.     <p>And One Last Time</p>  
  14. </div>  

得到的结果如下:

技术分享

这个是预期的结果,但是如果将上面的<div>换成<p>,见上面代码注释,得到的结果却是:

技术分享

.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中查找。
 
下面看个例子

 

[javascript] view plaincopy
 
  1. $("div.foo").click(function() {  
  2.     $("span", this).addClass("bar");  
  3. });  

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

jquery遍历之children()与find()的区别

jquery遍历之children()与find()的区别

标签:

原文地址:http://www.cnblogs.com/monian/p/4614730.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!