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 hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
Vue.js 图标选择组件实践详解
Dec 03 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python使用matplotlib绘制折线图教程
2017/02/08 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python实现聊天小程序
2018/03/13 Python
Windows下安装Scrapy
2018/10/17 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Django继承自带user表并重写的例子
2019/11/18 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python ellipsis 的用法详解
2020/11/20 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
校园门卫岗位职责
2013/12/09 职场文书
面试自我评价范文
2014/09/17 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
会计主管岗位职责
2015/04/02 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Python初识逻辑与if语句及用法大全
2021/08/07 Python