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遍历之获取子级元素、同级元素和父级元素的更多相关文章

  1. 关于子元素的margin-top对父级容器无效

    如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为visiable的属性就直接解决了 ...

  2. call继承父级属性，prototype继承父级方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jquery点击获取子元素ID值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery遍历table获取td单元格的值

    $("#grd").find("tr").each(function () { //第二列单元格的值eq(索引) alert($(this).children( ...

  5. jQuery使用（四）：DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  6. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  7. jQuery遍历文档(重要)

    什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您 ...

  8. JQuery：JQuery遍历详解

    JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...

  9. 3..jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

随机推荐

  1. OneAPM 重磅登陆 CTDC 2018展示“ AIOps 双雄”创新实力

    9月7日-8日,以“AI 智享未来”为主题的2018第二届 CTDC 首席技术官领袖峰会在乌镇盛大召开,大会由 CTOA 首席技术官领袖联盟.ITShare 主办,大会邀请了国内外顶级互联网.在线教育 ...

  2. sqlServer 获取最新的一条数据

    SQL语句获取最新一条的数据 * from tra.dbo.订单 order by 下单时间 desc --时间倒序排列取第一条 select * from tra.dbo.订单 where 下单时间 ...

  3. 我喜欢的vs+va快捷键

    拿到新版的vs,我首先会安装va,然后自定义快捷键.现在有些快捷键被系统占用,可以先remove掉,然后换成自己熟悉的快捷键.需要做到常用快捷键两个按键即可. alt+Q:文件中查询,复杂查询 ctr ...

  4. ELK 处理 Percona 审计日志(填坑)

    前提 1.有强烈的审计需求. 2.能允许10%-15%左右的性能损失. 3.有强烈的对数据库操作实时查看需求(一般都是为了领导要求). Logstash 比较坑的配置   1 2 3 4 5 6 7 ...

  5. 编译percona-server-locks-detail-5.7.22

    yum install -y binutils compat-libstdc++ gcc gcc-c++ glibc glibc-devel ksh libaio libaio-devel libgc ...

  6. [Hive_6] Hive 的内置函数应用

    0. 说明 Hive 的内置函数的基本操作 | 时间函数 | String 函数 | 条件语句 | explode | split | substring 1. 基本操作 查看函数 show func ...

  7. PHP的move_uploaded_file（）出错解决

    今天用的PHP的move_uploaded_file方法保存前端上传的中文名称文件时,方法返回假,调试时错误码为2,错误信息为: move_uploaded_file(D:\ git_prj \ xx ...

  8. LeetCode算法题-Range Sum Query Immutable（Java实现）

    这是悦乐书的第204次更新,第214篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第70题(顺位题号是303).给定整数数组nums,找到索引i和j(i≤j)之间的元素之 ...

  9. Linux 小知识翻译 - 「服务器」

    这次聊聊 「服务器」 这个词. 可能会觉得为什么「突然问这个?」.接下来请先考虑一下下面的题目. A) 「Web服务器是指提供网页数据的软件」 B) 「Web服务器是指运行上述软件的硬件」 那么,究竟 ...

  10. （转）Spring Boot 2 (二)：Spring Boot 2 尝鲜-动态 Banner

    http://www.ityouknow.com/springboot/2018/03/03/spring-boot-banner.html Spring Boot 2.0 提供了很多新特性,其中就有 ...