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 相关文章推荐
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
js轮播图代码分享
Jul 14 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
vue 实现把路由单独分离出来
Aug 13 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
window.open的功能全解析
2006/10/10 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python多进程实现进程间通信实例
2017/11/24 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
pymysql模块的操作实例
2019/12/17 Python
Python调用C/C++的方法解析
2020/08/05 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
公司会议策划方案
2014/05/17 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
植物园观后感
2015/06/11 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书