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

 更新时间:2016年06月05日 09:44:30   投稿:hebedich  
本文给大家简单总结了下JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法,非常的简单实用,有需要的小伙伴可以参考下

最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~

先给大家上干货:

【js的获取方式】

<div id = "dom">
          <div></div>
          <div></div>
     <div></div>
 </div> function dom(){ var a = document.getElementByIdx_x_x("dom"); var b = a.childNodes; 获取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的最后一个子节点 }

【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")

相关文章

  • 网页禁止鼠标左右键功能的简单代码

    网页禁止鼠标左右键功能的简单代码

    本篇文章介绍与演示网页禁止鼠标左右键的实例代码,需要的朋友可以参考一下
    2013-06-06
  • JS document form表单元素操作完整示例

    JS document form表单元素操作完整示例

    这篇文章主要介绍了JS document form表单元素操作,结合完整实例形式详细分析了JavaScript form表单元素获取、输出、遍历等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • js文件中直接alert()中文出来的是乱码的解决方法

    js文件中直接alert()中文出来的是乱码的解决方法

    下面小编就为大家带来一篇js文件中直接alert()中文出来的是乱码的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • web css实现整站样式互相切换

    web css实现整站样式互相切换

    css轻松实现整站样式互相切换。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-10-10
  • Js利用正则表达式去除字符串的中括号

    Js利用正则表达式去除字符串的中括号

    这篇文章主要给大家介绍了关于Js利用正则表达式去除字符串的中括号的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • JS实现的类似微信聊天效果示例

    JS实现的类似微信聊天效果示例

    这篇文章主要介绍了JS实现的类似微信聊天效果,可实现模拟微信聊天效果的对话框信息传输,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • JS表单提交验证、input(type=number) 去三角 刷新验证码

    JS表单提交验证、input(type=number) 去三角 刷新验证码

    在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,下面给大家介绍js表单提交验证input(type=number) 去三角 刷新验证码注意事项,一起看看吧
    2017-06-06
  • 防止动态加载JavaScript引起的内存泄漏问题

    防止动态加载JavaScript引起的内存泄漏问题

    利用Script标签可以跨域加载并运行一段JavaScript脚本, 但Neil Fraser先前已指出,脚本运行后资源并没被释放,即使是Script标签移除后。
    2009-10-10
  • ES6中Array.copyWithin()函数的用法实例详解

    ES6中Array.copyWithin()函数的用法实例详解

    ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
    2017-09-09
  • js中null与空字符串

    js中null与空字符串""的区别讲解

    今天小编就为大家分享一篇关于js中null与空字符串""的区别讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论