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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现开关灯效果
Aug 02 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
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python制作小说爬虫实录
2017/08/14 Python
python如何基于redis实现ip代理池
2020/01/17 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
旅游市场营销方案
2014/03/09 职场文书
银行求职自荐信
2014/06/30 职场文书
2014年话务员工作总结
2014/11/19 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
python解析json数据
2022/04/29 Python