Jquery遍历之获取子级元素、同级元素和父级元素

　　Jquery的遍历，其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素。以某项选择开始，并沿着这条线进行移动，或向上（父级）、或向下（子级）、或水平（同级），直到找到目标元素为止，这种移动也被成为对DOM进行遍历。

　　其实对于DOM来说，这个不陌生，Jquery的遍历也就是在DOM树上上蹿下跳，当然这种上蹿下跳不是没有规则的，胡乱的找是让人鄙视的。通俗的说，在一颗树上（你也在树上，已经爬上去了，哈哈），以你所在的位置为起点，以树上有个桃子为目的地，你的这个起点也就是当前 this ,去移动去摘桃子的过程就是Jquery遍历，所以相对应的Jquery所衍生出的遍历方法可以分为三大类，即Jquery遍历之父级（祖先）、同级（同胞）和子级（后代）三种。

　　Jquery遍历之父级

　　parent()　　返回当前被选元素的直接父元素；

　　parents()　　返回当前被选元素的所有父元素，直到文档的根部即<html>处为止；

　　parentsUntil()　　返回介于两个元素之间的所有当前元素的祖先元素；$("#id1").parentsUntil("#id5") 若这个id5是id1的父级元素，则此方法放回的是id1向上遍历到id5的所有元素。

　　Jquery遍历之同级

　　有许多方法让我们可以在DOM树上进行水平遍历。下面进行简单介绍，主要还是要实战操作。

　　siblings()　　返回被选元素的所有同胞（同级）元素；

　　向下（next）

　　next()　　　　返回被选元素的下一个同胞元素;

　　nextAll()　　　　返回被选元素的所有跟随的同胞元素，即当前元素以下的所有同胞元素;

　　nextUntil()　　　　返回介于两个给定参数之间的所有跟随的同胞元素.

　　向上（prev）

　　prev()　　　　返回被选元素的下一个同胞元素;

　　prevAll()　　　　返回被选元素的所有跟随的同胞元素，即当前元素以下的所有同胞元素;

　　prevUntil()　　　　返回介于两个给定参数之间的所有跟随的同胞元素.

　　Jquery遍历之子级

　　children()　　返回被选元素的直接子元素，就是真正的儿子，不往孙子重孙那边去。

　　find()　　　　返回被选元素的后代元素，一路向下直到最后一个后代。

　　Jquery遍历each()方法

　　最后也是最为常用常见的方法，Jquery的each()方法，一般情况下我们遍历出来的是一个数组，通过遍历这个数组获得目的元素并对其修改，each()方法最好不过了。　

　　each() 方法规定为每个匹配元素规定运行的函数。

　　提示：返回 false 可用于及早停止循环。

　　语法：$(selector).each(function(index,element))

　　参数：index - 选择器的 index 位置

　　　　 element - 当前的元素（也可使用 "this" 选择器）

　　结束语：

　　很长很长的时间我对于DOM的理解模模糊糊，感觉抓住了点东西又感觉什么也没有学到，理论与实践总是有差别的，通过几个项目的实践，对于概念的理解更加透彻，只有实践才能让理论的理解更加成熟，相辅相成。很多的时间花费在了页面这一块上，界面的处理，界面数据的处理让我深深的陷入了这个泥潭，去年花了很长的时间狠狠的学习了一遍数据库知识，去年下半年花了点时间再次回顾js/Jquery，起码让我在这个泥潭中陷入的时间短暂一点，对于我一个刚刚出道的年轻人（好像不怎么年轻了），迷茫、无知、恐惧总是伴随，只有不断的学习才能让我短暂的得到安全感。

　　说的有点多了，就这样吧，以后的日子还长着呢。希望得到各位的鼓励，谢谢！！！

转载于:https://www.cnblogs.com/angusbao/p/8359254.html

Jquery遍历之获取子级元素、同级元素和父级元素相关推荐

angular.js使用路由时,子控制器监听不到父级$boardcast的事件
2019独角兽企业重金招聘Python工程师标准>>> 环境:angular.js+sastruts+apache-tomcat angular.js中当使用路由时,控制器之间通信使 ...
关于子元素的margin-top对父级容器无效
原理就是重新构建一个bfc盒子.如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为v ...
html 内容不被父级包住,解决：父级元素不能被子元素内容撑开的解决办法，父级元素没有高度的解决办法...
问题父级元素不能被子元素内容撑开的解决办法,父级元素没有高度的解决办法. 今天在写网页时遇到如下图问题,解决问题后自己做个随笔,希望帮到更多的学前端的童鞋! 问题图片问题描述最外层的不能自适应高 ...
jq 刷新页面，刷新父级页面，iframe刷新父级页面
window.location.reload(); //刷新当前页面. parent.location.reload(); //刷新父亲对象(用于框架) opener.location.rel ...
jQuery：设置获取属性、遍历添加删除元素、尺寸、位置
目录一.设置或获取元素属性值 1.设置或获取元素固有属性值 2.设置或获取元素自定义属性值attr() 3.数据缓存data() 二.获取元素内容三.jQuery对元素操作 1.遍历元素 2.创建 ...
9 Jquery 获取子孙或父级元素
9 Jquery 获取子孙或父级元素 children 查找直接的子元素,不会跨层级 parent 查找直接父元素 parents 查找所有父级元素 find查找所有的元素,会一直查找,跨层级查找一 ...
如何获取元素在父级div里的位置_关于元素的浮动你了解多少
首先,在介绍什么是浮动之前我们先介绍一下html中元素的普通流布局方式.在普通流中,元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的,在排列过程中所有的行内元素水平排列,直到当行被占 ...
jquery查找父窗体id_Vue父组件获取子组件中的变量
全世界只有不到3 % 的人关注了我你真是个特别的人在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组件,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的某个值的问题 ...
Jquery根据id获取该id下子元素的值
<div class="form-group"><div id="putPageA"><label for="actio ...
jQuery根据当前节点元素找到父子、兄弟节点元素进行添加或删除
目录 1.查找父子.兄弟节点元素 1)父级 2)子级 3)同级 2.添加删除选中的dom元素 jQuery根据ID删除元素 jquery的删除属性的方法 1.查找父子.兄弟节点元素在操作DOM元素的 ...

Jquery遍历之获取子级元素、同级元素和父级元素

Jquery遍历之获取子级元素、同级元素和父级元素

Jquery遍历之获取子级元素、同级元素和父级元素相关推荐

最新文章

热门文章