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