jquery系列之一——选择器（基本选择器）

1. id选择器：#id

示例：查找 ID 为"myDiv"的元素。

$("#myId")

 

2. 元素选择器：element

示例：查找一个 DIV 元素。

$("div")

 

3. 类选择器：.class

示例：查找所有类是 "myClass" 的元素。

$(".myClass")

 

4. 查找祖先节点下的后代节点：ancestor descendant

注意：匹配孩子节点，且包括后代。

示例：找到表单中所有的 input 元素。

html:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jquery:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

 

5. 查找父亲节点下的子节点：parent > child

注意：只匹配孩子节点，不包括后代。

示例：匹配表单中所有的子级input元素。

html:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jquery:

$("form > input")

结果:

[ <input name="name" /> ]

 

6. 查找当前节点和其后的节点：prev + next

示例：匹配所有跟在 label 后面的 input 元素。 

html:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jquery:

$("label + input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

 

 7. 查找当前节点之后的节点：prev ~ siblings

示例：找到所有与表单同辈的 input 元素。  

html:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jquery:

$("form ~ input")

结果:

[ <input name="none" /> ]

 

 8. 获取第一个元素：:first

示例：获取匹配的第一个元素。  

html:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jquery:

$('li:first')

结果:

[ <li>list item 1</li> ]

 9. 获取最后一个元素：:last

示例：获取匹配的最后一个元素。  

html:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jquery:

$('li:last')

结果:

[ <li>list item 5</li> ]

 10. 去除所有与给定选择器匹配的元素：:not(selector)

示例：查找所有未选中的 input 元素。  

html:

<input name="apple" />
<input name="flower" checked="checked" />

jquery:

$("input:not(:checked)")

结果:

[ <input name="apple" /> ]

11. 匹配所有索引值为偶数的元素，从 0 开始计数：:even

用法：匹配所有索引值为偶数的元素，从 0 开始计数。

示例：查找表格的1、3、5...行（即索引值0、2、4...）。  

html:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jquery:

$("tr:even")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>]

 12. 匹配所有索引值为奇数的元素，从 0 开始计数：:odd

示例：查找表格的2、4、6行（即索引值1、3、5...）。  

html:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jquery:

$("tr:odd")

结果:

[ <tr><td>Value 1</td></tr> ]

  

 13. 匹配一个给定索引值的元素，从 0 开始计数：:eq(index)

示例：查找第二行。  

html:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jquery:

$("tr:eq(1)")

结果:

[ <tr><td>Value 1</td></tr> ]

 14. 匹配所有大于给定索引值的元素，从 0 开始计数：:gt(index)

示例：查找第二第三行，即索引值是1和2，也就是比0大。  

html:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jquery:

$("tr:gt(0)")

结果:

[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

 15. 匹配所有小于给定索引值的元素，从 0 开始计数：:lt(index)

示例：查找第一第二行，即索引值是0和1，也就是比2小。  

html:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jquery:

$("tr:lt(2)")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]