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数值转换的三种方式总结
Jul 31 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 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
PHP5中MVC结构学习
2006/10/09 PHP
完美解决PHP中文乱码
2009/11/26 PHP
JSON辅助格式化处理方法
2013/03/26 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Django内容增加富文本功能的实例
2017/10/17 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
python中元组的用法整理
2020/06/15 Python
如何解决安装python3.6.1失败
2020/07/01 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
《观舞记》教学反思
2014/04/16 职场文书
运动会稿件100字
2014/09/24 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
给老婆道歉的话
2015/01/20 职场文书
针对吵架老公保证书
2015/05/08 职场文书
家长通知书家长意见
2015/06/03 职场文书
2019银行竞聘书
2019/06/21 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书