jQuery学习总结02-筛选

Posted 2020-12-03 it-q

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习总结02-筛选相关的知识，希望对你有一定的参考价值。

一、筛选

1、eq(index|-index)

说明：获取当前链式操作中第N个jQuery对象，返回jQuery对象，类似的有get(index),不过get(index)返回的是DOM对象

示例：

描述：获取匹配的第二个元素

html代码：

<p> This is just a test.</p> 
<p> So is this</p>

jQuery代码：

$(‘p‘).eq(1);

结果：

[ <p> So is this</p> ]

2、first()

说明：获取第一个元素

示例：

描述：获取匹配的第一个元素

HTML代码：

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery代码：

$(‘li‘).first();

结果：

[ <li>list item 1</li> ]

3、last()

说明：获取最后个元素示例不再赘述

4、hasClass(class)

说明：检查当前元素是否含有某个特定的类,如果有则返回true，否则返回false，这其实就是is(‘.‘ + class)

示例：
描述：给包含某个类的元素进行一个动画

HTML代码：

 <div class="protected" style="height: 20px;width: 20px;background-color: #2459a2;position: relative"></div>
 <div></div>

jQuery代码：

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

5.filter(expr|obj|ele|fn)

说明：筛选出与制定表达式匹配的元素集合

示例：

描述：保留带有select类的元素

　　　保留第一个元素和带有select类的元素

　　　保留子元素中不含有ol的元素。

HTML代码：

<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>

//保留子元素中不含有ol的元素。
<p>　
     <ol>　　　
         <li>Hello</li>　
     </ol>
</p>
<p>How are you?</p>

jQuery代码：

$(‘p‘).filter(‘.selected‘);

$(‘p‘).filter(‘.selected,:first‘);

//保留子元素中不含有ol的元素。
$(‘p‘).filter(function (index) {
    console.log(index,this);
    return $(‘ol‘,this).length == 0;
});

结果：

[ <p class="selected">And Again</p> ]

[ <p>Hello</p>, <p class="selected">And Again</p> ]

//保留子元素中不含有ol的元素。
[ <p>How are you?</p> ]

6、is(expr|obj|ele|fn)

说明：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

　　　如果没有元素符合，或者表达式无效，都返回‘false‘。 ‘‘‘注意：‘‘‘在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true

示例：

描述：判断input元素的父元素是否为from元素

　　　判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色，

HTML代码：

//示例一
<form>
    <input type="checkbox" />
</form>

//示例二
<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
  <li>list item 3</li>
</ul>

jQuery代码：

$(‘input[type="checkbox"]‘).parent().is(‘form‘);

$(‘li‘).click(function () {
    var $li = $(this);
    isTwo = $li.is(function () {
        return $(‘strong‘,this).length === 2;
    });
    if(isTwo){
        $li.css(‘background-color‘,‘green‘);
    }else{
        $li.css(‘background-color‘,‘red‘);
    }
});

结果：

true
暂时无法展示

7.map(callback)

说明：待学习

8.has(expr|ele)

说明：保留包含特定后代的元素，去掉那些不含有指定后代的元素。

　　 .has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

示例：

描述：给含有ul的li加上背景色

HTML代码：

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

jQuery代码：

 $(‘li‘).has(‘ul‘).css(‘background-color‘,‘red‘);

9.not(expr|ele|fn)

说明：从匹配元素的集合中删除与指定表达式匹配的元素

示例：

描述：从p元素中删除带有 select 的ID的元素

HTML代码：

<p>Hello</p>
<p id="selected">Hello Again</p>

jQuery代码：

$("p").not( $("#selected")[0] )

结果：

[ <p>Hello</p> ]

10、slice(start, [end])

说明：选取一个匹配的子集，与原来的slice方法类似

示例：

描述：选择第一个元素p

HTML代码：

<p>Hello</p>
<p>cruel</p>
<p>World</p>

jQuery代码：

$("p").slice(0, 1).wrapInner("<b></b>");

结果：

[ <p><b>Hello</b></p> ]

11、children([expr])

说明：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

　　　可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

