学习日记（11）—jQuery过滤方法

为了快速操作元素，除了选择器之外，jQuery提供了以“方法”形式存在的两种方式：过滤方法和查找方法。
过滤方法和查找方法跟选择器之间是互补关系，它们补充了很多使用选择器无法进行的操作，例如选取当前元素的父元素、获取当前元素的子元素、判断当前元素是否处于动画状态等。

类名过滤：*hasClass()`

类名过滤，指的是根据元素的class来过滤。

$().hasClass(“类名”)

hasClass()方法一般用于判断元素是否包含指定的类名：如果包含，则返回true；如果不包含，则返回false。

 $("li").each(function(){
                var bool = $(this).hasClass("select");
                if(bool){
                    $(this).css("color", "red");
                }
            })

一般用于判断是否含有类名。

下标过滤：eq()

$().eq(n)

n从0开始，⚠️ 当取值为负整数时，eq(-1)获取的是倒数第1个元素，eq(-2)获取的是倒数第2个元素，……，以此类推。
实际上，eq()方法跟:eq()选择器是非常相似的。

$("li").eq(3).css("color", "red");
$("li:eq(3)").css("color", "red");

判断过滤：is()

根据某些条件进行判断，然后选取符合条件的元素。在jQuery中，使用is()方法来实现判断过滤。

$().is(selector)

is()方法用于判断当前选择的元素集合中，是否存在符合条件的元素。如果存在，则返回true；如果不存在，则返回false。

var bool = $(this).is(":checked");
                if(bool){
                    $(".fruit").prop("checked","true");
                }else{
                    $(".fruit").removeProp("checked");
                }

用于判断当前复选框是否被选中。当复选框被选中时，下面所有复选框就会被全部选中。然后再次点击按钮，此时下面所有复选框又会被取消选中。

$("li").each(function () {
                var bool = $(this).is(".select");
                if (bool) {
                    $(this).css("color", "red");
                }
            })//查找是否存在类名

实际上，想要判断元素是否存在某个类名，我们有两种方法：一种是hasClass()；另外一种是is()。在实际开发中，建议优先使用hasClass()，主要是从查找速度来看，hasClass()方法远远优于is()方法。原因很简单，is()方法封装的东西比hasClass()方法的多得多，运行速度肯定也慢得多。

反向过滤：not()

hasClass()、is()等方法都是过滤“符合条件”的元素。在jQuery中，我们还可以使用not()方法来过滤“不符合条件”的元素，并且返回余下符合条件的元素。
not()方法可以使用选择器过滤，也可以使用函数过滤。

$().not(selector或fn)

当参数是一个选择器时，表示使用选择器来过滤不符合条件的元素，然后选取余下元素。

<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="select">jQuery</li>
<li>Vue.js</li>
$("li").not(".select").css("color", "red");//除jQuery 外其他元素都改变样式

实际上not()方法与:not选择器相似，这个跟eq()方法与:eq()选择器相似是一样的道理。
下面两行代码是等价的：

$("li").not(".select").css("color", "red");
$("li:not(.select)"). css("color", "red");

当参数是一个函数时，表示使用函数来过滤不符合条件的元素，然后选取余下元素。

 $("li").not(function(){return $(this).text() == "jQuery";}).css("color", "red");

相当于返回值作为参数

表达式过滤：filter()、has()

表达式过滤，指的是使用“自定义表达式”的方式来选取符合条件的元素。这种自定义表达式可以是选择器，也可以是函数。
jQuery中，表达式过滤共有两个方法：一个是**filter()**；另外一个是has()。

filter()

jQuery中，filter()是功能最强大的过滤方法，它可以使用选择器过滤，也可以使用函数过滤。
选择器过滤：

$().filter(selector)
$("li").filter(".select").css("color", "red");

函数过滤：

$().filter(fn)
$("li").filter(function(){return $(this).text() == "jQuery";})

filter()非常强大，几乎把之前学过的过滤方法的功能都包含进去了。不过正是由于filter()内部封装的东西过多，导致运行速度非常慢。因此在实际开发中，优先考虑其他过滤方法。

has()

$().has(selector)

表达式过滤还可以使用has()方法。has()方法虽然没有filter()方法那么强大，但是它的运行速度比较快。
has()方法只有选择器过滤，没有函数过滤。
has()方法类似于:has()选择器