快捷導(dǎo)航

jquery選擇器、屬性設(shè)置用法經(jīng)驗(yàn)總結(jié)

更新時(shí)間：2013年09月08日 14:53:44 作者：

最近做項(xiàng)目用到了jquery。在做的過(guò)程中走了很多彎路，不停的搜索。總結(jié)出了一些jquery選擇器、屬性設(shè)置用法，供大家參考

本人是一名小白，應(yīng)屆畢業(yè)生，以前沒(méi)用過(guò)jquery，最近做項(xiàng)目用到了jquery。在做的過(guò)程中走了很多彎路，不停的搜索?？偨Y(jié)出了一些用法，供大家參考：

最基本的選擇器語(yǔ)法包括：id、class、標(biāo)簽、屬性，這和css選擇器是一致的。

ID選擇器要在ID前加#，比如要選擇一個(gè)ID為myDivID的div元素（<div id="myDivID"></div>）可以這樣寫(xiě):

復(fù)制代碼代碼如下:

$("#myDivID");

D是不能重復(fù)的，所以ID選擇器選出來(lái)的是一個(gè)jquery對(duì)象。

class選擇器要在class前加點(diǎn)（.），比如要選擇一個(gè)class為myInputClass的input元素（<input type="text" class="myInputClass"/>）可以這樣寫(xiě)：

復(fù)制代碼代碼如下:

$(".myInputClass");

class是可以重復(fù)的，所以class選擇器選出來(lái)的可以是一類(lèi)元素，即好多個(gè)元素，所以jquery選出來(lái)的是個(gè)數(shù)組，可以引用下標(biāo)來(lái)選擇每個(gè)元素：比如

復(fù)制代碼代碼如下:

for(var i = 0; i < $(".myInputClass").length; i++) {$(".myInputClass")[i];}

這樣可以迭代出每個(gè)元素。

標(biāo)簽選擇器直接寫(xiě)標(biāo)簽類(lèi)型即可，比如要選擇一個(gè)段落p標(biāo)簽（<p></p>）即可這樣寫(xiě)：

復(fù)制代碼代碼如下:

$("p");

標(biāo)簽選擇器選出來(lái)的也是一個(gè)數(shù)組，選出所有的p標(biāo)簽元素，也可以用上面的方法迭代出所有的元素。

屬性選擇器要在前面加方括號(hào)（[]），比如要選擇含有name="xxName"的元素，可以這樣寫(xiě)：

復(fù)制代碼代碼如下:

$("[xxName]");

這樣來(lái)選擇，選擇出的也是一個(gè)數(shù)組，因?yàn)閚ame是可以重復(fù)的。

ID選擇器可以精確的選出一個(gè)元素來(lái)，但在開(kāi)發(fā)中我們可能更多的要選擇出一組元素，怎樣才能精確的選擇出我們想要的元素呢，其實(shí)幾種選擇器是可以混合使用的：

復(fù)制代碼代碼如下:

 
<div id="attrValueTab"> 
<span style="white-space:pre"> </span><p> 
<span style="white-space:pre"> </span><input type="button" value="確定" /> <input type="text" value="odd" /> <input type="text" value="even" /> 
<span style="white-space:pre"> </span></p> 
<span style="white-space:pre"> </span><p> 
<span style="white-space:pre"> </span><input type="button" value="取消" /> <input type="text" value="odd" /> <input type="text" value="even" /> 
<span style="white-space:pre"> </span></p> 
</div> 