提示

要深刻理解遍历，必须要有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，思维导图懒得重做了
});