jQuery-----选择器

浏览数：40 / 时间：2015年06月09日

属性

$(‘[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>

<input name="name1" />

<label>Newsletter:</label>

</fieldset>

<input name="name2" />

</form>

$(prev + next)

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

$("label + input")

<form>

<input name="name" />

<label>Newsletter:</label>

<input name="newsletter" />

</fieldset>

</form>

$(prev ~ siblings)

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

$("form ~ input")

<form>

<label>Newsletter:</label>

</fieldset>

</form>

<input name="none" />

过滤选择器

$(“:first”)

获取第一个元素

$(“li:first”)

<ul>

<li>list item 1</li>

</ul>

$(“:last”)

获取最后一个元素

$(“li:last”)

$(“:not”)

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

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

<input name="apple" />

$(“: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>Brandon</li>

</ul>

<ul>

<li>Tane</li>

<li>Ralph</li>

</ul>

$(:first-child)

匹配第一个子元素

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

$("ul li:first-child")