Jquery遍历之获取子级元素、同级元素和父级元素
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，起码让我在这个泥潭中陷入的时间短暂一点，对于我一个刚刚出道的年轻人（好像不怎么年轻了），迷茫、无知、恐惧总是伴随，只有不断的学习才能让我短暂的得到安全感。
说的有点多了，就这样吧，以后的日子还长着呢。希望得到各位的鼓励，谢谢！！！
Jquery遍历之获取子级元素、同级元素和父级元素的更多相关文章
- 关于子元素的margin-top对父级容器无效
如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为visiable的属性就直接解决了 ...
- call继承父级属性，prototype继承父级方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery点击获取子元素ID值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery遍历table获取td单元格的值
$("#grd").find("tr").each(function () { //第二列单元格的值eq(索引) alert($(this).children( ...
- jQuery使用（四）：DOM操作之查找兄弟元素和父级元素
查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
- jQuery遍历文档(重要)
什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您 ...
- JQuery：JQuery遍历详解
JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...
- 3..jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
随机推荐
- elasticsearch及head插件安装与配置
1. 环境软件版本说明 系统:ubuntu14.04.1 JDK:1.8 elasticsearch:5.5.2 node:9.11.1 elasticsearch:5.X 2. 环境软件下载说明 1 ...
- 惰性求值——lodash源码解读
前言 lodash受欢迎的一个原因,是其优异的计算性能.而其性能能有这么突出的表现,很大部分就来源于其使用的算法--惰性求值. 本文将讲述lodash源码中,惰性求值的原理和实现. 一.惰性求值的原理 ...
- ORACLE归档日志比联机重做日志小很多的情况总结
ORACLE归档日志比联机重做日志小很多的情况 前几天一网友在群里反馈他遇到归档日志比联机重做日志(redo log)小很多的情况,个人第一次遇到这种情况,非常感兴趣,于是在一番交流沟通后,终于弄 ...
- 暂别SQL Server,转战MySQL和Redis
机缘巧合下找到一个愿意提供学习MySQL和Redis机会的岗位,于是要暂别SQL Server了. 后续一段时间会陆续总结三年来SQL Server相关的工作经验,当做是暂别前的总结.
- c/c++ 模板与STL小例子系列<三> traits
c/c++ 模板与STL小例子系列 traits 对这个概念,还是处于懵逼的状态,初步体会就是,为了解决类型之间的转换问题. 从一个类型为A的指针,转化到类型为B的指针,中间需要用void*来作为中介 ...
- define和typedef的区别
define和typedef的区别 define是单纯的字符替换,typedef是重新定义了新的类型 #include <stdio.h> #define CHAR1 char* type ...
- SpringBoot实现热部署(修改class不需要重启)
热部署: devtools可以实现页面热部署(即页面修改后会立即生效, 这个可以直接在application.properties文件中配置spring.thymeleaf.cache=false来实 ...
- SQL server 数据库的索引和视图、存储过程和触发器
1.索引:数据排序的方法,快速查询数据 分类: 唯一索引:不允许有相同值 主键索引:自动创建的主键对应的索引,命令方式不可删 聚集索引:物理顺序与索引顺序一致,只能创建一个 非聚集索引:物理顺序与索引 ...
- nginx tcp负载均衡 （Module ngx_stream_upstream_module）
Example ConfigurationDirectives upstream server zone state hash least_conn ...
- BZOJ3378:[USACO]MooFest 狂欢节(树状数组)
Description 每一年,约翰的N(1≤N≤20000)只奶牛参加奶牛狂欢节．这是一个全世界奶牛都参加的大联欢．狂欢节包括很多有趣的活动,比如干草堆叠大赛.跳牛栏大赛,奶牛之间有时还相互扎屁股取 ...