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几个验证函数代码
Mar 25 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
自我鉴定书面格式
2014/01/13 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
周一给客户的问候语
2015/11/10 职场文书