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 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
async/await地狱该如何避免详解
May 10 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
Node 模块原理与用法详解
May 13 Javascript
vue中路由跳转不计入history的操作
Sep 21 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
python能开发游戏吗
2020/06/11 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
linux面试题参考答案(6)
2016/06/23 面试题
开会迟到检讨书
2014/02/03 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python