示例：查找每个div中的子元素

　　　在每个div中查找 .selected 的类。

HTML代码：

//示例一
<p>Hello</p>
<div>
     <span>Hello Again</span>
     <p><span>Thank you</span></p>
</div>
<p>And Again</p>

//示例二
<div><span>Hello</span>
    <p class="selected">Hello Again</p>
    <p>And Again</p>
</div>

jQuery代码：

$(‘div‘).children();
$(‘div‘).children(‘.selected‘);

结果：

[ <span>Hello Again</span>,<p><span>Thank you</span></p>]
[ <p class="selected">Hello Again</p> ]

12.find(expr|obj|ele)

说明：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

　　　所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

示例：

描述：从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。

HTML代码：

<p>
        <span>Hello</span>, how are you?
        <span>World</span>
</p>

jQuery代码：

$(‘p‘).find(‘span‘);

结果：

[ <span>Hello</span>,<span>World</span> ]

13、next([expr])

说明：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

　　　这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

示例：

描述：找到每个段落的后面紧邻的同辈元素。

HTML代码：

<p>Hello</p>
<p>Hello Again</p>
<div>
    <span>And Again</span>
</div>

jQuery代码：

$("p").next()

结果：

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

14、nextAll([expr])

说明：查找当前元素之后所有的同辈元素。　　

　　　可以用表达式过滤

示例：

描述：给第一个div之后的所有元素加个类

HTML代码：

<div></div>
<div></div>
<div></div>
<div></div>

jQuery代码：

$("div:first").nextAll().addClass("after");

结果：

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

15、nextUntil([exp|ele][,fil])

说明：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

　　　如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

　　　如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll() 效果一样。

示例：

描述：给#term-2后面直到dt前的元素加上红色背景

HTML代码：

<dl>
  <dt id="term-1" >term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt id="term-3" >term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

jQuery代码：

$(‘#term-2‘).nextUntil(‘dt‘).css(‘background-color‘, ‘red‘);

var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "green");

16、parent([expr])

说明：取得一个包含着所有匹配元素的唯一父元素的元素集合。

　　　你可以使用可选的表达式来筛选

示例：

描述：查找每个段落的父元素

HTML代码：

//示例一
<div>
    <p>Hello</p>
    <p>Hello</p>
</div>

//示例二
<div>
    <p>Hello</p>
</div>
<div class="selected">
    <p>Hello Again</p>
</div>

jQuery代码：

$("p").parent()

$("p").parent(".selected")

结果：

[ <div><p>Hello</p><p>Hello</p></div>]

[ <div class="selected"><p>Hello Again</p></div> ]

17、parents([expr])和parentsUntil([expr|element][,filter])

说明：parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合（包含根元素）。可以通过一个可选的表达式进行筛选。

　　　parentsUntil([expr|element][,filter])　　查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。

示例：

描述：找到每个span元素的所有祖先元素。

　　　查找item-a的祖先，但不包括level-1

HTML代码：

示例一
<html>
    <body>
        <div>
            <p><span>Hello</span></p>
            <span>Hello Again</span>
        </div>
    </body>
</html>                    

示例二
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

jQuery代码：

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

结果：

[p, div, body, html]

18、prev([expr])

说明：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

　　　可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

示例：

描述：找到每个段落紧邻的前一个同辈元素

HTML代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代码：

$("p").prev()

结果：

[ <div><span>Hello Again</span></div> ]

19、prevAll([expr])和prevUntil([exp|ele][,fil])

说明：这里不再赘述，意义同parent类似

20、siblings([expr])

说明：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

示例：

描述：找到每个div的所有同辈元素。

HTML代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>

jQuery代码：

$("div").siblings()

结果：

[ <p>Hello</p>, <p>And Again</p> ]

以上是关于jQuery学习总结02-筛选的主要内容，如果未能解决你的问题，请参考以下文章

jquery筛选总结

JQuery02

JQuery 总结 jQuery 筛选查找等

jquery实现多条件筛选特效代码分享

04jQuery筛选jquery对象02

jQuery学习总结02-属性