jquery系列之一——选择器(基本选择器)

Haoroid 2016-01-20

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> ]

相关推荐