jQuery学习笔记5 - jQuery过滤、查找方法

发表于   |   分类于   |     |   阅读次数

jQuery过滤方法

除了选择器之外，jQuery还为我们提供了以“方法”（类似于函数方法）形式存在的2种方式：（1）过滤方法；（2）查找方法。

过滤和查找这2类方法与之前所学到的“选择器”是相互补充的关系。过滤和查找补充了很多使用选择器无法进行的操作，例如选取某一个元素的父元素、获取当前点击位置下的子元素、判断当前元素是否处于动画状态等等。这些都是很常见的操作。

在jQuery中，常见的过滤方法如下：

方法 说明
hasClass() 判断所选元素是否含有某个类，返回值为true或false
eq(n) 选择元素集合中指定下标元素，下标从0开始（选择器作用）
is() 判断所选元素是否有符合某个条件的元素，返回值为true或false
not() 选择元素集合中不符合条件的元素（选择器作用）
filter() 使用“自定义表达式”来选择符合条件的元素（功能多）
has() 使用“自定义表达式”来选择符合条件的元素（功能少）

类过滤hasClass()

类过滤，就是根据元素的类名进行过滤操作。在jQuery中，我们可以使用hasClass()方法实现。

1
2
3
4
5
6
7
8
9
10
11
$().hasClass("类名")
<!-- hasClass()方法往往用于执行判断操作，判断当前jQuery对象中的某个元素是否包含了指定类名。如果包含，则返回true；如果不包含，则返回false。 -->

//案例
$(function () {
            $("ul li").click(function () {
                if($(this).hasClass("red")){
                    $(this).css("color","red");
                }
            })
        })

下标过滤eq()

下标过滤，就是使用过滤方法来选取“元素集合”中指定下标位置的某一个元素。在jQuery中，我们使用eq()方法来实现下标过滤。

1
2
3
4
5
6
7
8
9
$().eq(n)
<!-- n是一个正整数，从0开始计算，表示用来选取“元素集合”中下标为n的的某一个元素。这个有点类似于JavaScript中的数组下标。 -->

//案例
$(function () {
            $("li").eq(4).click(function () {
                $(this).css("color", "yellow");
            })
        })

判断过滤is()

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$().is(expression)
/*
参数expression是一个jQuery选择器表达式。

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

is()方法跟hasClass()方法类似，也是用来做判断，并不能直接过滤元素。实际上，filter()方法内部也是在调用这个函数。所以，filter()方法原有的规则在这里也适用。
*/
//案例
//判断元素是否隐藏
$().is(":visible")
//判断元素是否处在动画中（非常重要）
$().is(":animated")
//判断复选框是否被选中
$("input[type=checkbox]").is(":checked")
//判断是否第1个子元素
$(this).is(":first-child")
//判断文本中是否包含helicopter这个词
$().is(":contains('helicopter')")
//判断是否包含某些类名
$().is(".red,.blue")

反向过滤not()

使用not()方法来过滤jQuery对象中“不符合条件”的元素，并且返回剩下的元素。

1
2
3
4
5
6
7
8
9
10
11
12
$().not(expression)
//参数expression是一个jQuery选择器表达式。

//案例
$(function () {
            $("ul li").not("#red").css("color", "red");
            /* 等价于代码：
            $("ul li:not(#red)").css("color", "red");
            */
        })

/* 反向过滤not()方法类似于jQuery的:not()选择器,not()方法也是对jQuery选择器的一种补充，使得我们更加方便灵活地操作元素。*/

表达式过滤filter()和has()

表达式过滤，就是根据需要使用“自定义表达式”的方式来选取符合条件的元素。这种自定义的表达式，可以是简单的选择器表达式，也可以是复杂的选择器表达式。

filter()方法

