jquery获取子节点和父节点的示例代码
一、获取子节点
比如是一个 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对于处理事件委派非常有用。
相关推荐
-
jquery的父子兄弟节点查找示例代码
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents
-
jquery的父、子、兄弟节点查找,节点的子节点循环方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children(expr) //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙 jQuery.contents() //查找下面的所有内容,包括节点和文本. jQuery.prev() //查找上一个兄弟节点,不是所有的兄弟节点 jQue
-
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
本文实例讲述了jQuery获取父元素节点.子元素节点及兄弟元素节点的方法.分享给大家供大家参考,具体如下: 先来看这段html代码,整个取节点(父.子.兄弟等)的方法都是围绕这段代码来的: <ul class="par"> <li id="firstli"> <h3 class="title">条目一</h3> <ul class="par"> <li id=&
-
jquery 获取表单元素里面的值示例代码
jquery 笔记: 复制代码 代码如下: $("input[name='radio_name']:checked").val() <input type="radio" value="1" name="radio_name" />1 <input type="radio" value="2" name="radio_name" />2 <
-
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight + window.scrollMaxY
-
jQuery获取Radio,CheckBox选择的Value值(示例代码)
$("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值$("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发$("#text_id").selec
-
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#se
-
JS和Jquery获取和修改label的值的示例代码
获取值: label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 复制代码 代码如下: var label=document.getElementById("id"); var value=label.value; var value=$("#id").val(); 可以这样: JS: 复制代码 代码如下: var label=document.getElementById("id"); var value=label
-
javascript获取网页中指定节点的父节点、子节点的方法小结
我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多
-
JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式访问. var a = document.getElementById("test").getElementsByTagName("div"); 2. 通过childNo
-
sql server递归子节点、父节点sql查询表结构的实例
一.查询当前部门下的所有子部门 WITH dept AS ( SELECT * FROM dbo.deptTab --部门表 WHERE pid = @id UNION ALL SELECT d.* FROM dbo.deptTab d INNER JOIN dept ON d.pid = dept.id ) SELECT * FROM dept 二.查询当前部门所有上级部门 WITH tab AS ( SELECT DepId , ParentId , DepName , [Enable] ,
-
C#搜索TreeView子节点,保留父节点的方法
本文实例讲述了C#搜索TreeView子节点,保留父节点的方法.分享给大家供大家参考.具体如下: C# 搜索TreeView子节点保留父节点: private void selectNodeByName(string name) { //重新生生成树, InitTvCatalog(); //删除节点 selectNode(tvCatalog.Nodes, name); } private void selectNode(TreeNodeCollection nodes, string name)
-
DevExpress实现TreeList向上递归获取符合条件的父节点
本文实例展示了DevExpress实现TreeList向上递归获取符合条件的父节点的方法,在一些项目开发中比较有实用价值,具体实现方法如下所示: 主要功能代码如下: /// <summary> /// 向上递归,获取符合条件的父节点 /// </summary> /// <param name="node">需要向上递归的节点</param> /// <param name="conditionHanlder"&
随机推荐
- 如何防范利用刷新来“作弊”的计数器?
- 解锁注册表的vbs脚本
- 学习ExtJS(一) 之基础前提
- Vue学习笔记进阶篇之vue-cli安装及介绍
- 喷墨打印机的四个假故障解决办法
- JavaWeb项目中dll文件动态加载方法解析(详细步骤)
- javascript数组去重常用方法实例分析
- php简单实现多语言切换的方法
- 方便的大家admin及admin888 经过 md5加密后16位和32位代码
- docker registry安装简单命令实现
- JS实现仿京东淘宝竖排二级导航
- C#设计模式之单例模式实例讲解
- 简单介绍Python中的try和finally和with方法
- 在Nginx中增加对OAuth协议的支持的教程
- 详解Node.js access_token的获取、存储及更新
- python 获取网页编码方式实现代码
- mysql sql语句总结
- javascript实现粘贴qq截图功能(clipboardData)
- C++获取类的成员函数的函数指针详解及实例代码
- 利用solr实现商品的搜索功能(实例讲解)