• jquery 筛选元素 (3)


    .addBack()
      添加堆栈中元素集合到当前集合中,一个选择性的过滤选择器。
      .addBack([selector])
        selector
        一个字符串,其中包括一个选择器表达式,匹配当前元素集合,不包括在内的元素。

        <ul>
          <li>list item 1</li>
          <li>list item 2</li>
          <li class="third-item">list item 3</li>
          <li>list item 4</li>
          <li>list item 5</li>
        </ul>
        $("li.third-item").nextAll().addBack().css("background-color",'red')

            3 , 4 ,5 项的背景变成红色。
    .children()
      获得匹配元素集合中每一个元素的子元素,选择器选择性筛选。
      .children([selector])
        selector 一个用于匹配元素的选择器字符串。
          $("ul .le-2").children().css("background-color","red")
            //找到ul 下 类名为 .le-2 类名下的所有的子元素,将其背景颜色改成红色。
    .closest()
      从元素本身开始,在DOM 树上逐级向上级元素匹配。
      .closest(selector)
        selector 一个用于匹配元素的选择器字符串。
      .closest( selector [, context ] )
        selector 一个用于匹配元素的选择器字符串。
        context 查找的匹配元素可以在这个DOM 元素内。
      .closest(jquery object)
        object 一个用于匹配元素的对象。
      .closest(element)
        element 一个用于匹配元素的DOM元素。

        $('li.item-a').closest('li').css('background-color', 'red'); 
          //从 li.item-a 开始向上级查找li 将其背景变成红色。
        $(document).bind("click",function(e){ 
          $(e.target).closest("li").toggleClass("hilight");
            //显示什么样 的事件委托用 closeest 完成。
        });

    .find()
      通过一个选择器,jquery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代。
      .find(selector)
        selector 一个用于匹配元素的选择器字符串。
          ('li.item-ii').find('li').css('background-color','red');
          // 含有 item-ii选择器的 li 里面过滤 li 将其背景变成红色。
      .find(element)
        element 一个元素或一个jQury对象用来匹配元素
        var item1 = $('li.item-1')[0];
          $('li.item-ii').find( item1 ).css('background-color', 'red');
        // 含有 item-ii选择器的 li 里面过滤 item1 将其背景变成红色。
    .next()
      获得匹配元素集合中每个元素紧邻的后面的同辈元素的集合。
      .next([selector])
        selector 一个字符串,其中包括一个选择器表达式匹配元素。
          $('li.third-item').next().css('background-color','red');
          // 获得li 中含有 .third-item 选择器的元素的,下一个元素背景变成红色。
        $("p").next(".selected").css("background-color","yellow");
            //获取p 元素中 下一个带有.selected 选择器的元素,背景变成黄色。
    .nextAll()
      获取每个匹配元素集合中所有下面的同辈元素,选择性筛选的选择器。
      .nextAll([selector])
        selector 一个字符串,其中包括一个选择器表达式匹配元素。
      $('li.third-item').nextAll().css('background-color','red');
          // 获得li 中含有 .third-item 选择器的元素的,下所有元素背景变成红色。
    .nextUntil()
      通过选择器,或DOM 节点,或对象 得到每个元素之后所有的兄弟元素,但不包括匹配的元素。
      .nextUntil([selector][,filter])
        selector 一个字符串,其中包括一个匹配元素选择器表达式。
         filter 一个字符串,其中包含一个选择器表达式用来匹配的元素。
      .nextUntil([element][,filter])
        element 一个用于匹配元素的DOM元素。
        filter 一个字符串,其中包含一个选择器表达式用来匹配的元素。
        $("#term-2").nextUntil("dt").css("background-color","red")
          // 获取#term-2 下面所的 元素 为dt 的元素,将背景变成红色。
    .parent()
      取得匹配元素集合中,每一个元素的父元素,可以提供一个可选的选择器。
      .parent([selector])
        selector 一个字符串,其中包含一个选择器表达式用来匹配的元素。
      $("li.item-a").parent().css('background-color', 'red');
        // 获得li 中含有 .item-a 选择器的元素的父元素,将背景变成红色。
      $("p").parent(".selected").css("background", "yellow");
       //获取p 元素中 下一个带有.selected 选择器的元素 父元素,背景变成黄色。
    .parents()
      获取集合中每一个匹配元素的祖先元素,可以提供一个可选的选择器作为参数。
      .parents([selector])
        selector 一个字符串,其中包含一个选择器表达式用来匹配的元素。
        $('li.item-a').parents().css('background-color', 'red');
          // 获得li 中含有 .item-a 选择器的元素的所有祖先元素。
        $("span.selected").parents("div").css("border", "2px red solid")
          //获取到span 元素含有 .selected 的元素的所有祖先元素的div
    .parentsUntil()
       查找当前元素的所有的前辈元素,直到遇到选择器,DOM 对象 匹配的元素为止。
      .parentsUntil([selector][,filter])
        selector 选择器字符串,用于匹配到哪个祖先元素时停止匹配。
        filter 一个字符串,用于匹配元素的选择器表达式字符串。
      .parentsUntil([element][,filter])
        element DOM节点 或对象 用于确定到哪个前辈元素时候停止匹配。
        filter 一个字符串,用于匹配元素的选择器表达式字符串。

        $("li.item-a").parentsUntil(".level-1").css("background-color", "red");

    .prev()
      取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的集合。选择性筛选的选择器。
      .prev([selector])
        selector 一个用于匹配元素的选择器字符串。

           $('li.third-item').prev().css('background-color', 'red');
            // 获得li 中含有 .third-item 选择器的元素的,上一个元素背景变成红色。

    .prevAll()
       获取集合中每一个匹配元素的所有前面的兄弟元素。
        .prevAll([selector])
        一个字符串,其中包含一个选择器表达式匹配元素。

        $('li.third-item').prevAll().css('background-color', 'red');

    .prevUntil()
      .prevUntil( [selector ] [, filter ] )
       selector
      选择器字符串,用于确定到哪个排在前面的同辈元素时停止匹配
      filter
        一个字符串,其中包含一个选择器表达式用来匹配的元素。

        $("#term-2").prevUntil("dt").css("background-color", "red");


    .siblings()
      获得匹配元素集合中每一个元素的兄弟元素,可以提供一个可选的选择器。
      .siblings([selector])
        selector 一个用于匹配元素的选择器字符串。

          $('#term-2').siblings().css("background-color", "red");
          $("p").siblings(".selected").css("background", "yellow");
  • 相关阅读:
    单元测试之Stub和Mock
    【爆牙齿】说说我期待中的苹果那块板子。
    【爆牙游记】黄山归来不看岳-翻山。
    【爆牙齿】微软的坟墓:Windows 7。(四)
    【爆牙齿】微软的坟墓:Windows 7。(二)
    【爆牙齿】微软的坟墓:Windows 7。(三)
    【爆牙齿】微软的坟墓:Windows 7。(一)
    【爆牙齿】微软的坟墓:Windows 7。(五)
    【爆牙游记】黄山归来不看岳-日出。
    过年照片集。
  • 原文地址:https://www.cnblogs.com/nmxs/p/4917711.html
Copyright © 2020-2023  润新知