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 产生不重复的随机数三种实现思路
Dec 13 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
js实现简单的日历显示效果函数示例
Nov 25 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中循环语句的用法介绍
2012/01/30 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
Prototype框架详解
2015/11/25 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JavaScript手机振动API
2016/06/11 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
python操作xml文件示例
2014/04/07 Python
Python写的一个简单监控系统
2015/06/19 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python中的self用法详解
2019/08/06 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
中药专业自荐信范文
2014/03/18 职场文书
股份合作协议书
2014/09/10 职场文书
PHP基本语法
2021/03/31 PHP
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
python中__slots__节约内存的具体做法
2021/07/04 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis