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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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连接Oracle for NT 远程数据库
2006/10/09 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
React优化子组件render的使用
2019/05/12 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python for循环与getitem的关系详解
2020/01/02 Python
django ORM之values和annotate使用详解
2020/05/19 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
毕业生在校学习的自我评价分享
2013/10/08 职场文书
服装厂厂长职责
2013/12/16 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
Python实现归一化算法详情
2022/03/18 Python