jQuery函数操作汇总~过滤与查找

除了选择器之外,jQuery还为我们提供了以“方法”(类似于函数方法,更加语义化)形式存在的2种方式:(1)过滤方法;(2)查找方法。

过滤方法部分

jQuery过滤方法:
方法                          说明
hasClass()  判断所选元素是否含有某个类,返回值为true或false
eq(n)       选择元素集合中指定下标元素,下标从0开始(选择器作用)
is()        判断所选元素是否有符合某个条件的元素,返回值为true或false
not()       选择元素集合中不符合条件的元素(选择器作用)
filter()    使用“自定义表达式”来选择符合条件的元素(功能多)
has()       使用“自定义表达式”来选择符合条件的元素(功能少)
/*************************************************/
(1)hasClass()--类过滤
    {
        类过滤,就是根据元素的类名进行过滤操作。在jQuery中,我们可以使用hasClass()方法实现。
        //
        $().hasClass("类名")
        //hasClass()方法往往用于执行判断操作,判断当前jQuery对象中的某个元素是否包含了指定类名。如果包含,则返回true;如果不包含,则返回false。
        //例:
        $("ul li").click(function () {
            if($(this).hasClass("red")){
                $(this).css("color","red");
            }
        })
        //hasClass()方法往往都是用来实现判断操作的,而不是用来过滤。
        //相当于if条件句
    }
(2)eq()--下标过滤
    {
        使用过滤方法来选取“元素集合”中指定下标位置的某一个元素。
        //注意是**元素集合**
        //
        $().eq(n)
        //n是一个正整数,从0开始计算,表示用来选取“元素集合”中下标为n的的某一个元素//相当于数组下标
        //例:
        $("li").eq(4).click(function () {
            $(this).css("color", "yellow");
        })
        等价于
        $("li:eq(4)").click(function(){
            $(this).css("color","yellow");
        })
    }
(3)is()--判断过滤
    {
        根据某些条件进行判断来选取符合条件的元素。
        //
        $().is(expression)
        //expression是一个jQuery选择器
        //is()方法用于判断当前选择的元素集合中,是否含有符合条件的元素。如果含有,则返回true;如果不含有,则返回false。
        //is()也相当于if条件句
        is()的常用方法:
            {
                //判断元素是否隐藏
                $().is(":visible")
                //判断元素是否处在动画中(非常重要)
                $().is(":animated")
                //判断复选框是否被选中
                $("input[type=checkbox]").is(":checked")
                //判断是否第1个子元素
                $(this).is(":first-child")
                //判断文本中是否包含helicopter这个词
                $().is(":contains('helicopter')")
                //判断是否包含某些类名
                $().is(".red,.blue")
            }
    }

//is()方法也可以判断所选元素是否存在某个类名,这一点跟hasClass()方法相同。对于判断所选元素是否存在类名,我们可以使用2种方法:(1)hasClass()和(2)is()。那究竟用哪一个好呢?有个大牛做过实验,从查找速度(性能)来看,hasClass()方法远优于is()方法。毕竟hasClass()这个方法封装的东西很少,而is()方法封装的东西过多,运行速度肯定比较慢。

(4)反向过滤not()
        {
            使用not()方法来过滤jQuery对象中“不符合条件”的元素,并且返回剩下的元素
            //像hasClass(),is(),eq()等都是正向过滤,选到了啥就是啥,而not()是选中不是这个条件的剩下的标签
            //
            $("ul li").not("#red").css("color", "red");
            //注意:区分选择器与方法
                {
                    方法是在$()后面的‘.’运算符后面
                    选择器是$("")括号里面的内容
                }
                //所以上面的not()方法,可以用:not()选择器来选择
                $("ul li:not(#red)").css("color","red");
                **注意:以上的:not()里面的选择是不带双引号的
        }

//个人理解:在jQuery选择器中$()这个里面是带双引号的,表示里面是选择器,但是在选择器内部是不带双引号的
//即,在$("#id")中,真正的选择器是#id,而起外面的双引号,只不过是声明里面是一个选择器的标志而已

(5)表达式过滤
    {
        1>filter()
            {
                filter()方法是jQuery中功能最为强大的过滤方法。它可以使用表达式进行过滤,也可以使用函数返回值进行过滤。
                //下面是表达式过滤方法
                $(selector).filter(expression)
                //expression是一个jQuery选择器表达式
                //例:
                $("ul li").filter("#red,#yellow").click(function () {
                        $(this).css("color", "red");
                    })
                //filter()方法是一个正向过滤方法,与not()不同
            }
        2>has()
            {
                $().has(expression)
                //expression是一个jQuery选择器表达式
                //has()方法用于选取符合条件的元素
                //是一个正向过滤的方法
                //
                $("ul li").has("span").css("color", "red");
            }
    }
