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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 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
文章推荐系统(三)
2006/10/09 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
php常用正则函数实例小结
2016/12/29 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python解惑之True和False详解
2017/04/24 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
几个判断型的面试题
2012/07/03 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
创建市级文明单位实施方案
2014/03/01 职场文书
台风停课通知
2015/04/24 职场文书
学生会工作感言
2015/08/07 职场文书
Python入门之基础语法详解
2021/05/11 Python