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 相关文章推荐
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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准确取得服务器IP地址的方法
2015/06/02 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
javascript常用的设计模式
2017/02/09 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python小技巧之批量抓取美女图片
2014/06/06 Python
python操作xml文件详细介绍
2014/06/09 Python
python爬虫之百度API调用方法
2017/06/11 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python实现最大子序和的方法示例
2019/07/05 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
奥巴马英文演讲稿
2014/05/15 职场文书