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 调试器简介
Feb 21 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
分享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使用APC实现实时上传进度条功能
2015/10/26 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
Python中的作用域规则详解
2015/01/30 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
python把一个字符串切开的实例方法
2020/09/27 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
加拿大最大的书店:Indigo
2017/01/01 全球购物
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
学生打架检讨书1000字
2014/01/16 职场文书
趣味体育活动方案
2014/02/08 职场文书
士力架广告词
2014/03/20 职场文书
业务内勤岗位职责
2014/04/30 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
工作所在部门证明
2014/09/21 职场文书
授权委托书怎么写
2014/09/25 职场文书
运动会开幕式致辞
2015/07/29 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书