(6)函数过滤
    {
        filter()方法除了表达式过滤之外,还有一种函数过滤的方式。
        $().filter(fn)
        //例:
         $("ul li").filter(function () {
             return $("span",this).length == 1;
         }).css("color", "red");
         //注意里面的选择器部分$("span",this)是带一个this,表示的是this下的span标签
         $('span',this)相当于$(this).find($('span'))
    }

//对于filter()方法,这个方法因为几乎涵盖了所有过滤方法,所以运行速率过慢,能不用就不用
//$("#id",this)<==>$(this).find($("#id"))

查找方法部分:
//查找方法,主要以“当前所选元素”为基点,查找它的父元素、子元素或者兄弟元素等

常见的查找方法共有5种:

(1)查找祖先元素;
(2)查找后代元素;
(3)向前查找兄弟元素;
(4)向后查找兄弟元素;
(5)查找所有兄弟元素;
/****************************************/
(1)查找祖先元素(所谓祖先元素,就是当前节点的父节点及以上的节点)
        {
            (1)parent();
            (2)parents();
            (3)parentsUntil();
            /********************************/
            (1)parent()
                {
                    使用parent()方法来查找当前元素的“父元素”
                    //父元素只有一个,就像父亲只有一个
                    //
                    $().parent(expression)
                    //expression表示jQuery选择器表达式,用来过滤父元素。
                    //当参数省略时,则选择所有的父元素。如果参数不省略,则选择符合条件的父元素。
                    //这里可能有一个理解误区,,上面说当参数省略时选择所有父元素,但是对于某一个特定的元素来说,其父元素只有一个,那么为什么会有所有父元素呢?
                    //因为:选择器可能选中某一个独一无二的标签,也可能选中某一类标签,如果选中某一类标签,这样的话,那么父元素就有很多了,但是对应于某一个元素来说,父元素还是只有一个
                }
            (2)parents()
                {
                    查找的祖先元素是所有的祖先元素。包括父元素及以上的元素
                    $().parents(expression)
                    //expression表示jQuery选择器表达式字符串,用来过滤祖先元素。当参数省略时,则选择所有的祖先元素。如果参数不省略,则选择符合条件的祖先元素。
                    //这里expression参数省略与否,参照上面parent()方法
                    //例:
                     $("span").parents()
                              .map(function () { return this.tagName; })
                              .get().join(",");
                        //map()方法与get()方法
                            {
                                map() 属于jQuery中的遍历方法,把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
                                所以在map()方法之前的选择器是选择了一类元素的
                                $().map(function(){
                                        //代码,对每一个遍历的元素,进行的操作
                                        //返回标签名字:return this.tagName
                                        //返回class名字:return this.className
                                        //返回id名字:return this.id
                                    })
                                在使用.map()方法后,要使用.get()方法
                                 get() 来处理map()返回的对象以得到基础的数组,即从对象变成了一个基本的数组
                                 join()方法:join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔符方法join(“#”);其中#可以是任意 ,默认‘,’    
                            }
                }
            (3)parentsUntil()
                {
                    parentsUntil()方法是对parents()方法的一个补充,它可以查找指定范围的所有祖先元素,相当于在parents()方法返回集合中截取部分祖先元素。
                    结构一:
                    $("li .item-a").parentsUntil(".level-1")
                          .css("background-color", "red");
                    //选择直到".level-1"这个父节点的,但是不包括".level-1"这个节点,包括在其下面的父节点
                    结构二:
                    $("li .item-2").parentsUntil( $("ul .level-1"), ".yes" ).css("border", "3px solid blue");
                    //这里的parentsUntil()带有两个参数,第一个参数是一个选择器,用来选择某一范围内的元素,第二个是一个filter()正向过滤方法,
                    //意思是,选择在$("ul .level-1")下的父节点但不进行操作,对$("ul .level-1")下的".yes"这个节点进行操作
                }

        }
(2)查找后代元素(所谓后代元素,就是某一个标签的子元素,及子元素以下的元素)
        {
            3种查找后代元素的方法:

                (1)children();
                (2)contents();
                (3)find();
            /******************************/
            (1)children()
                {
                    //查找当前元素的“所有子元素”或“部分子元素”。
                    //注意,children()方法只能查找子元素,不能查找其他后代元素。(即不能查找孙元素)
                    //
                    $().children(expression)
                    //expression表示jQuery选择器表达式,用来过滤子元素。当参数省略时,则将选择所有的子元素。如果参数不省略,则表示选择符合条件的子元素。
                    //例:
                     $(this).children("#id").css("color", "red");
                }
            (2)contents()
                {
                    //contents() 方法获得匹配元素集合中每个元素的子节点,包括文本和注释节点。
                    $().contents()
                    //例:
                    $("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");
                    每个元素的子节点,包括元素节点,属性节点,文本节点,详情请参考我的另一篇博客(浅析~DOM结构中的元素节点、属性节点、文本节点)
                    //区分:
                    .children()方法,也是遍历,不过与.contents()有些区别,
                    .children()方法是遍历子元素,而.contents()是遍历子节点,详情请见我的另一篇博客(浅析~DOM结构中的元素节点、属性节点、文本节点)
                }
            (3)find()
                {
                    //区分:
                    find()方法和children()方法相似,都是用来查找所选元素的后代元素,但是find()方法能够查找所有后代元素,而children()方法仅能够查找子元素。
                    $().find(expression)
                    //expression表示jQuery选择器表达式,用来过滤子元素。当参数省略时,则将选择所有的子元素。如果参数不省略,则表示选择符合条件的子元素。
                    //例:
                     $(this).find(".test").css("color", "red");
                }
        }
(3)向前查找兄弟元素(兄弟元素,指的是该元素在同一个父元素下的“同级”元素。不包含自己本身)
        {
            (1)prev();//查找前一个相邻的元素
            (2)prevAll();//查找前面所有同级元素
            (3)prevUntil();//查找符合条件范围内的同级元素
            /************************************/
            (1)prev()
                {
                    prev()方法来查找某个元素的前一个“相邻”的兄弟元素。
                    $().prev()
                    //prev()一般情况下不需要参数
                    //例
                     $("#csdn").prev().css("color", "red");
                }
            (2)prevAll()
                {
                    prevAll()可以查找所选元素前面“所有”同级的兄弟元素。
                    //
                    $().prevAll(expression)
                    //expression表示jQuery选择器表达式字符串,用于过滤匹配元素。当参数省略时,则表示查找所选元素的前面“所有”的兄弟元素;当参数不省略时,则查找所选元素前面“符合条件”的兄弟元素。
                    // $("#csdn").prevAll().css("color", "red");
                }
            (3)prevUntil()
                {
                    prevUntil()方法能够选择前面指定范围的兄弟元素。
                    //相当于parentsUntil()函数
                    $().prevUntil(expression)
                    //expression表示jQuery选择器表达式字符串,用于过滤匹配元素。当参数省略时,则表示查找所选元素的前面“所有”的兄弟(同父)元素。不省略时,prevUntil()参数是所选元素(不包括所选元素)之前到给定参数之后(不包括给定参数)的所有元素都被选
                }
        }
(4)向后查找兄弟元素(兄弟元素,指的是该元素在同一个父元素下的“同级”元素。不包含自己本身)
        {
            (1)next();//查找后一个相邻的元素
            (2)nextAll();//查找后面所有同级元素
            (3)nextUntil();//查找符合条件范围的同级元素
            /************************************/
            (1)next()
                {
                    next()方法来查找某个元素的后一个“相邻”的兄弟元素。
                    $().next()
                    //next()一般情况下不需要参数
                    //例
                     $("#csdn").next().css("color", "red");
                }
            (2)nextAll()
                {
                    nextAll()可以查找所选元素后面“所有”同级的兄弟元素。
                    //
                    $().nextAll(expression)
                    //expression表示jQuery选择器表达式字符串,用于过滤匹配元素。当参数省略时,则表示查找所选元素的后面“所有”的兄弟元素;当参数不省略时,则查找所选元素后面“符合条件”的兄弟元素。
                    // $("#csdn").nextAll().css("color", "red");
                }
            (3)nextUntil()
                {
                    nextUntil()方法能够选择后面指定范围的兄弟元素。
                    //类似于parentsUntil()函数
                    $().nextUntil(expression)
                    //expression表示jQuery选择器表达式字符串,用于过滤匹配元素。当参数省略时,则表示查找所选元素的后面“所有”的兄弟(同父)元素。不省略时,prevUntil()参数是所选元素(不包括所选元素)之后到给定参数之前(不包括给定参数)的所有元素都被选
                }
        }
(5)查找所有兄弟元素,随意查找法(兄弟元素,指的是该元素在同一个父元素下的“同级”元素。不包含自己本身)
        {
            不分前后兄弟元素,随意查找
            $().siblings(expression)
            //expression表示jQuery选择器表达式字符串,用于过滤匹配元素。当参数省略时,则表示查找所选元素“所有”同级元素(不分前后);当参数不省略时,则查找所选元素前面“符合条件”的兄弟元素。
            //siblings()方法选择的兄弟元素,不包括元素本身
            //注意:siblings()方法,类似于prevAll()与nextAll()函数的融合,与prev()、next()、prevUntil()、nextUntil()基本上没有关系
        }

猜你喜欢

转载自blog.csdn.net/qq_42127861/article/details/82082762