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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
json数据格式常见操作示例
Jun 13 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
Js基础学习资料
2010/11/23 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
Python正则表达式介绍
2012/08/06 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
python中as用法实例分析
2015/04/30 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python_mask_array的用法
2020/02/18 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
什么是Python中的顺序表
2020/06/02 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
本科生求职信
2014/06/17 职场文书
python基础之类方法和静态方法
2021/10/24 Python