filter()方法是jQuery中功能最为强大的过滤方法。它可以使用表达式进行过滤，也可以使用函数返回值进行过滤。

  1. 表达式过滤

    1
    2
    3
    4
    5
    6
    7
    8
    filter(expression) //参数expression是一个jQuery选择器表达式

    //案例：
    $(function () {
                $("ul li").filter("#red,#yellow").click(function () {
                    $(this).css("color", "red");
                })
            })

  2. 函数过滤

    1
    2
    3
    4
    5
    6
    7
    8
    9
    filter(fn)  //fn表示函数

    //案例：
    $(function () {
                $("ul li")
                .filter(function () {return $("span", this).length == 1;})
                .css("color", "red");
            })
    //filter(function () {return $("span", this).length == 1;})表示选择在内部子元素中span长度为1的li元素。
has()方法
1
2
3
4
5
6
$().has(expression) //参数expression是一个jQuery选择器表达式。

//案例：
$(function () {
            $("ul li").has("span").css("color", "red");
        })

jQuery查找方法

在jQuery中查找方法，主要以“当前所选元素”为基点，查找它的父元素、子元素或者兄弟元素等。过滤方法和查找方法的出现，其实就是对jQuery选择器的一种补充，提供更多的方法使得我们更加方便灵活地操作元素。

过滤方法，就是对所选元素进行进一步地筛选。查找方法，主要以“当前所选元素”为基点，查找它的父元素、子元素或者兄弟元素等。过滤方法和查找方法的出现，其实就是对jQuery选择器的一种补充，提供更多的方法以便我们更加方便灵活地操作元素。

在jQuery中，常见的查找方法共有5种：
（1）查找祖先元素；
（2）查找后代元素；
（3）向前查找兄弟元素；
（4）向后查找兄弟元素；
（5）查找所有兄弟元素；

查找祖先元素

在jQuery中，为我们提供3种查找祖先元素的方法：
（1）parent()；
（2）parents()；
（3）parentsUntil()；

  1. parent()
    在jQuery中，我们可以使用parent()方法来查找当前元素的“父元素”。记住，元素只有一个父元素。

    1
    2
    3
    4
    5
    6
    7
    8
    parent(expression)
    //参数expression表示jQuery选择器表达式，用来过滤父元素。当参数省略时，则选择所有的父元素。如果参数不省略，则选择符合条件的父元素。

    //案例:
    $(function () {
                $("p").parent(".lvye").css("color", "red");
                //$("p").parent(".lvye")表示选择p元素的父元素，并且这个父元素必须含有类名lvye，不然不会被选中。
            })

  2. parents()

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    parents(expression)
    //参数expression表示jQuery选择器表达式字符串，用来过滤祖先元素。当参数省略时，则选择所有的祖先元素。如果参数不省略，则选择符合条件的祖先元素。

    //案例:
    $(function () {
                $("#btn").click(function () {
                    var parents = $("span").parents()
                                  .map(function () { return this.tagName; })
                                  .get().join(",");
                    alert("span元素的所有祖先元素为：" + parents.toLowerCase());
                });
            })

  3. parentsUntil()
    parentsUntil()方法是对parents()方法的一个补充，它可以查找指定范围的所有祖先元素，相当于在parents()方法返回集合中截取部分祖先元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .parentsUntil(selector,filter)
    /*
    selector  可选。字符串值，规定在何处停止对祖先元素进行匹配的选择器表达式。
    filter  可选。字符串值，包含用于匹配元素的选择器表达式。
    */
    .parentsUntil(element,filter)
    /*
    element 可选。DOM 节点或 jQuery 对象，指示在何处停止对祖先元素的匹配。
    filter  可选。字符串值，包含用于匹配元素的选择器表达式。
    */

    //案例：
    $("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
      .css("border", "3px solid blue");

查找后代元素

在jQuery中，提供了3种查找后代元素的方法：
（1）children()；
（2）contents()；
（3）find()；

  1. children()方法
    在jQuery中，我们可以使用children()方法来查找当前元素的“所有子元素”或“部分子元素”。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    children(expression)

    //案例：
    $(function () {
                $(".wrapper").hover(function () {
                    $(this).children(".test").css("color", "red");
                }, function () {
                    $(this).children(".test").css("color", "black");
                })
            })

  2. contents()
    contents()方法也是用来查找子内容的，但它不仅获取子元素，还可以获取文本节点、注释节点等。

    1
    2
    3
    4
    5
    6
    .contents()
    //案例：
    $(function () {
                $("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");
            })
    //找到段落中的所有文本节点，并用粗体标签包装它们。

  3. find()
    find()方法能够查找所有后代元素，而children()方法仅能够查找子元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    find(expression)

    //案例：
    $(function () {
                $(".wrapper").hover(function () {
                    $(this).find(".test").css("color", "red");
                }, function () {
                    $(this).find(".test").css("color", "black");
                })
            })
    //$(this).find(".test")表示选择当前元素下的class为test的所有“后代元素”，既包括子元素，也包括孙元素等所有后代元素。

向前查找兄弟元素

“向前查找兄弟元素”，就是找到某个元素之前的兄弟元素。在jQuery中，为我们提供了3种向前查找兄弟元素的方法：
（1）prev()；
（2）prevAll()；
（3）prevUntil()；
兄弟元素，指的是该元素在同一个父元素下的“同级”元素。

  1. prev()
    在jQuery中，我们可以使用prev()方法来查找某个元素的前一个“相邻”的兄弟元素。

    1
    2
    3
    4
    5
    6
    $().prev()

    //案例：
    $(function () {
                $("#lvye").prev().css("color", "red");
            })

  2. prevAll()
    prevAll()可以查找所选元素前面“所有”同级的兄弟元素。

    1
    2
    3
    4
    5
    6
    7
    prevAll(expression)
    //参数expression表示jQuery选择器表达式字符串，用于过滤匹配元素。当参数省略时，则表示查找所选元素的前面“所有”的兄弟元素；当参数不省略时，则查找所选元素前面“符合条件”的兄弟元素。

    //案例：
    $(function () {
                $("#lvye").prevAll().css("color", "red");
            })

  3. prevUntil()
    prevUntil()方法介于prev()方法和prevAll()方法之间.
    prevUntil()方法能够选择前面指定范围的兄弟元素。

    1
    2
    3
    4
    5
    6
    7
    8
    prevUntil(expression)
    //参数expression表示jQuery选择器表达式字符串，用于过滤匹配元素。当参数省略时，则表示查找所选元素的前面“所有”的兄弟元素；当参数不省略时，则查找所选元素前面“符合条件”的兄弟元素。

    //案例：
    $(function () {
                $("#lvye").prevUntil("#until").css("color", "red");
            })
    //$("#lvye").prevUntil("#until")表示以id为lvye的元素为基点，向前找到id为until的同级兄弟元素，然后选择“这个范围之间”的兄弟元素。

向后查找兄弟元素

“向后查找兄弟元素”，就是找到某个元素之后的兄弟元素。在jQuery中，提供了3种为我们向后查找兄弟元素的方法：
（1）next()；
（2）nextAll()；
（3）nextUntil()；

  1. next()

    1
    2
    3
    4
    5
    $().next()
    //案例：
    $(function () {
                $("#lvye").next().css("color", "red");
            })

  2. nextAll()

    1
    2
    3
    4
    5
    nextAll(expression)
    //案例：
    $(function () {
                $("#lvye").nextAll().css("color", "red");
            })

  3. nextUntil()

    1
    2
    3
    4
    5
    6
    nextUntil(expression)
    //案例：
    $(function () {
                $("#lvye").nextUntil("#until").css("color", "red");
            })
    //$("#lvye").nextUntil("#until")表示以id为lvye的元素为基点，向后找到id为until的同级兄弟元素，然后选择“这个范围之间”的兄弟元素。

查找所有兄弟元素

查找所有兄弟元素,siblings(),使用siblings()方法来查找兄弟元素，这是不分前后的.

1
2
3
4
5
6
7
8
9
10
siblings(expression)
//案例：
$(function () {
            $("#lvye").siblings().css("color", "red");
        })
//$("#lvye").siblings()表示选择id为lvye元素的所有兄弟元素，这里的兄弟元素不分前面和后面。
$(function () {
            $("#lvye").siblings(".brother").css("color", "red");
        })
//$("#lvye").siblings(".brother")表示选择id为lvye元素的所有符合条件（即class为brother）兄弟元素，这里的兄弟元素不分前面和后面。

坚持原创技术分享，您的支持将鼓励我继续创作！