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 相关文章推荐
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
js中的string.format函数代码
Aug 11 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
分享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 页面执行时间计算代码
2008/12/04 PHP
ajax php 实现写入数据库
2009/09/02 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
初识Javascript小结
2015/07/16 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
在Python中使用第三方模块的教程
2015/04/27 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python对日志进行处理的实例代码
2018/10/06 Python
在python shell中运行python文件的实现
2019/12/21 Python
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
自荐信格式的六要素
2013/09/21 职场文书
股份合作协议书
2014/04/12 职场文书
地方课程教学计划
2015/01/19 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2016中秋节问候语
2015/11/11 职场文书
委托书范本格式
2019/04/18 职场文书
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers