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”)

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。