jquery--遍历

一、遍历祖先元素

parent 方法是用来查找指定元素的父元素的

parents 方法是用来查找指定元素的所有祖先元素的。

格式:

$().parent.css();

二、遍历兄弟元素

1.前兄弟元素查找

$().prev(); // 查找指定元素前向第一个元素

$().preAll(); // 查找指定元素前向所有元素
$().preAll().css();

2.后兄弟元素查找

$().next(); // 查找指定元素的第一个后向兄弟元素

$().nextAll(); // 查找指定元素的所有后向兄弟元素
$().nextAll().css()

3.所有兄弟元素查找

$().siblings();

三、遍历后代元素

children 方法和 find 方法都是用来查找元素的子元素的，区别是 children 只能获取元素的儿子节点，而 find 方法可以获取元素的所有符合条件的后代节点。

1.children方法

jQuery对象.children();

   $(this).children("#title").css("font-size", "25px");
   $(this).children().css("text-align", "center");

2.find方法

jQuery对象.find(selector);

四、过滤元素

1.类名过滤

在 jQuery 中使用 hasClass 方法可以用来判断指定元素是否包含该类名的元素。返回值boolean

$().hasClass("类名");

2.下标过滤

在 jQuery 中使用 eq 方法可以实现下标过滤。n为元素的下标值

$().eq(n);

    $(function () {
        $("body").click(function () {
          // 列表中下标值为 0-2 的元素会改变字体颜色
          var $li = $("li");
          for (var i = 0; i < 3; i++) {
            $li.eq(i).css("color", "#77acf1");
          }
        });
      });

3.判断过滤

在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。返回boolean值。

$().is(selector);

     var value = $("div").is(":animated");
          if (value) {
            $("p").text("元素处于动画状态");
          } else {
            $("p").text("元素不处于动画状态");
          }

判断是否处于动画效果

4.反向过滤

jQuery 中使用 not 方法可以选择不符合条件的元素。

$().not(selector|function)

它的参数有两种，当为选择器时，我们会通过选择器来过滤不符合条件的元素；当为函数时，我们会通过函数来过滤不符合条件的元素。

      $(this).not(".div2").css("background", "#ffc478");

除div2的类；

猜你喜欢