jQuery-----选择器

属性

$(‘[attribute|=value]‘)

给定属性的属性值为value或value后有连字符(-)的元素
$(‘a[hreflang|=en]‘)
value值为en                                                                                                      
en-uk                                                                                                               

$(‘[attribute*= value]‘)

给定属性的属性值包含value的元素

$("input[name*=‘man‘]")

$(‘[attribute~=value]‘)

给定属性的属性值为value或以空格为分隔符的value的元素
$("input[name~=man]")
<input name="man"/>         

<input name="milk  man"/>                

$(‘[attribute$=value]‘)

给定属性的属性值以value结尾的元素

$("input[name$=‘letter‘]")
<input name="newsletter"/>    
<input name="letter"/>                                                                                                            

$(‘[attribute^=value]‘)

给定属性的属性值以value开始的元素

$(‘[attribute=value]‘)

给定属性的属性值精确等于value的元素

$(‘[attribute!=value]‘)

没有指定属性或有指定属性但其值不等于value的元素
$("input[name!=newsletter]")
<input type="radio" value="ColdFusion"/>           
<input type="radio" name="accept" value="EvilPlans" />                                              

$(‘[attribute]’)

所有带有属性attribute属性的元素

$("[href]")
<a href=”www.baidu.com”>xx</a>          

$(“[selector1][selector2][selectorn]”)

复合属性选择器，需同时满足多个条件时使用

$(“input[id][name$=’man’]”)

基本选择器

标记选择器：

$(“lable”)

选择标记为label的元素

$(“p”)

选择<p>元素

id选择器：

$(“#idName”)

选择id等于idName的元素

$(“#demo”)

选择id=‘demo“的第一个元素

class选择器：

$(“.className”)

选择class等于className的元素

$(“.info”)

选择class=“info”的元素

*选择器：

$(“*”)

匹配所有元素：多用于结合上下文来搜索

组合选择器：

$(“select1,select2,select3,……”)

$("div,span,p.myClass")

层次选择器

$(“ancestor  descendant”)

给定祖先(ancestor)的所有后代(descendant)元素

$(“form input”)

匹配<form>下的所有<input>

$(parent > child)

给定父级(parent)的给定子级(child)（直系）元素

$(“form > input”)

<form>

    <label>Name:</label>

    <input name="name1" />                                            

    <fieldset>

        <label>Newsletter:</label>

        <input name="newsletter" />

     </fieldset>

     <input name="name2" />                                           

</form>

<input name="none" />

$(prev + next)

在相同父级内，选择prev紧挨着的下一元素

$("label + input")

<form>

    <label>Name:</label>

        <input name="name" />                                        

    <fieldset>

        <label>Newsletter:</label>

        <input name="newsletter" />                                

    </fieldset>

</form>

<input name="none" />

$(prev ~ siblings)

在相同父级内，选择prev后的所有兄弟元素

$("form ~ input")

<form>

    <label>Name:</label>

    <input name="name" />

    <fieldset>

        <label>Newsletter:</label>

        <input name="newsletter" />

    </fieldset>

</form>

<input name="none" />       

过滤选择器

$(“:first”)

获取第一个元素

$(“li:first”)

<ul>

    <li>list item 1</li>                                                                                                                        

    <li>list item 2</li>

</ul>

$(“:last”)

获取最后一个元素

$(“li:last”)

$(“:not”)

去除所有与给定选择器匹配的元素

$(“input:not(:checked)”)

<input name="apple" />                                                                                                                    

<input name="flower" checked="checked" />

$(“:even”)

匹配所有索引值(从0开始)为偶数的元素

$(“tr:even”)

<table>

    <tr><td>Header 1</td></tr>                                                                                                    

    <tr><td>Value 1</td></tr>

    <tr><td>Value 2</td></tr>                                                                                                

</table>

$(“:odd”)

匹配所有索引值为奇数的元素

$(“:eq”)

匹配一个给定索引值的元素

$(“tr:eq(1)”)

$(“:gt”)

匹配所有大于给定索引值的元素

$(“tr:gt(0)”)

$(“:lt”)

匹配所有小于给定索引值的元素

$(“tr:lt(2)”)

$(“:header”)

匹配<h1>、<h2>……<h7>标题元素

$(“:header”)

$(“:animated”)

匹配所有正在执行动画效果的元素

$("#run").click(function(){

  $("div:not(:animated)").animate({left:"+=20"},1000);

});

表单选择器

1)        表单：

$(‘:button‘)

type属性等于button的元素和所有button元素
$(":button")
<button>Button</button>                                                                                                                
<input type="button" value="InputButton"/>                                                                                 

$(‘:submit‘)

type等于submit的元素和button未定义type属性以及type属性等于submit的元素

<button>Button</button>
<button type="submit">Buttontype="submit"</button>
<input  type="submit"/>

$(‘:text‘)

type等于text的元素
<input type="text"/>

$(“:input”)

匹配所有input、textarea、select、button元素

$(“:password”)

type等于password的元素

$(“:radio”)

type等于radio的元素

$(“:checkbox”)

type等于checkbox的元素

$(“:image”)

type等于image的元素；不包括img元素

$(“:reset”)

type等于reset的元素

$(“:file”)

type等于file的元素

$(“:hidden”)

type等于hidden和display:none的元素。不包括visibility:hidden的元素

$(“:visible”)

选择没有设display:none的元素，若display:none元素用.show()动画显示出来，也不包括在:visible范围内

2)        表单对象属性：

$(“:enabled”)

匹配所有可用元素

$(“:disabled”)

匹配所有不可用元素

$(‘:checked‘)

匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
<input type=" checkbox" name="newsletter" checked="checked" value="Hourly"/>

$(“:selected”)

匹配所有选中的option元素

子元素

$(:nth-child(index/even/odd/equation))

选择相同父级下某几个元素（索引值从1开始）

‘:eq(index)‘ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的！可用:

nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

公式:nth:child(an+b)-a<=b<=a(a>0的整数)an是将元素分组，3n代表3个元素一组,5n代表5个元素一组,b>0表示选择一组元素中的正数第几元素，b<0表示选择第一组元素中的倒数第几元素。当b=0，b=a，b=-a时,是于只写an的效果是一样的。所以b是没有必须等于这三个值。an=an+a，即3n=3n+3

$("ul li:nth-child(2)")

<ul>

    <li>John</li>

    <li>Karl</li>                                                                                                                                

    <li>Brandon</li>

</ul>

<ul>

    <li>Glen</li>

    <li>Tane</li>                                                                                                                               

    <li>Ralph</li>

</ul>

$(:first-child)

匹配第一个子元素

$(:first)只匹配一个元素，但该选择器匹将为每个父元素匹配一个子元素

$("ul li:first-child")

<ul>

     <li>John</li>                                   

     <li>Karl</li>

     <li>Brandon</li>

</ul>

<ul>

     <li>Glen</li>                                

     <li>Tane</li>

     <li>Ralph</li>

</ul>

$(:last-child)

匹配最后一个子元素

$(:only-child)

匹配父元素中唯一的子元素

$(“ul li:only-child”)          

<ul>

    <li>John</li>

    <li>Karl</li>

    <li>Brandon</li>

</ul>

<ul> 

     <li>Glen</li>                                                                                                                      

</ul>

内容

$(“:contains”)

匹配包含给定文本的元素

$(“div:contains(‘John’)”)      

<div>John Resig</div>                   

<div>George Martin</div>

<div>Malcom John Sinclair</div>                

<div>J. Ohn

$(“:empty”)

匹配所有不包含子元素或文本的空元素（<input>,<img>,<br>,and<hr>都属于空元素，都会匹配）

$(“td:empty”)

<table>

     <tr>

          <td>Value 1</td>

          <td></td>                                    

     </tr>

     <tr>

          <td>Value 2</td>

          <td></td>                                 

     </tr>

</table>

$(“:has”)

选择包含某元素的元素

$("div:has(p)")

<div><p>Hello</p></div>                             

<div>Hello again!</div>

$(“:parent”)

匹配含有子元素或文本的元素

$(“td:parent”)

<table>

     <tr>

          <td>Value 1</td>                             

          <td></td>

     </tr>

     <tr>

          <td>Value 2</td>                             

          <td></td>

     </tr>

</table>

若选择器中包含特殊字符，可用两个斜杠转义

<span id="foo:bar"></span>                 $(“#foo\\:bar”)

<span id="foo[bar]"></span>               $(“#foo\\[bar\\]”)

<span id="foo.bar"></span>                  $(“#foo\\.bar”)