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或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue-router为激活的路由设置样式操作
Jul 18 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生成静态页面的简单示例
2014/04/17 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
python实现分页效果
2017/10/25 Python
python模拟事件触发机制详解
2018/01/19 Python
基于python实现高速视频传输程序
2019/05/05 Python
python内存动态分配过程详解
2019/07/15 Python
python elasticsearch环境搭建详解
2019/09/02 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
weblogic面试题
2016/03/07 面试题
考试作弊被抓检讨书
2014/01/10 职场文书
公司保密承诺书
2014/03/27 职场文书
社会实践评语
2014/04/28 职场文书
消防标语大全
2014/06/07 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
红色经典观后感
2015/06/18 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript