jquery获取子节点和父节点的示例代码


Posted in Javascript onSeptember 10, 2013

一、获取子节点

比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法
1、使用筛选条件

$('#test span.demo')

2、使用find()函数

$('#test').find('span.demo')

3、使用children()函数

$('#test').children('span.demo')

二、获取父节点
jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点

<ul class="parent1"> 
<li><a href="#" id="item1">jquery获取父节点</a></li> 
<li><a href="#">jquery获取父元素</a></li> 
</ul>

我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素,有以下几种方法:

1.$('#item1').parent().parent('.parent1');

2.$('li:parent');

3.$('#items').parents('.parent1');

4.$('#items1').closest('.parent1');

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。closest对于处理事件委派非常有用。

Javascript 相关文章推荐
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
js获取url传值的方法
Dec 18 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
详解vue-router基本使用
Apr 18 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
Es6 Generator函数详细解析
Feb 24 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 #Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 #Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 #Javascript
原始的js代码和jquery对比体会
Sep 10 #Javascript
js获取url参数值的两种方式
Sep 10 #Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 #Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 #Javascript
You might like
浅析php中jsonp的跨域实例
2013/06/21 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
python解析xml文件实例分享
2013/12/04 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python 的类、继承和多态详解
2017/07/16 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
详解python算法之冒泡排序
2019/03/05 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python读取指定字节长度的文本方法
2019/08/27 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
应届生幼儿园求职信
2013/11/12 职场文书
仓库管理计划书
2014/05/04 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android