JQuery选择器
1. 基本选择器
|
选择器 |
描述 |
返回 |
示例 |
|
#id |
id选择器 |
单个 |
$("#orderId") |
|
.class |
类选择器 |
集合 |
|
|
element |
元素选择器 |
集合 |
|
|
* |
匹配所有元素 |
集合 |
$("*") |
|
selector1,selector2,... selectorN |
将每一个选择器匹配到的元素合并后返回 |
集合 |
$("div,span,p.myClass")返回所有div，span和class为myClass的p标签的一组元素 |
2. 层次选择器
|
选择器 |
描述 |
返回 |
示例 |
|
$("ancestor descendant") |
选取ancestor元素的所有descendant（后代）元素 |
元素 |
$("#id span") |
|
$("parent > child") |
选取parent元素下的child（子）元素 |
元素 |
$("div > span") |
|
$("selector").next("div") |
下一个节点 |
||
|
$("selector").siblings("div") |
selector的所有同辈节点 |
3. 基本过滤选择器
|
选择器 |
描述 |
返回 |
示例 |
|
:first |
选取第一个元素 |
单个 |
$("div:first")选取所有div元素中的 第一个div元素 |
|
:last |
$("div:last") |
||
|
:not(selector) |
去除所有与给定选择器匹配的元素 |
集合 |
$("input:not(.myClass)")class不是 myClass的所有input元素 |
|
:even |
索引为偶数，索引从0开始 |
集合 |
$("input:even") 索引是偶数的input |
|
:odd |
奇数 |
$("input:odd") |
|
|
:eq(index) |
索引=index的元素 |
单个 |
$("input:eq(1)") |
|
:gt(index) |
索引>index的元素 |
集合 |
$("input:gt(2)") |
|
:lt(index ) |
索引<index的元素 |
集合 |
$("input:lt(6)") |
|
:header |
所有标题元素，如h1,h2 |
$(":header")网页中所有的<h1>,<h2>,<h3>... |
|
|
:animated |
正在执行动画的元素 |
$("div:animated") |
4. 内容选择器
|
选择器 |
描述 |
返回 |
示例 |
|
:contains(text) |
文本内容包含text的元素 |
集合 |
$("div:contains('me')")包含"me"的div |
|
:empty |
不包含子元素（包括文本）的空元素 |
集合 |
$("div:empty") |
|
:has(selector) |
选取有选择器所匹配的元素的元素 |
集合 |
$("div:has(p)")含有p元素的div元素 |
|
:parent |
含有子元素或文本的元素 |
集合 |
$("div:parent")选取拥有子元素（包括文本元素）的div元素 |
5. 可见性过滤选择器
|
选择器 |
描述 |
返回 |
示例 |
|
:hidden |
选取所有不可见的元素，包括display=none、文本隐藏域 (<input type="hidden" />) 和visibility:hidden之类的元素额 |
集合 |
$("input:hidden")选取所有不可见的input |
|
:visible |
选取所有可见的元素 |
集合 |
$("input:visible")选取所有可见的input |
6. 属性过滤选择器
|
选择器 |
描述 |
返回 |
示例 |
|
[attr] |
拥有此属性的元素 |
集合 |
$("div[id]"):拥有id属性的div元素 |
|
[attr=value] |
属性值为value的元素 |
集合 |
$("div[title=china]") |
|
[attr!=value] |
属性不为value的元素 |
集合 |
$("div[title!=china]")注：没有title属性的div也会被选中 |
|
[attr^=value] |
属性以value开头的元素 |
集合 |
$("div[title^=order]") |
|
[attr$=value] |
属性以value结束的元素 |
集合 |
$("div[title$=test]") |
|
[attr*=value] |
属性包含value的元素 |
集合 |
$("div[title*=test]") |
|
[selector1] [selector2] |
用多个属性选择器合并成符合属性选择器 |
集合 |
$("div[id][title^=order]")有id属性，且title属性以order开头的div |
7. 子元素选择器
|
选择器 |
描述 |
示例 |
|
:nth-child (index/even/odd/equation) |
选取每个父元素下的第index个元素或奇偶元素(index从1起) |
:nth-child(3n)每个父元素下索引值是3的倍数的元素(n从0开始) |
|
:first-child |
父元素的第1个子元素 |
$("ul li:first-child")每个ul中第1个li元素 |
|
:last-child |
父元素的最后1个子元素 |
$("ul li:last-child")每个ul中最后1个li元素 |
|
:only-child |
如果某个元素是它父元素中唯一的子元素就会被匹配，否则不被匹配 |
$("ul li:only-child")在ul中选取时唯一子元素的li元素 |
8. 表单对象属性过滤选择器
|
选择器 |
描述 |
示例 |
|
:enabled |
所有可用元素 |
$("#form1 :enabled")选取id为form1的表单下所有可用元素 |
|
:disabled |
所有不可用元素 |
$("#form2:disabled") |
|
:checked |
所有被选中的元素（单选框、复选框） |
$("input:checked")选取所有被选中的input元素 |
|
:selected |
所有被选中的选项元素（下拉列表） |
$("select:selector")选取所有被选中的选项元素 |
9. 表单选择器
|
选择器 |
描述 |
示例 |
|
:input |
所有input, textarea, select, button元素 |
|
|
:text |
单行文本框 |
|
|
:password |
||
|
:radio |
||
|
:checkbox |
||
|
:submit |
||
|
:image |
||
|
:reset |
||
|
:button |
||
|
:file |
||
|
:hidden |