5.jQuery——过滤选择器/基本过滤选择器/属性过滤选择器/可见性过滤器/表单选择器

简介：介绍jQuery常用的过滤选择器

---

1.基本过滤选择器

1.过滤选择器简介

1. 过滤选中的元素中的第一个：$("div:first")
2. 过滤选中元素中的最后一个：$("div:last")
3. 过滤选中元素中类名不为one的元素:$("div:not(.one)")
4. 可以根据选中元素的索引的奇偶数进行过滤:$("div:even") 【偶数】$("div:odd")【奇数】
5. 可以指定选中元素的索引进行过滤:$("div:eq(3)")【索引等于3、索引是从0开始计算的】
6. 可以指定选中元素大于某个索引进行过滤：$("div:gt(3)") 【索引大于3】$("div:lt(3)")【索引小于3】
7. 可以过滤动画的元素、和当前焦点所在的元素$(":focus")【当前焦点所在元素】$(":animated")【动画元素】
8. 可以过滤标题所有元素：$(":header")

   ---

   2.具体例子如下

    
    
    
    
    
    
    


    

        基本过滤选择器.
    
    
        手动重置页面元素
    
    点击下列按钮时先自动重置页面

    

    
    
    
    
    
    
    
    
    
    
    
    

    

    
    

        id为one,class为one的div
        

            class为mini
        
    
    

        id为two,class为one,title为test的div.
        

            class为mini,title为other
        
        

            class为mini,title为test
        
    
    

        

            class为mini
        
        

            class为mini
        
        

            class为mini
        
        

        
    
    

        

            class为mini
        
        

            class为mini
        
        

            class为mini
        
        

            class为mini,title为tesst
        
    
    

        style的display为"none"的div
    
    

        class为"hide"的div
    
    

        包含input的type为"hidden"的div
    
    正在执行动画的span元素.

2.属性过滤选择器

1.属性过滤选择器

简介：jQuery：可以根据元素的属性进行过滤

1. 含有title属性的div元素：$("div[title]")
2. title属性等于test的div元素：$("div[title=test]")
3. title属性不等于test的div元素：$("div[title!=test]")（没有title属性的div也将被选中）
4. 选取title属性的值以te开始的div元素$("div[title^=te]")
5. 选取title属性的值以est结束的div元素$("div[title$=est]")
6. 选取title属性的值含有es的div元素:$("div[title*=es]")

组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素$("div[id][title*=es]")

---

2.属性过滤选择器程序代码如下

    
    
    
    
    
    
    


    
        手动重置页面元素
    
    点击下列按钮时先自动重置页面
    

        属性选择器.
    
    
    
    
    
    
    
    
    

    

    
    

        id为one,class为one的div
        

            class为mini
        
    
    

        id为two,class为one,title为test的div.
        

            class为mini,title为other
        
        

            class为mini,title为test
        
    
    

        

            class为mini
        
        

            class为mini
        
        

            class为mini
        
        

        
    
    

        

            class为mini
        
        

            class为mini
        
        

            class为mini
        
        

            class为mini,title为tesst
        
    
    

        style的display为"none"的div
    
    

        class为"hide"的div
    
    

        包含input的type为"hidden"的div
    
    正在执行动画的span元素.

3.可见性过滤器

1.可见性过滤器

1. 查找所有可见的div元素：$("div:visible")
2. 查找body内所有隐藏的元素$("body :hidden")
3. 查找div隐藏函数的个数$('div:hidden').length
4. input type='hidden'且div style='display:none;'都视为隐藏元素

2.程序例子

    
    
    
    
    
    


    

        可见性过滤选择器.
    
    
        手动重置页面元素
    

    

    
    

    
    

    

    
    

        id为one,class为one的div
        

            class为mini
        
    
    

        id为two,class为one,title为test的div.
        

            class为mini,title为other
        
        

            class为mini,title为test
        
    
    

        

            class为mini
        
        

            class为mini
        
        

            class为mini
        
        

        
    
    

        

            class为mini
        
        

            class为mini
        
        

            class为mini
        
        

            class为mini,title为tesst
        
    
    

        style的display为"none"的div
    
    

        class为"hide"的div
    
    

        包含input的type为"hidden"的div
    
    正在执行动画的span元素.

4.表单选择器和转义字符（\\）

1.表单选择器代码

 var $alltext = $("#form1 :text");
            var $allpassword = $("#form1 :password");
            var $allradio = $("#form1 :radio");
            var $allcheckbox = $("#form1 :checkbox");

            var $allsubmit = $("#form1 :submit");
            var $allimage = $("#form1 :image");
            var $allreset = $("#form1 :reset");
            var $allbutton = $("#form1 :button"); //   和 都可以匹配
            var $allfile = $("#form1 :file");
            var $allhidden = $("#form1 :hidden"); // 和
test
都可以匹配.
            var $allselect = $("#form1 select");
            var $alltextarea = $("#form1 textarea");

            var $AllInputs = $("#form1 :input");
            var $inputs = $("#form1 input");