`
pengyusong
  • 浏览: 17699 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

阅读更多
转载:专注于zencart,zen-cart学习,seo学习,各种网络编程学习-小丁博客http://www.xiaodingblog.com/1539.html
发表于35 天前 ⁄ javascript, Jquery, 所有的内容 ⁄ 评论数 2 ⁄ 被围观 1,075 views+

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。

JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素

原生的JS获取ID为test的元素下的子元素。可以用:

var a = docuemnt.getElementById("test").getElementsByTagName("div"); 这样是没有问题的

此时a.length=2;

但是如果我们换另一种方法

var b =document.getElementById("test").childNodes;

此时b.length 在IE浏览器中没问题,其依旧等于2,但是在FF浏览器中则会使4,是因为FF把换行也当做一个元素了。

所以,在此,我们就要做处理了,需遍历这些元素,把元素类型为空格而且是文本都删除。

function del_ff(elem){

var elem_child = elem.childNodes;

for(var i=0; i

if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))

{elem.removeChild(elem_child)

}

}

}

上述函数遍历子元素,当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。

nodeNames可以得到一个节点的节点类型,/\s/是非空字符在JS里的正则表达式。前面加!,则表示是空字符

test() 方法用于检测一个字符串是否匹配某个模式.语法是: RegExpObject.test(string)

如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

nodeValue表示得到这个节点里的值。

removeChild则是删除元素的子元素。

之后,在调用子,父,兄,这些属性之前,调用上面的函数把空格清理一下就可以了

下面介绍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 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....

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

    在原生JavaScript中,我们可以通过DOM提供的属性和方法来获取父级元素、子级元素和兄弟元素。 #### 获取父级元素 要获取某个元素的父级元素,可以使用`parentNode`属性。例如: ```javascript var element = ...

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

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

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

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

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

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

    js jquery获取当前元素的兄弟级 上一个 下一个元素

    var chils= s.childNodes; //得到s的全部子节点 var par=s[removed];...JS获取节点父级,子级元素 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUE

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

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

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

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

    checkbox.zip

    为了实现这样的功能,我们需要使用JavaScript(可能是jQuery或者layui内置的JS方法)来监听复选框的选中状态变化,并根据状态更新对应的子级或父级复选框。这通常涉及到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.my.js

    用JavaScript原生封装的一个jQuery库,可供大家学习底层封装原理...子级关系,// siblings() 兄弟关系,eq() 是根据传入的索引获取到某个元素,index() 获取元素在父级中排第几索引, on() 给实例绑定事件用的核心方法

Global site tag (gtag.js) - Google Analytics