文档章节

js或jquery如何获取父级、子级、兄弟元素(包括祖级、孙级等)

 轻轻的往前走
发布于 11/09 22:57
字数 432
阅读 6
收藏 0

原生javascript方法:

var a = document.getElementById("dom");
      del_space(a); //清理空格
      var b = a.childNodes; //获取a的全部子节点;
      var c = a.parentNode; //获取a的父节点;
      var d = a.nextSibling; //获取a的下一个兄弟节点
      var e = a.previousSibling; //获取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").

本文转载自:https://lvwenhan.com/web-front/373.html

共有 人打赏支持
上一篇: 行内元素解释
粉丝 0
博文 19
码字总数 5475
作品 0
西安
高级程序员
私信 提问
Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素(转)

var chils= s.childNodes; //得到s的全部子节点var par=s.parentNode; //得到s的父节点var ns=s.nextSbiling; //获得s的下一个兄弟节点var ps=s.previousSbiling; //得到s的上一个兄弟节点v...

easonjim
2017/01/04
0
0
网站开发进阶(五十四)query获取父级元素、子级元素、兄弟元素的方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82667689 网站开发进阶(五十四)query获取父级元素、子级元素、兄弟元素的方法...

孙华强
09/12
0
0
转-JQuery选择器及radio,checkbox,select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元...

huntering
2015/08/25
0
0
原生和jQuery对dom元素操作系列

先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 代码如下...

lslaiwy
2017/10/24
0
0
JavaScript(十八):DOM对象

一、 认识DOM DOM(Document Object Model,文档对象模型):定义访问和处理HTML文档的标准方法。DOM 将 HTML 文档呈现为带有 元素、属性和文本的树结构(节点树)。 先来看看下面代码: 将 ...

Agnes2017
10/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

在ubuntu下选择crontab计划任务的编辑器

在ubuntu下,首次编辑crontab计划任务的时候,会提示让选择编辑器。由于对nano编辑器不是很熟悉,若是选择nova编辑的话,会有些麻烦。 可以重置编辑器,方法如下: [root@wang ~]# select-...

季书歌
33分钟前
4
0
在线BASE64加密解密、UrlEncode编码/解码、native/ascii在线转换工具 -toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
34分钟前
1
0
laravel命令

https://blog.csdn.net/aaroun/article/details/79140618

vio小黑
35分钟前
3
0
记录一个vue directive实现点击指令外部区域调用函数的方案

根据directive提供的API来写一个点击外部区域可以让其下拉列表消失的菜单 <div id="app" v-clock> <div class="main" v-clickoutside="handleClose"> <button @click="show = !show">点......

呵呵闯
38分钟前
3
0
Oracle一列的多行数据拼成一行显示字符

Oracle一列的多行数据拼成一行显示字符 oracle 提供了两个函数WMSYS.WM_CONCAT 和 ListAgg函数。 先介绍:WMSYS.WM_CONCAT 例: id name 1 aa 2 bb 3 cc 要的结果是"aa,bb,cc" select WMSYS...

voole
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部