element.find(selector)  返回匹配element集合中每个元素的后代,参数selector是必须的,可以通过选择器对元素进行过滤,筛选出符合条件的元素。如果想选中所有的后代元素,则参数传通配选择器  "*"

element.children(selector)  返回匹配element集合中每个元素的子代,参数selector不是必须的,如果参数省略,则会选中element下的所有子代元素;如果传入参数,则会在子代元素中通过选择器对其进行过滤,筛选出符合条件的元素。

总结:children只会遍历指定DOM元素的下一层级,find会遍历指定DOM元素下的所有后代层级

扩展:find方法扩展
选择器context就是用find方法实现的。

jquery(selector,[context]) 即$(selector,[context])

可能大多数的人都是只用到了$(selector)来选择元素,如果只传入第一个参数的话,就会从document元素下查找匹配的元素。

如果传入第二个参数,就会从context中查找,其返回的元素顺序等同于在context中出现的先后顺序。

$("p", this) 等价于 $(this).find("p"),$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')

基于jquery 的find()函数和children()函数的区别的更多相关文章

  1. jquery 中后代遍历之children、find区别

    jquery 中children.find区别 首先看一段HTML代码,如下: <table id="tb"> <tr> <td>0</t ...

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

    首先看看英文解释吧: children方法: find方法: 通过以上的解释,可以总结如下: 1:children及find方法都用是用来获得element的子elements的,两者都不会返回 te ...

  3. jQuery:find()方法与children()方法的区别

    1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样. 2:children方法获得的仅仅是元素一 ...

  4. 基于JQuery的获取鼠标进入和离开容器方向的实现

    做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...

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

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  6. 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

  7. Jquery源码分析之匿名函数的自执行

    匿名函数的格式: 格式: (function(){ //代码 })(); //和这个基于jQuery的比较下: $(function(){ alert("this is a test&quo ...

  8. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

  9. jQuery函数attr()和prop()的区别

    在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同. 但不得不说的是,这两个函数的用处却并不相同.下面我们来详细介绍这两个函数之间的区别. ...

随机推荐

  1. C 语言运算符优先级(记忆口诀)

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数名(形參表)   . 成员选择(对象) 对象.成员名   -& ...

  2. Apicloud自定义模块

    各种坑,折腾了两天才有点头绪.我用的是Android Studio编辑器,官网是Eclipse的视频.文档也比较蛋疼. 自定义模块的目录结构要按照下面来处理 其中res_模块名,存放res和Andro ...

  3. apiCloud中api.ajax方法跨域传参获取数据

    apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中 获取参数 var pageP ...

  4. Server Tomcat v7.0 Server at localhost failed to start.解决办法(图文详解)

    问题描述 Server Tomcat v7.0 Server at localhost failed to start. 解决办法 把你工作空间文件夹下的如下路径打开: <workspace-d ...

  5. 线程进阶:多任务处理(17)——Java中的锁(Unsafe基础)

    在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...

  6. 10:Challenge 3(树状数组直接修改)

    总时间限制:  10000ms 单个测试点时间限制:  1000ms 内存限制:  262144kB 描述 给一个长为N的数列,有M次操作,每次操作是以下两种之一: (1)修改数列中的一个数 (2)求 ...

  7. mongodb报错:connection refused because too many open connections: 819

    问题: 发现mongodb无法连接,查看mongodb日志,出现大量的如下报错: [initandlisten] connection refused because too many open co ...

  8. 前端换行显示,后端返回<br>

  9. selenium自动化(一).........................................搭建环境

    一  环境搭建 安装python(建议使用py3) py2和py3在语法上会有一定的差别 第三方插件逐步转向py3,很多py2的插件已经停止维护 本教程的所有代码基于py3 安装selenium插件 ...

  10. Vue学习之v-if与v-show的区别

    v-if和v-show具有类似的功能,不过v-if才是真正的条件渲染,他会根据表达式适当的销毁或重建元素及绑定事件或子组件.若表达式初始值为false,则一开始元素或组件不会渲染,只有当第一次为真时, ...