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


Posted in Javascript onJune 05, 2016

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

先给大家上干货:

【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")
Javascript 相关文章推荐
JavaScript 学习初步 入门教程
Mar 25 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 #Javascript
EasyUI布局 高度自适应
Jun 04 #Javascript
javascript获取select标签选中的值
Jun 04 #Javascript
jQuery Mobile 触摸事件实例
Jun 04 #Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 #Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 #Javascript
javacript获取当前屏幕大小
Jun 04 #Javascript
You might like
php function用法如何递归及return和echo区别
2014/03/07 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
Jquery轮播效果实现过程解析
2016/03/30 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
python实现矩阵打印
2019/03/02 Python
Python操作Jira库常用方法解析
2020/04/10 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Python项目跨域问题解决方案
2020/06/22 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技