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 相关文章推荐
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
深入理解javascript中的this
Feb 08 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
解决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和ACCESS写聊天室(七)
2006/10/09 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
javascript 写类方式之一
2009/07/05 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
python 拼接文件路径的方法
2018/10/23 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
年终考核评语
2014/01/19 职场文书
关于读书的演讲稿
2014/05/07 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
土地租赁协议书
2015/01/29 职场文书
新教师个人工作总结
2015/02/06 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript