JQuery选择器

JQuery选择器是CSS1-3、XPath的结合物

支持以下CSS查询器的语法

1、* 任何元素

示例:

//选择所有元素

$("*");

2、E 所有类型为E的元素

示例:

//选择所有div元素

$("div")

3、E:nth-child(n) 所有类型为E并且是其父元素的第n个子元素的元素

示例:

$("div:nth-child(1)");

HTML标记

<body>

<div ></div>

<div ></div>

</body>

结果

[ <div ></div> ]

HTML 标记

<body>

<div >

<div ></div>

<div ></div>

</div>

<div >

<div ></div>

</div>

</body>

结果

[ <div ><div ></div><div ></div></div> <div ></div> <div ></div> ]

4、E:first-child 等同于 div:nth-child(1)

5、E:last-child 等同于 div:nth-child(n) n为最后一个元素的索引

6、E:only-child 所有类型为E并且是其父元素的唯一子元素的元素

7、E:empty 所有类型为E并且子元素为空的元素

示例:

$("div:empty");

HTML标记

<body>

<div >aaaaa</div>

<div ></div>

</body>

结果

[ <div ></div> ]

8.E:enabled 所有类型为E并且处于可用状态的元素

示例:

$("input:enabled");

HTML标记

<body>

<input type="button" />

<input type="button" disabled="disabled" />

</body>

结果

[ <input type="button" /> ]

9、E:disabled 与 E:enabled相反

10、E:checked 所有类型为E并且处于选中状态的元素( 只适用于radio-button 或者 checkbox)

11、E:selected 所有类型为E并且处于选中状态的元素( 只适用于一个或多个option 元素内部的选择)

12、E.warning 所有类型为E并且class属性值为warning的元素

13、E#myid 类型为E并且id为“myid”的元素(最多匹配一个元素)

14、E:not(s) 所有类型为E并且不匹配s选择器

15、E F 所有祖先元素为E的F元素

示例:

$("div input")

HTML标记

<body>

<div >

<table>

<tr>

<td><input type="button" /></td>

</tr>

</table>

</div>

<div ></div>

<input type="button" />

</body>

结果

[ <input type="button" /> ]

16、E > F 所有父元素为E的F元素

17、E + F 所有前面兄弟元素为E的F元素

18、E ~ F 所有后面兄弟元素为E的F元素

19、E,F,G 所有的E元素、F元素、G元素

以下是JQuery支持但是和CSS不同的选择器

1、E[@foo] 所有包含foo属性的类型为E的元素

2、E[@foo=bar] 所有包含foo属性的值为bar的类型为E的元素

3、E[@foo^=bar] 所有包含foo属性的值以bar开头的类型为E的元素

4、E[@foo$=bar] 所有包含foo属性的值以bar结尾的类型为E的元素

5、E[@foo*=bar] 所有包含foo属性的值包含bar的类型为E的元素

支持XPath的选择器都比较好理解

详细的参考http://docs.jquery.com/Selectors