jQuery——遍历&过滤

过滤：

• first

  1. 返回过滤后的首个元素
  2. 按照整个HTML元素来进行过滤，只取匹配的第一个元素

$(document).ready(function(){
  $("div p").first();
});
//选择div下的第一个p元素

• last

  1. 返回过滤后的最后一个元素

$(document).ready(function(){
  $("div p").last();
});

• eq

  1. 当筛选后仍然后很多时，使用指定元素号进行提取。
  2. 首个元素的索引时0而不是1开始

$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});

• filter

  1. 根据条件进行筛选，删除不匹配的，只留匹配的。
  2. 如果下级标签也匹配，将一同返回

$(document).ready(function(){
  $("p").filter(".intro").css("background-color","yellow");
});

//只留p标签下的class为intro的元素。

• not

  1. 返回不匹配标准的所有元素
  2.  和filter相反

$(document).ready(function(){
  $("p").not(".intro");
});

遍历：

• 根据A元素对于其他元素的关系来查找B元素。

向上遍历

• parent（上一级）

1. 1. 返回被选元素的直接父元素
   2. 只会向上一级对DOM树进行遍历

$(document).ready(function(){
  $("span").parent();
});

• parents（上多级）

1. 1. 如果不选过滤条件，那么会一直向上到HTML元素为止。
   2. 写过滤后，会向上停在指定的元素中。

$(document).ready(function(){
  $("span").parents("ul");
});

• parentsUntil（向上筛选）

1. 1. 返回介于两个给定元素之间的所有向上元素

$(document).ready(function(){
  $("span").parentsUntil("div");
});
//返回介于span和div元素之间的所有向上的元素。

向下遍历

• children（向下一级）

1. 1. 不传参默认，只会向下一级进行遍历所有元素
   2. 返回向下一级的所有子元素
   3. 同时可以进行指定元素筛选

$(document).ready(function(){
  $("div").children("p.1");
});
//只提取div下一级的，p标签，并且class为1的元素

• find（最下级）
  1. 必须传参

$(document).ready(function(){
  $("div").find("span");
});
//指定提取div下的所有span标签。

$(document).ready(function(){
  $("div").find("*");
});
//提取div下的所有标签元素

 横向遍历

•  siblings（横向所有元素）
  1. 默认不加参数时，返回被选元素的所有横向元素
  2. 加参数后，提取符合参数的横向元素

$(document).ready(function(){
  $("h2").siblings("p");
});

•  next（横向下一个元素）
  1. 默认返回下一个横向元素

$(document).ready(function(){
  $("h2").next();
});

• nextAll（横向之后所有元素） 
  1. 返回指定元素后的所有横向元素

$(document).ready(function(){
  $("h2").nextAll();
});

• nextUntil（横向向下筛选）
  1. 返回两个元素之间的所有元素
  2. 不算两者

$(document).ready(function(){
  $("h2").nextUntil("h6");
});
//返回h2和h6之间的所有横向元素

• prev（横向上一个元素）

同上

• prevAll（横向上所有元素）

同上

• prevUntil（横向向上筛选）

同上