`

JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

阅读更多

【前言】

      工作中经常遇到取各种父级、子级、同胞级元素,这里罗列下。

 

【主体】

(1)JS的获取方式

 

<div id = "dom"><br>          
<div></div> <br>          
<div></div> <br>     
<div></div> <br> </div>
 function dom(){
   var a = document.getElementByIdx_x_x("dom");
   var b = a.childNodes;   获取a的全部子节点(包括文本节点和元素节点)
   var h = a.children;     获取a的全部直接元素节点(元素节点,用的较为频繁)
   var c = a.parentNode;   获取a的父节点
   var d = a.nextSbiling;   获取a的下一个兄弟节点
   var e = a.previousSbiling;获取a的上一个兄弟节点
   var f = a.firstChild;    获取a的第一个子节点
   var g = a.lastChild;     获取a的最后一个子节点
}

 

 

(2)jQuery的获取方式

jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个
jQuery对象返回,children()则只会返回节点
jQuery.prev(),  返回上一个兄弟节点,不是所有的兄弟节点
jQuery.prevAll(),返回所有之前的兄弟节点
jQuery.next(),   返回下一个兄弟节点,不是所有的兄弟节点
jQuery.nextAll(),返回所有之后的兄弟节点
jQuery.siblings(), 返回兄弟姐妹节点,不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从p元素开始找,等同于$("p span")

 

 

 

 

.

分享到:
评论

相关推荐

    课题-js和jquery获取父级元素、子级元素、兄弟元素的方法.pdf

    JavaScript 和 jQuery 提供了多种方式来获取HTML文档中的父级元素、子级元素以及兄弟元素。在JavaScript中,这些操作相对复杂,而在jQuery库的帮助下,它们变得更加简洁。 首先,我们来看JavaScript获取元素的方法...

    课题-js和jquery获取父级元素、子级元素、兄弟元素的方法.docx

    本文将详细阐述如何使用JS和jQuery获取父级元素、子级元素以及兄弟元素。 首先,让我们看看JS获取这些元素的方法。在纯JavaScript中,获取元素相对较为复杂,尤其是在处理不同浏览器的兼容性问题时。例如,获取ID为...

    js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    在原生JavaScript中,获取父级元素、子级元素和兄弟元素可以通过DOM提供的属性和方法来实现。 1. **获取子级元素** - 使用`getElementsByTagName`方法可以获取具有特定标签名的所有子元素。例如,`document....

    jQuery 子级元素在父级元素内滚动

    当我们谈论"jQuery 子级元素在父级元素内滚动"时,这通常涉及到滚动事件和相对定位的概念。这个场景常见于创建滚动效果或者实现自定义滚动条,比如在滚动父元素时,子元素随着父元素的滚动保持可见或执行特定的动画...

    JS获取节点的兄弟,父级,子级元素的方法

    总的来说,本文详细介绍了使用JavaScript和jQuery获取DOM元素兄弟节点、父级和子级元素的方法。通过阅读本文,读者能够学习到如何在不同浏览器中处理兼容性问题,并掌握使用原生JavaScript和jQuery进行DOM操作的技巧...

    jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

    本文主要探讨的是如何使用jQuery来遍历DOM的父级元素、子级元素和同级元素。 首先,我们来看如何遍历父级(祖先)元素: 1. `parent()`:这个方法用于获取一个元素的直接父元素。例如,如果你有一个`&lt;span&gt;`元素,...

    解决jquery无法找到其他父级子集问题的方法_.docx

    在JavaScript的jQuery库中,有时...通过以上方法,可以有效地解决jQuery在寻找和操作父级子集时遇到的问题,同时增强代码的安全性。在实际开发中,结合良好的编程习惯和安全实践,可以构建出更健壮、更安全的前端应用。

    jQuery父级以及同级元素查找介绍

    在JavaScript的世界里,jQuery库为开发者提供了简便的方式来操作DOM元素,包括查找和处理父级、同级以及子级元素。本文将深入介绍jQuery中的几个关键方法,帮助你更好地理解和运用这些功能。 首先,我们来看jQuery....

    checkbox.zip

    总的来说,实现“layui checkbox 父级子级结构,父级选中子级全选,子级没有选中父级取消选中”这一功能,需要深入理解layui的组件机制、JavaScript的事件处理和DOM操作。在实际开发中,我们还需要考虑到性能优化,...

    选中一级复选框,相关二级或父级同时被选,取消也是

    同理,当取消一级复选框时,所有相关的子级和父级复选框也会被取消选中。这一机制的核心在于递归地处理复选框的选择状态,并且保持整个层级结构的一致性。 ### 技术实现细节 在给定的部分代码中,使用了jQuery库来...

    jQuery基于layui插件制作checkbox复选框选中代码

    同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而子级未全选时父级取消选中。以下将详细阐述这个过程。 首先,layui是一款优秀的前端UI框架,它提供了丰富的组件和模块,使得...

    jQuery基于当前元素进行下一步的遍历

    在jQuery中,一旦我们通过选择器选中了一个或一组元素,常常需要对这些元素的相邻、父级或者子级元素进行进一步的操作。这涉及到jQuery提供的遍历方法,它们可以帮助我们高效地导航DOM结构。让我们详细了解一下基于...

    jQuery多级复选框checkbox选中代码.zip

    在处理函数内部,可以通过`.prop('checked')`来获取或设置复选框的选中状态,`.parent()`和`.children()`方法可以用来查找父级和子级复选框,`.siblings()`则可以获取同级元素。通过这些方法,可以实现联动效果,即...

    jQuery+layui多选框选择和美化特效

    在本文中,我们将深入探讨如何使用jQuery和layui插件实现多选框的选择和美化特效,特别是在处理父级子级结构的权限选择场景中。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax...

    jQuery DOM节点操作源码

    3. **DOM遍历**:jQuery提供了多种方法用于遍历DOM树,如`parent()`, `children()`, `siblings()`, `next()`, `prev()`等,它们帮助我们找到元素的父级、子级、相邻兄弟元素等。 4. **元素操作**:`append()`, `...

    JQuery练习集合

    例如,`parent()`, `children()`, `siblings()`, `next()`, `prev()`等方法帮助我们轻松地找到元素的父级、子级、同级兄弟元素和前后相邻元素。通过这些方法,我们可以实现对页面结构的深度理解和灵活控制。 2. **...

    jQuery选择器全解.

    层次选择器用于处理DOM树中元素间的层级关系,包括祖先、后代、父级、子级等,增强了选择器的表达能力。 1. **ancestor descendant**:选取特定祖先元素下的所有后代元素,如`$(".bgRed div")`选取CSS类为`bgRed`的...

    jQuery资料

    4. **DOM遍历**: `parent()`, `children()`, `siblings()`等方法用于查找元素的父级、子级或同级元素。 5. **数据绑定`: `.data()`, `.removeData()`用于在元素上存储和检索数据。 ### 三、jQuery与现代JavaScript...

Global site tag (gtag.js) - Google Analytics