jquery学习第二章,遍历、过滤器

2020-03-03 18:36 阅读 242 次 评论 1 条
提示

要深刻理解遍历,必须要有DOM相关的知识。

jQuery遍历

html结构

结构描述

  1. <section><div>的父元素parent
  2. <div><p>的父元素parent
  3. 两个<a>都是第二个<p>的子元素children
  4. <img>是第二个<a>的子元素children
  5. <section>是其它所有元素的祖先
  6. 四个<p>互为同胞siblings
  7. 两个<a>互为同胞siblings
<section>
  <div>
    <p></p>
    <p>
      <a>
        <img src="">
      </a>
      <a></a>
    </p>
    <p></p>
    <p></p>
  </div>
  <div></div>
</section>

 

过滤器

返回a标签的上一级元素

$(document).ready(function(){
  $("a").parent(); //使用parent方法,一个非常语义化的单词(父亲或母亲)
});

返回a标签的所有上级元素

$(document).ready(function() {
  $("a").parents(); //使用parents方法,parent的复数形式,父母,在这里可以理解为所有长辈
});

比如在实际应用中,并不需要所有上级元素(我想基本不会有这种需求),如果只需要返回div呢,那么回到图例中是a标签的上上级,就需要过滤一下遍历的结果。

$(document).ready(function(){
 $("a").parents("div"); //在parents方法中,给括号内加参数,这样的结果就是只返回上级中所有div。
});

但是上述写法是有很大局限性的,而且实际应用中应该也不会有这么简单的需求。

所以,在了解过滤器之前,要认识到为什么要过滤,什么是过滤。其实一句话就能说清楚,就是结果太多,需要缩小范围,才能进行下一步操作。

filter()、not()方法

filter词义:过滤

not词义:否定

filter()方法

通过定义一个标准(必要条件),符合标准的被返回,不符合标准的会从结果中被删除。

$(document).ready(function(){
 $("p").filter(":odd"); //奇数p。使用了filter方法的odd参数,odd是奇数(even是偶数)。 
});

$(document).ready(function(){
 $('div').filter(":even"); //偶数的div。
});

not()方法

还是要通过定义一个标准,只返回不符合标准的,符合标准的被删除。

实例就不写了。

first()、last()方法

顾名思义,first是第一,last是最末

$(document).ready(function(){
 $("div p").first(); //返回第一个div的第一个p
});
$(document).ready(function(){
 $("p a").last(); //last方法同理,最后一个p的最后一个a,这个就不要结合图例,因为图例里最后一个p里没有最后一个a,思维导图懒得重做了
});

 

嘤嘤嘤嘤嘤呜呜呜呜呜叭叭叭叭叭嘿嘿嘿嘿嘿哟哟哟哟哟 (4 次评分, 平均分: 4.75 out of 5)
Loading...
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:jquery学习第二章,遍历、过滤器 | 温柔的夜
分类:javascript语言 标签:,

发表评论


表情

  1. sjar
    sjar 【见习观察员】 @回复

    返回a标签的所有上级元素里面,对象写哪去了