基于jquery中children()与find()的区别介绍

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

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

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

复制代码 代码如下:

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

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

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


复制代码 代码如下:

$('ul.level-2').children().css('background-color', 'red');

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

在看个例子:

复制代码 代码如下:

    <script> 
    $(document).ready(function(){ 
        $("#abc").children(".selected").css("color", "blue"); 
    }); 
    </script> 
    <div id="abc"> 
        <span>Hello</span> 
        <p class="selected">Hello Again</p> 
        <div><--换成<p> 
            <div class="selected">And Again</div> 
            <span class="selected">aaAnd Again</span> 
        </div><--换成</p> 
        <p>And One Last Time</p> 
    </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中查找。

下面看个例子

复制代码 代码如下:

$("div.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')

find()更多内容请访问:http://www.w3school.com.cn/jquery/traversing_find.asp

children()更多内容请访问:http://www.w3school.com.cn/jquery/traversing_children.asp

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
/** * 本文纯粹是梳理一下目前W3C标准中Array对象的自带Method。 * 全文没啥营养,不过最后性能测试的部分,倒是抛出了一些疑问。 */ 赋值方法 (Mutator methods) 这些方法直接修改数组自身 pop 和 push Array.pop(); // 删除数组最后一个元素,返回被删除的元素 Array.push(element1, ..., elementN); // 在数组尾部插入1-N个元素,返回操作后数组的length 通过这 pop 和 push ,就能把数组模拟成 堆栈(
以下就是JS代码:: @ author YHC: 复制代码 代码如下: function getCurrentMonthLastDay(){ var current=new Date(); var currentMonth=current.getMonth(); var nextMonth=++currentMonth; var nextMonthDayOne =new Date(current.getFullYear(),nextMonth,1); var minusDate=1000*60*60*24
如下 复制代码 代码如下: div/div 用IE开发者工具,或IE8自带的开发者工具。结构如 图1 : 红色所圈之处可以看到给div添加的内联样式width,height,background都依次排列。正常! 但给该div添加filter:alpha(opacity=20)后, 复制代码 代码如下: div /div 情况发生了变化,如 图2 : 红色所圈之处看到,width和filter挤在一行上了。正常的情况width应该另起一行。 有人也许会说这只是开发者工具没有正确显示,只要不影响页面元素正确渲
修正hashtableobj.set("length","0") bug 可以设置key忽略大小写 可以clone hashtable对象 可以 使用obj.valueOf("key","defalutvalue") 设置默认值等等 欢迎修正bug 复制代码 代码如下: html head script type="text/javascript" // Authors Birdshome, 麻袋@博客园 改版 phito,彭海涛 Object.prototype.Clone = function() {
本文记录的是带领成员开发一个小模块功能的时候,需要用到弹出窗口加载树状级联单位选择,最后决定用采用jQuery+EasyUI插件进行开发。但是在使用EasyUI中tree的插件时,碰到了不少麻烦。为了提供弹出树的显示速度,就采用异步加载数节点值,首先先加载根节点,然后根据点击的节点展开加载子节点。 往往结果和预期的都不一样,困惑了几天,展开后子节点是动态加载了,但是收缩后无法清空之前填充的数据;第二次在展开时,子节点又被重复加载了一遍,造成了数据重复显示,并没有提供清除子节点的方法。想尽了各种办法来解决这
代码共享url: http://code.google.com/p/region-select-js/ 数据已经更新到中国统计局网站中的2012年的那批数据(制作后未核对); 下拉使用div模拟实现.可以定制样式 支持ie6/ch/ff/op 按照设计,应该可以支持无限级数据树;但是数据并非随需加载,而是全部加载.如果数据达到街道级别,或是包含国外行政区域,会比较大
本文实例讲述了javascript实时显示北京时间的方法。分享给大家供大家参考。具体如下: 该页面中实时显示北京时间,更改时区也可以作为显示世界时间,代码如下: 复制代码 代码如下: script type="text/javascript" Date.prototype.strftime = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getH
内容导读: 有了 With 语句,在存取对象属性和方法时就不用重复指定参考对象,在 With 语句块中,凡是 JavaScript 不识别的属性和方法都和该语句块指定的对象有关。With 语句的语法格式如下所示: With Object {Statements}对象指明了当语句组中对象缺省时的参考对象,这里我们用较为熟悉的 Document 对象对 With 语句举例。例如 当使用与 Document 对象有关的 write( )或 writeln( )方法时,往往使用如下形式:document.writ
复制代码 代码如下: /*! * jLip JavaScript Library v0.1 * * Copyright 2012, Lip2up (lip2up@qq.com) * Just for free use, NO LICENSE */ (function() { function extend(target, props) { for (var m in props) { if (target[m] === undefined) target[m] = props[m]; } } var fn
复制代码 代码如下: p meta content="text/html; charset=gb2312" http-equiv="Content-Type" /style type="text/css" .shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px; width:600px; margin:0 auto;} .shuoming dt {height:30px; line-height:30px; font-w