JQuery选择器总结

jQuery
选择器的分类
1）基本选择器(5)

  

2）层次选择器(4)

 

3）属性选择器(7)

 

4）过滤选择器

 

5）表单选择器

 

基本选择器：

   1）#id 这就是id选择器，举例：

     $(“#aa”)   它将会返回id值为aa的第一个元素的jQuery对象

   2）element 这就是元素选择器，举例：

     $(‘button’) 它就会返回文档中所有的button元素的jquery对象

   3）.class  这就是类选择器，举例：

     $(‘.cc’) 它将会返回所有的class属性值为cc的元素的jQuery对象

   4）*  这就是通配选择器，举例：

     $(‘*’)  它将会返回文档中的所有的元素

   5）selector1,selector2,selectro3,...selectrorN这就是群组选择器，举例：

     $(‘#aa,.cc’)  它将会返回id值为aa的第一元素，并且会返回class属性值为cc的所有 

元素

 

 

层次选择器：

<form>

     <label>Name:</label>

     <input name=”name”/>

     <fieldset>

            <label>NewSletter:</label>

           <input name=”newsletter”/>

     </fieldset>

</from>

<input name=”none”/>

     1）ancestor descendant 后代(子，孙等）选择器，例如：

          $(‘.sports .football’) 它将会返回class为sports的元素后代中所有的class  

     为football的元素

          $(“form input”)

          结果：

              [ <input name=”name”/>,<input name=”newsletter” /> ]

         

       2）parent > child  子选择器，例如：

           $(‘.sports>li’) 它将会返回class为sports的子元素中所有的li元素

           $(“form > input”)

           结果：

               [ <input name=”name” /> ]

        

    3）prev + next  紧接下一个元素，例如：

           $(‘.sports + li’) 它将会返回class为sports的紧接着的第一个li元素

           $(“label + input”)

           结果：

               [ <input name = “name”/>,<input name = “newsletter”/> ]

4）prev ~ siblings  同胞选择器-选择以后的所有兄弟元素，例如：

      $(‘.sports ~ li’) 它将返回class为sports的兄弟元素中的li元素

      $(“from ~ input”)

      结果：

          [<input name = “none” />]

属性选择器：（必须用[]括起来）

·         

1）[attribute] 选取包含某个属性的元素，例如：

              $(‘[type]’)  它将返回包含属性type的所有元素

2）[attribute=value] 选取属性值为特定值的元素，例如：

              $(‘[type = ”ccc”]’) 它将返回属性type的值为ccc的所有元素

3）[attribute!=value]  选取属性值不为特定值的元素，例如：

              $(‘[type != ”aaa”]’) 它将返回属性type的值不为aaa的所有元素

4）[attribute^=value]  选取属性值以某个值开头的元素，例如

               $(‘[type ^= “cc”]’) 它将返回属性type的值以cc开头的所有元素

5）[attribute$=value] 选取属性值以某个值结尾的元素，例如：

               $(‘[type$=”ee”]’) 它将返回属性type的值以ee结尾的所有元素

6）[attribute*=value] 选取属性值包含某个值的元素，例如：

               $(‘[type*=”o”]’)   它将返回属性type的值中包含o的所有元素

7）[attrSel1][attrSel2][attrSelN]  选取同时符合多个条件的元素，例如

               $(‘[class][type^=”c”]’) 它将返回有class属性，并且type属性值以 

               c开头

过滤选择器(4)：

1）基本过滤选择器（11）

（1）:first  选取第一个元素，例如：

            $(‘tr:first’)  返回第一个tr元素

（2）:last  选取最后一个元素，例如：

            $(‘tr:last’)   返回最后一个tr元素

（3）:not(selector)   去除与给定选择器匹配的元素，例如：

            $(‘tr:not(“.new”)’)   首先选择所有的tr元素，然后去除其中包含class  

            值为new的tr元素

（4）:even  选取索引值为偶数的元素，例如：

             $(‘tr:even’)  返回索引值为偶数的所有tr元素

（5）:odd   选取索引值为奇数的元素，例如：

             $(‘tr:odd’)  返回索引值为奇数的所有tr元素

（6）:eq(index)  选取索引值为特定值的元素，例如：

             $(‘tr:eq(0)’)   返回索引值为0的tr元素，实际上与$(‘tr:first’)效果一样

（7）:gt(index)  选取索引值大于某个特定值的元素，例如：

             $(‘tr:gt(1)’)  返回索引值大于1的所有tr元素  

（8）:lt(index)   选取索引值小于某个特定值的所有元素，例如：

              $(‘tr:lt(1)’)   返回索引值小于1的所有的tr元素

（9）:header  选择<h1>~<h6>标签，例如：

              $(‘:header’)   返回文档中<h1>~<h6>所有元素

（10）:animated  选取执行的动画元素

（11）:focus1.6+
（有个1.6+  表示jquery1.6以上的版本才支持） 选取当前获得焦点 

               的元素的

2）内容过滤选择器（4）

·         

·         

（1）:contains(text)  选取包含某个特定文本的元素，例如：

                      $(‘td:contains(“日本”)’)  返回文本中包含“日本”的td元素

（2）:empty          选取不包含任何子元素或者文本的空元素，例如：

                      $(‘:empty’)  返回空元素

（3）:has(selector)   选取包含选择器所匹配的元素的元素，例如：

                      $(‘tr:has(“th”)’)  返回包含th元素的tr元素

（4）:parent    选取包含子元素或者文本的元素，例如：

                $(‘:parent’)  返回非空元素

 

3）可见性过滤选择器（2）

（1）:hidden  选取隐藏的元素，例如：

              $(‘tr:hidden’)  返回隐藏的tr元素

（2）:visible  选取显示的元素，例如：

              $(‘tr：visible’)  返回显示的tr元素

 

4）子元素过滤选择器（4）

  /**

nth ..

 英 [enθ]  美 [ɛnθ] 跟读 口语练习
    adj.
第n个的；n倍的；最近的

 

*/

（1）:nth-child  选取特定位置的子元素，例如：

                 $(‘tr:nth-child(1)’)   返回第一个子元素

                 注意：nth-child是jQuery中唯一一个从1开始计数的选择器

（2）:first-child  选取每个父元素中的第一个子元素，例如：

                 $(‘table tr:first-child’)  返回每个table的第一个tr

（3）:last-child  选取每个父元素的最后一个子元素，例如：

                 $(‘table tr:last-child’)   返回每个table的最后一个tr

（4）:only-child 
如果元素是其父元素的唯一子元素，该元素将被返回，例如

                 $(‘tr td:only-child’)  返回具有唯一子元素的td

表单选择器(2)：

1）表单元素选择器

·         

（1）:input 选取input textarea select和button元素

（2）:text  选取所有的单行文本框<input type=”text”>

（3）:password 选取所有的密码框<input type=”password”>

（4）:image 选取所有的图像域

（5）:file 选取所有的文件域

（6）:hidden  选取所有的隐藏域

 

（7）:radio  选取所有的单选按钮

（8）:checkbox 选取所有的复选框

（9）:submit 选取所有的提交按钮

 

（10）:reset 选取所有的重置按钮

（11）:button 选取所有的按钮

 

2）表单属性选择器

（1）:enabled  选取所有的可用元素

（2）:disabled 选取所有的不可用元素

               <input type=”text” disabled=”disabled”/>

（3）:checked 选取所有的处于选中状态的单选框和复选框

（4）:selected
选取所有的处于选中状态的option元素

 

Eg：

   过滤选择器和表单选择器前面都是：