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知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
js工具方法弹出蒙版
May 08 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
Vue父组件监听子组件生命周期
Sep 03 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+MYSQL开发工具及资源收藏
2007/01/02 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
php简单统计中文个数的方法
2016/09/30 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python使用opencv读取图片的实例
2017/08/17 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
python获取本机所有IP地址的方法
2018/12/26 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python判断无向图环是否存在的示例
2019/11/22 Python
计算机考试作弊检讨书1000字
2015/01/01 职场文书
个人维稳承诺书
2015/05/04 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python
mysql 获取相邻数据项
2022/05/11 MySQL