前言
本文內容摘自《鋒利的jQuery》，梳理了jQuery裏面的幾種選擇器的用法，這裏只給出一個大概的結構，具體用法還請查資料
正文
jQuery選擇器完全繼承了CSS選擇器的風格，可以隨意將選擇器組合在一起，下面來看看它支持哪些寫法吧
常用選擇器
標籤選擇器： $(“td”)
ID選擇器： $(“#note”)
類選擇器 : $(“.note”)
羣組選擇器：$(“td，#note, .note”)
後代選擇器: $(“td input”) $(“td > input”）
通配符選擇器： $(“*”) 、 $(“select *”) 、 $(“#note *”)
選擇器可以組合使用，例如標籤、Id、後代組合：$(“td#note span”)
層次選擇器
選取ancestor所有後代： $(“ancestor descendant”)
選取parent元素子元素： $(“parent > child”)
prev元素下個同輩元素： $(“prev + next”)
prev之後所有兄弟節點： $(“prev~siblings”）
最後兩個選擇器注意和jQuery函數nextAll()、prevAll()、siblings()區分或者代替
過濾選擇器
:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated
:focus
上面的選擇器其實也可以和之前的常用選擇器、層次選擇器混合使用，代表不同的含義。例如select:first 與select :first 一個表示相同類型下的第一個元素，而另一個表示這個類型下元素的第一個子元素；當然組合還有很多種方式：var name = $(“select > option:first”).val();
<body>
<select name="review">
<option value="0">蘋果</option>
<option value="1">香蕉</option>
<option value="2">荔枝</option>
<option value="3">芒果</option>
</select>
<select class="retrieve">
<option value="3">芒果</option>
<option value="2">荔枝</option>
<option value="1">香蕉</option>
<option value="0">蘋果</option>
</select>
<script>
$(function(){
var name = $("select:first").attr("name")
alert(name);
var val = $("select.retrieve :first").val();
alert(val);
})
</script>
</body>內容過濾選擇器
:contains
:empty
:has
:parent
可見性過濾選擇器
:hidden
:visible
屬性過濾選擇器
[attribute] 例：$(“div[id]”)
[attribute=value] 例： $(“div[name=’test’]”)
[attribute!=value]
[attribute^=value] 注：以value開頭
[attribute$=value] 注：以value結束
[attribute*=value]
[attribute|=value]
[attribute~=value]
[attribute1][attribute2][attributeN] 注：合併成複合屬性熟悉器，範圍每選擇一次，縮小一次
這裏用一個select的例子來說明
<body>
<select name="review">
<option value="0">蘋果</option>
<option value="1" selected="selected">香蕉</option>
<option value="2">荔枝</option>
<option value="3">芒果</option>
</select>
<script>
var text = $("select[name='review'] option[selected]").text();
alert(text); //輸出香蕉
</script>
</body>子元素過濾選擇器
:first-child
:last-child
:only-child
:nth-child
nth-child可以使用n這個字母，組成任意表達式，如2n 、2n+1 ,n會從1開始將滿足條件的元素選取
表單對象屬性過濾選擇器
:enabled
:disabled
:checked
:selected
selected這個選擇器，我想用select來舉個例子
<body>
<select name="review">
<option value="0">蘋果</option>
<option value="1" selected="selected">香蕉</option>
<option value="2">荔枝</option>
<option value="3">芒果</option>
</select>
<script>
var text = $("select[name='review'] option:selected").text();
alert(text); //輸出香蕉
</script>
</body>表單選擇器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
例子
<body>
<input type="radio" name="test" value="0" /> 一級
<input type="radio" name="test" checked value="1"/> 二級
<script>
var val = $("input:radio:checked").val();
alert(val); //輸出1
</script>
</body>結束語
jQuery非常的強大，還有很多優秀的開源，搬磚越來越容易了&_&
