jQuery初学:find()方法及children方法的区别分析

首先看看英文解释吧：
children方法：

find方法：

通过以上的解释，可以总结如下：
1：children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。
2：children方法获得的仅仅是元素一下级的子元素，即：immediate children。
3：find方法获得所有下级元素，即：descendants of these elements in the DOM tree
4：children方法的参数selector 是可选的（optionally），用来过滤子元素，但find方法的参数selector方法是必选的。
5：find方法事实上可以通过使用 jQuery( selector, context )来实现：英语如是说：Selector context is implemented with the .find() method; therefore, $('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii').

例如，有以下html元素：

使用：$('ul.level-2').children().css('border', '1px solid green'); 的效果是：

使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是：

赞 (0)

相关推荐

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

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

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

    .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的children,我理解为儿子,只在儿子这一级遍历.看下例子: 复制代码 代码如下: .chi

  • Jquery选择器中使用变量实现动态选择例子

    例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

  • jQuery中Find选择器用法示例

    本文实例讲述了jQuery中Find选择器用法.分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点 示例如下: function CalculatePrice() { var totalMoney = 0; $(".trBookCartItem").each(function (index, item) { var price = $(item).find(".spanPrice").text(); va

  • jQuery中find()方法用法实例

    本文实例讲述了jQuery中find()方法用法.分享给大家供大家参考.具体分析如下: 此方法获得匹配元素集合中所有元素的子元素,并通过选择器.jQuery 对象或元素删选. find()方法是获取匹配元素后代元素的好方法. 注意:children()只获取一级子元素,而find()将查找所所有子元素. 语法结构一: 复制代码 代码如下: $(selector).find(expr) 参数列表: 参数 描述 expr 字符串值,定义筛选表达式. 实例代码: 复制代码 代码如下: <!DOCTYP

  • Jquery find与filter函数区别 说明

    find()会在div元素内 寻找 class为classname的元素. filter()则是筛选div的class为classname的元素. 基本是find子元素找,filter是平级找 ·find 函数是在当前对象集合的子元素中进行查询; ·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围; ·find 函数的参数是 jQuery 选择器表达式; ·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系); ·filter 的参数也可以是个函

  • Jquery中find与each方法用法实例

    本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") $("#"+"id") $(this) $(element) 等等,只要灵活运用,就能爆发出强大的可造型. 但是在实际使用中,仍然觉得有些不足. 如果想要在某个元素下寻找特定的元素,仅仅依靠上面这个方法,就必须对 $("

  • jquery选择器排除某个DOM元素的方法（实例演示）

    jquery选择器众多,使用选取某个DOM的方法有很多种,如何在选取的某个元素集上面做一些排除呢?下面通过几个实例说明: 1.选择所有的img元素,排除class=phpernote的元素的个数: 复制代码 代码如下: $('img:not(.phpernote)').length();//或者$('img').not('.phpernote').length(); 2.获取id=phpernote下面所有没有class=com的li元素的个数 复制代码 代码如下: $('#phpernote

  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • Jquery中的层次选择器与find()的区别示例介绍

    复制代码 代码如下: $("#anaylseBody tr").find("td:eq(" + $("#analyse th:contains(" + $(this).val() + ")").index() + ")").hide(); ("#anaylseBody tr") find作为根基 复制代码 代码如下: $("#anaylseBody tr td") 以

  • jQuery find和children方法使用

    需要查找一个对象内包含的某个子对象. 为了避免和美工冲突,对特定操作对象加上id标识,美工不大改也没什么问题. 1.children("condition") 获取的是一级子元素. 2.find("condition")获取包含的所有子元素.

随机推荐