jquery選擇器、屬性設定用法經驗總結

jquery選擇器、屬性設定用法經驗總結

本人是一名小白,應屆畢業生,以前沒用過jquery,最近做專案用到了jquery。在做的過程中走了很多彎路,不停的搜尋。總結出了一些用法,供大家參考:

最基本的選擇器語法包括:id、class、標籤、屬性,這和css選擇器是一致的。

ID選擇器要在ID前加#,比如要選擇一個ID為myDivID的div元素(<div id=”myDivID”></div>)可以這樣寫:
複製程式碼 程式碼如下:
$(“#myDivID”);

D是不能重複的,所以ID選擇器選出來的是一個jquery物件。

class選擇器要在class前加點(.),比如要選擇一個class為myInputClass的input元素(<input type=”text” class=”myInputClass”/>)可以這樣寫:
複製程式碼 程式碼如下:
$(“.myInputClass”);

class是可以重複的,所以class選擇器選出來的可以是一類元素,即好多個元素,所以jquery選出來的是個陣列,可以引用下標來選擇每個元素:比如
複製程式碼 程式碼如下:
for(var i = 0; i < $(“.myInputClass”).length; i ) {$(“.myInputClass”)[i];}

這樣可以迭代出每個元素。

標籤選擇器直接寫標籤型別即可,比如要選擇一個段落p標籤(<p></p>)即可這樣寫:
複製程式碼 程式碼如下:
$(“p”);

標籤選擇器選出來的也是一個陣列,選出所有的p標籤元素,也可以用上面的方法迭代出所有的元素。

屬性選擇器要在前面加方括號([]),比如要選擇含有name=”xxName”的元素,可以這樣寫:
複製程式碼 程式碼如下:
$(“[xxName]”);

這樣來選擇,選擇出的也是一個陣列,因為name是可以重複的。

ID選擇器可以精確的選出一個元素來,但在開發中我們可能更多的要選擇出一組元素,怎樣才能精確的選擇出我們想要的元素呢,其實幾種選擇器是可以混合使用的:
複製程式碼 程式碼如下:
<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>

 
比如我們要選擇偶數個文字標籤,即:寫著even的文字框。我們可以這樣來選擇:

首先選中這個div,然後再選中p,然後再選中type=“text”的文字框,最後再選中偶數個位置:
複製程式碼 程式碼如下:
$(“#attrValueTab p input[type=’text’]:even”);

組合選擇在開發中是非常有用的。可以用下面這種方法來選中被勾選的button或者是checkbox元素:
複製程式碼 程式碼如下:
$(“input[name=’avDefValue_input’]:checked”);

您可能感興趣的文章:

jquery選擇器大全 全面詳解jquery選擇器jQuery選擇id屬性帶有點符號元素的方法jQuery選擇器之基本選擇器與層次選擇器jquery選擇器之屬性過濾選擇器詳解jQuery 選擇器詳解jquery 中多條件選擇器,相對選擇器,層次選擇器的區別老生常談jquery id選擇器和class選擇器的區別