JQuery選擇器總結

JQuery選擇器：

一、

1. "*"所有元素

2. "#id"有指定ID的元素

3. ".class"有指定class的元素、".class.class"有指定的2個class的元素

4. "element"選取指定的element(元素)

5. "selector1, selector2, selector3"復合選擇器

例如：

HTML：

<div id="one" class="menu">123</div>
<div id="two" class="menu">456</div>
<p class="title1 title2">0</p>

JQuery代碼：

$("*")
$("#one")
$(".menu")
$(".title1.title2")
$("div")
$("#one,.title1.title2")

結果：

[<div id="one" class="menu">123</div>,<div id="two" class="menu">456</div>,<p class="title1 title2">0</p>]
[<div id="one" class="menu">123</div>]
[<div id="one" class="menu">123</div>,<div id="two" class="menu">456</div>]
[<p class="title1 title2">0</p>]
[<div id="one" class="menu">123</div>,<div id="two" class="menu">456</div>]
[<div id="one" class="menu">123</div>,<p class="title1 title2">0</p>]

二、

1. ":first"獲取第一個元素

2. ":last"獲取最后一個元素

3. ":even"獲取奇數行的元素

4. ":odd"獲取偶數行的元素

5. ":eq(index)"獲取給定索引值的元素

6. ":gt(no)"獲取大于給定索引值(從0開始)的元素

7. ":lt"獲取所有小于給定索引值(從0開始)的元素

8. ":not(selector)"獲取去除所有與給定選擇器匹配的元素

例如：

HTML：

<table>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
  <tr><td>Value 3</td></tr>
  <tr><td>Value 4</td></tr>
  <input name="apple"/>
  <input name="orange" checked="checked" />
</table>

JQuery代碼：

$("tr:first")
$("tr:last")
$("tr:even")
$("tr:odd")
$("tr:eq(3)")
$("tr:gt(0)")
$("tr:lt(2)")
$("input:not(:checked)")

結果：

[<tr><td>Value 1</td></tr>]
[<tr><td>Value 4</td></tr>]
[<tr><td>Value 1</td></tr>,<tr><td>Value 3</td></tr>]
[<tr><td>Value 2</td></tr>,<tr><td>Value 4</td></tr>]
[<tr><td>Value 3</td></tr>]
[<tr><td>Value 2</td></tr>,<tr><td>Value 3</td></tr>,<tr><td>Value 4</td></tr>]
[<tr><td>Value 1</td></tr>,<tr><td>Value 2</td></tr>]
[<input name="apple"/>]

三、

1. "[attribute]"獲取包含給定屬性的元素

2. "[attribute = value]"獲取給定的屬性是某個特定值的元素

3. "[attribute != value]"獲取所有不含有指定的屬性，或者屬性不等于特定值的元素

4. "[attribute ^= value]"獲取給定的屬性是以某些值開始的元素

5. "[attribute $= value]"獲取給定的屬性是以某些值結尾的元素

6. "[attribute *= value]"獲取給定的屬性是以包含某些值的元素

7. "[selector1][selector2][selector3]"復合屬性選擇器

例如：

HTML：

<input id="lily" name="abcd"/>
<input name="12345"/>
<input id="jose"/>

JQuery代碼：

$("input[name]")
$("input[name='abcd']")
$("input[name!='abcd']")
$("input[name^='ab']")
$("input[name$='345']")
$("input[name*='os']")
$("input[id][name]")

結果：

[<input id="lily" name="abcd"/>,<input name="efg"/>]
[<input id="lily" name="abcd"/>]
[<input name="12345"/>]
[<input id="lily" name="abcd"/>]
[<input name="12345"/>]
[<input id="jose"/>]
[<input id="lily" name="abcd"/>]

四、

1. ":input"獲取所有 input, textarea, select 和 button 元素

2. ":text"獲取所有的單行文本框

3. ":password"獲取所有密碼框

4. ":radio"獲取所有單選按鈕

5. ":checkbox"獲取所有復選框

6. ":submit"獲取所有提交按鈕

7. ":reset"獲取所有重置按鈕

8. ":image"獲取所有圖像域

9. ":button"獲取所有按鈕

10. ":file"獲取所有文件域

五、

1. ":hidden"獲取所有隱藏元素

2. ":visible"匹配所有的可見元素

3. ":enabled"獲取所有可用元素

4. ":disabled"獲取所有不可用元素

5. ":checked"獲取所有選中的被選中元素(復選框、單選框等，不包括select中的option)

6. ":selected"獲取所有選中的option元素

例如：

HTML：

<input type="hidden" name="12345"/>
<input disabled="disabled" name="12345"/>
<input type="checkbox" checked="checked" name="12345"/>
<select>
  <option value="1">1111</option>
  <option value="2" selected="selected">2222</option>
</select>

JQuery代碼：

$("input:hidden")
$("input:visible")
$("input:enabled")
$("input:disabled")
$("input[type='checkbox']:checked")
$("select option:selected")

結果：

[<input type="hidden" name="12345"/>]
[<input disabled="disabled" name="12345"/>,<input type="checkbox" checked="checked" name="12345"/>]
[<input type="hidden" name="12345"/>,<input type="checkbox" checked="checked" name="12345"/>]
[<input disabled="disabled" name="12345"/>]
[<input type="checkbox" checked="checked" name="12345"/>]
[<option value="2" selected="selected">2222</option>]

六

1. "ancestor descendant"在給定的祖先元素下匹配所有的后代元素

2. "parent > child"在給定的父元素下匹配所有的子元素

3. "prev + next"匹配所有緊接在 prev 元素后的 next 元素

4. "prev ~ siblings"匹配 prev 元素之后的所有 siblings 元素

七、

1. ":header"匹配如 h1, h2, h3之類的標題元素

2. ":animated"匹配所有正在執行動畫效果的元素

3. ":focus"匹配當前獲取焦點的元素

4. ":contains(text)"匹配包含給定文本的元素

5. ":empty"匹配所有不包含子元素或者文本的空元素

6. "has(selector)"匹配含有選擇器所匹配的元素的元素

7. ":parent"匹配含有子元素或者文本的元素

八

1. ":nth-child"匹配其父元素下的第N個子或奇偶元素

2. ":first-child"匹配第一個子元素

3. ":last:child"匹配最后一個子元素

4. ":only-child"如果某個元素是父元素中唯一的子元素，那將會被匹配；如果不是，則不會被匹配