| 标题 | jQuery获取父元素节点、子元素节点及兄弟元素节点的方法 |
| 内容 | 这篇文章主要介绍了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法,结合实例形式总结分析了jQuery节点操作的相关技巧,需要的朋友可以参考下 本文实例讲述了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法。分享给大家供大家参考，具体如下： 先来看这段html代码，整个取节点（父、子、兄弟等）的方法都是围绕这段代码来的： <ul> <li id="firstli"> <h3>条目一</h3> <ul> <li id="dwtedx">第一项</li> <li>第二项</li> </ul> </li> </ul> JQUERY 父节点的获取： jquery获取父元素方法比较多、比如parent()、parents()、closest()、find,first-child这些都能帮你实现查找父节点、子节点、兄弟节点 如我们利用parent()来获取父节点 $("#dwtedx").parent().parent();//取得id为firstli的li节点 $("#dwtedx").parent().parent(".par");//取得最上面的ul节点 $("#dwtedx").parent(".par"); //取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈 下面、我们主要来讲一下 parents() 和 closest() 两个方法的区别 1、closest从当前元素开始匹配寻找、parents从父元素开始匹配寻找 2、closest逐级向上查找、直到发现匹配的元素后 就停止了、parents一直向上查找直到根元素、然后把这些元素放进一个临时集合中、再用给定的选择器表达式去过滤 3、closest返回0或1个元素、parents可能包含0 个、1个、或者多个元素 代码可以这样写： $('#dwtedx').parents('.par');//可以找出所有class为.par的节点 $('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个 JQUERY 兄弟节点的获取 jQuery兄弟节点获取、我们的思路是通过当前节点找到父节点、然后通过父节点去找到子节点、代码如下 $(".title").parent().find('ul'); //找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul 还有一种方法是使用 siblings() 函数、代码如下 $(".title").siblings('ul'); //找到自己的兄弟节点ul JQUERY 子节点的获取 匹配第一个子元素 :first 只匹配一个元素、而此选择符将为每个父元素匹配一个子元素 $(".par:first-child"); //取得id为firstli的节点 通过选择器去获取、代码如下: $('#firstli h3.title'); //取得条目一的h3 使用find()函数、上面已经说过了、用法一样 $("#firstli").find("h3"); //找到子兄弟节点h3 使用children()函数、代码如下 $("#firstli").children("h3.title"); //取得子节点h3、class为title 希望本文所述对大家jQuery程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。