JQuery选择器使用说明-附表
JQuery选择器 使用说明
菠菜我研究jQuery后,发现jQuery的选择器的用法很灵活,但是我没有找到合适的中文资料,所以我决定自己写一篇,以供广大爱好者参考。如需转载，请注明出处，谢谢配合。
所谓的选择器，类似与DOM里面的 document.getElementById(). 。因为我们在使用 jQuery时，不可避免的要选择HTML文档里面元素。 大家也可以想象，如果你都找不到你要操作的元素，何谈进一步的操作。 罗嗦这么多，就是让大家认识到选择器的重要性。
参考文档, jQuery1.3 中文参考手册
作用：jQuery选择器可以选择一个或者多个HTML元素。主要可以使用：标签名称，属性名称或者元素内容。
jQuery 元素选择
jQuery uses CSS style selectors to select HTML elements.
jQuery使用 CSS样式选择器选择 HTML元素
$("p") 选择所有 <p> 元素
$("p.intro") 选择所有 <p> 元素，元素的class="intro".
$("p#demo")选择所有 <p> 元素，元素的 id="demo".
jQuery 属性选择
jQuery uses XPath style selectors to select elements with given attributes.
jQuery 使用 XPath，结合属性选择HTML元素
$("[href]") 选择所有具有 属性href 的元素
$("[href='#']") 所有所有具有属性 href，而且值为 # 的元素
$("[href!='#']") 所有所有具有属性 href，而且值不等于 # 的元素.
$("[href$='.jpg']") 所有所有具有属性 href，而且值包含“ . jpg” 的元素.
jQuery CSS 选择
jQuery CSS selectors can be used to change CSS properties for HTML elements.
jQuery CSS选择器可以使用在需要改变HTML元素CSS属性值的地方
$("p.intro").css("background-color","yellow");
:
| 语法 | 解释说明 |
| $(this) | 当前HTML元素 |
| $("p") | 所有的 <p>元素 |
| $("p.intro") | 所有的 <p>元素，class="intro" |
| $(".intro") | 所有的元素，class="intro" |
| $("#intro") | 元素，id="intro" |
| $("ul li:first") | 每一个 ul 元素标签内的第一个<li> 元素 |
| $("[href$='.jpg']") | 所有的元素，每一个元素的href 必须包含 .jpg |
| $("div#intro .head") | 所有的 class="head" 的元素，元素 <div> 里面 id="intro" |
附一个选择器表
| 选择器 | 例子-用法 | 说明 |
| * | $("*") | 选择所有的元素 |
| #id | $("#lastname") | 选择元素ID=lastname的元素 |
| .class | $(".intro") | 选择元素 class="intro" |
| element | $("p") | 所有的 <p> 元素 |
| .class.class | $(".intro.demo") | 所有的元素, class=intro 和 class=demo |
|
|
|
|
| :first | $("p:first") | The first <p> element 第一个 <p> 元素 |
| :last | $("p:last") | The last <p> element 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有的索引值为偶数 <tr> 元素(索引从0开始计数) |
| :odd | $("tr:odd") | 所有的索引值为奇数 <t r> 元素(索引从0开始计数) |
|
|
|
|
| :eq(index) | $("ul li:eq(3)") | 在一个 ul 列表中取第四个元素 ( 索引从 0 开始计数 ) |
| :gt(no) | $("ul li:gt(3)") | 在一个 ul 列表中取索引值大于3的所有元素集合 ( 索引从 0 开始计数 ) |
| :lt(no) | $("ul li:lt(3)") | 在一个 ul 列表中取索引值小于3的所有元素 集合 ( 索引从 0 开始计数 ) |
| :not(selector) | $("input:not(:empty)") | 取所有的未被选中的元素 |
|
|
|
|
| :header | $(":header") | 选择如 h1, h2, h3 之类的标题元素 |
| :animated |
| 选择动画效果的元素 |
|
|
|
|
| :contains(text) | $(":contains('wellhope')") | 选择包含字符串[wellhope]的元素 |
| :empty | $(":empty") | 选择所有没有子节点的元素集合 |
| :hidden | $("p:hidden") | 选择所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 选择所有课件的 table 元素 |
|
|
|
|
| s1,s2,s3 | $("th,td,.intro") | 所有匹配选择器的元素 |
|
|
|
|
| [attribute] | $("[href]") | 选择具有属性 href 的元素 |
| [attribute=value] | $("[href='#']") | 选择具有属性 href="#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 选择具有属性 href!="#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 选择具有属性 href 的元素,而且 href 的值必须包含 .jpg |
|
|
|
|
|
|
|
|
| :input | $(":input") | 选择所有 <input> 元素 |
| :text | $(":text") | 选择所有的文本框 type="text" |
| :password | $(":password") | 选择所有的密码框 type="password" |
| :radio | $(":radio") | 选择所有的单选框 type="radio" |
| :checkbox | $(":checkbox") | 选择所有的复选框 type="checkbox" |
| :submit | $(":submit") | 选择所有的提交按钮 type="submit" |
| :reset | $(":reset") | 选择所有的复位按钮 type="reset" |
| :button | $(":button") | 选择所有的按钮 type="button" |
| :image | $(":image") | 选择所有的input按钮 type="image" |
| :file | $(":file") | 选择所有的input元素 type="file" |
|
|
|
|
| :enabled | $(":enabled") | 获取所有激活的元素 |
| :disabled | $(":disabled") | 选择所有的非激活的元素 |
| :selected | $(":selected") | 匹配所有选中的元素 |
| :checked | $(":checked") | 选择选中的复选框元素 |
| 备注: 此表菠菜翻译而来 | 不承担任何事故责任 |