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 相关文章推荐
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
vue实现登录拦截
Jun 29 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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
星际RPG字典
2020/03/04 星际争霸
smarty的保留变量问题
2008/10/23 PHP
php 文章采集正则代码
2009/12/28 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
js查找父节点的简单方法
2008/06/28 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
python图像常规操作
2017/11/11 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
EJB实例的生命周期
2016/10/28 面试题
理工科学生的自我评价
2013/12/15 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
地方白酒代理协议书
2014/10/25 职场文书
道歉信怎么写
2015/05/12 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL