• 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,起码让我在这个泥潭中陷入的时间短暂一点,对于我一个刚刚出道的年轻人(好像不怎么年轻了),迷茫、无知、恐惧总是伴随,只有不断的学习才能让我短暂的得到安全感。

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

  • 相关阅读:
    [RxJS] ReplaySubject
    [React Fundamentals] Composable Components
    [Webpack] Use the Webpack Dashboard to Monitor Webpack Operations
    [RxJS] AsyncSubject
    [React Fundamentals] Component Lifecycle
    [React Fundamentals] Component Lifecycle
    [React Fundamentals] Component Lifecycle
    [RxJS] Subject basic
    [React Fundamentals] Using Refs to Access Components
    文档管理系统二——文档扫描与图片编辑
  • 原文地址:https://www.cnblogs.com/angusbao/p/8359254.html
Copyright © 2020-2023  润新知