Jquery实现获取子元素的方法分析


Posted in jQuery onAugust 24, 2019

本文实例讲述了Jquery实现获取子元素的方法。分享给大家供大家参考,具体如下:

Jquery获取子元素的方法有2种,分别是children()方法和find()方法。下面我们分别来使用这两种方法,看看它们有何差异。

1.children()方法:获取该元素下的直接子集元素

2.find()方法:获取该元素下的所有子集元素

分别以以下HTML代码为例:

<ul>
  <li>
    list1
    <ul>
      <li>
        list1-1
      </li>
      <li>
        list1-2
      </li>
    </ul>
  </li>
  <li>
    list2
    <ul>
      <li>
        list2-1
      </li>
      <li>
        list2-2
      </li>
    </ul>
  </li>
  <li>
    list3
    <ul>
      <li>
        list3-1
      </li>
      <li>
        list3-2
      </li>
    </ul>
  </li>
</ul>

3、children()方法获取ul下面直接子集元素li:$("ul").children("li")

需要注意的是,如果li元素下还有li元素,children方法将不会被获取。我们可以用length来测试获取的个数“$("ul").children("li").length”,最后输出结果为3

4、find()方法获取ul下所有元素li:$("ul").find("li")

需要注意的是,find方法会无限循环查找ul标签节点下的li,一直找到没有为止,用length来测试获取个数“$("ul").find("li").length”,最后输出结果为9

5、children和find的区别:children只会查找直接子集,而find会跨越层级查找,一直找到没有为止。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
jQuery表单选择器用法详解
Aug 22 #jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
jQuery zTree树插件的使用教程
Aug 16 #jQuery
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
You might like
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Python 专题四 文件基础知识
2017/03/20 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python实现趣味图片字符化
2019/04/30 Python
python虚拟环境完美部署教程
2019/08/06 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python实现磁盘日志清理的示例
2020/11/05 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
企业项目策划书
2014/01/11 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
保险专业自荐信范文
2014/02/20 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
导游词开场白
2015/01/31 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript