1.列表
jQuery 选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
2.jQuery * 选择器
实例
选择 <body> 内的所有元素：
$(body *)
定义和用法
* 选择器选取文档中的每个单独的元素，包括 html、head 和 body。
如果与其他元素（嵌套选择器，正如上面的例子）一起使用，该选择器选取指定元素中的所有子元素。
语法
$(*)
3.jQuery # 选择器
实例
选取 id="choose" 的 元素：
$(#choose)
定义和用法
# 选取带有唯一的指定 id 的元素。
id 引用 HTML 元素的 id 属性。
相同的 id 值只能在文档中使用一次。
语法
$(#id)
| 参数 | 描述 |
|---|---|
| id | 必需。规定要选择的元素的 id。 id 选择器使用 HTML 元素的 id 属性。 |
4.jQuery . 选择器
实例
选取 class="intro" 的元素：
$(.intro)
定义和用法
. 选择器选取带有指定 class 的元素。
class 引用 HTML 元素的 class 属性。
与 id 选择器不同，class 选择器常用于多个元素。
这样就可以为带有相同 class 的任何 HTML 元素设置特定的样式。
语法
$(.class)
| 参数 | 描述 |
|---|---|
| class | 必需。规定要选取的元素的 class。 class 选择器使用 HTML 元素的 class 属性。 |
5.jQuery element 选择器
实例
选择所有的 <p> 元素：
$(p)
定义和用法
element 选择器选取带有指定标签名的元素。
标签名引用 HTML 标签的 < 与 > 之间的文本。
语法
$(tagname)
| 参数 | 描述 |
|---|---|
| tagname | 必需。规定要选取的元素的名称。 |
6.jQuery :first 选择器
实例
选择第一个 <p> 元素：
$("p:first")
定义和用法
:first 选择器选取第一个元素。
最常见的用法：与其他元素一起使用，选取指定组合中的第一个元素（就像上面的例子）。
语法
$(":first")
7.jQuery :last 选择器
实例
选择最后一个 <p> 元素：
$("p:last")
定义和用法
:last 选择器选取最后一个元素。
最常见的用法：与其他元素一起使用，选取指定组合中的最后一个元素（就像上面的例子）。
语法
$(":last")
8.jQuery :even 选择器
实例
选择每个相隔的（偶数） <tr> 元素：
$("tr:even")
定义和用法
:even 选择器选取每个带有偶数 index 值的元素（比如 2、4、6）。
index 值从 0 开始，所有第一个元素是偶数 (0)。
最常见的用法：与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素（如上面的例子）。
语法
$(":even")
9.jQuery :odd 选择器
实例
选择每个相隔的（奇数） <tr> 元素：
$("tr:odd")
定义和用法
:odd 选择器选取每个带有奇数 index 值的元素（比如 1、3、5）。
index 值从 0 开始，所有第一个元素是偶数 (0)。
最常见的用法：与其他元素/选择器一起使用，来选择指定的组中奇数序号的元素（如上面的例子）。
语法
$(":odd")
10.jQuery :eq() 选择器
实例
选择第二个 <p> 元素：
$("p:eq(1)")
定义和用法
:eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素（如上面的例子）。
语法
$(":eq(index)")
| 参数 | 描述 |
|---|---|
| index | 必需。规定元素的 index 值 |
11.jQuery :gt 选择器
实例
选择前 3 个之后的所有 <tr> 元素：
$("tr:gt(2)")
定义和用法
:gt 选择器选取 index 值高于指定数的元素。
index 值从 0 开始。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号之后的元素（如上面的例子）。
语法
$(":gt(index)")
| 参数 | 描述 |
|---|---|
| index | 必需。规定要选择的元素。 会选取 index 值大于指定数的元素。 |
12.jQuery :lt 选择器
实例
选择前 2 个 <tr> 元素：
$("tr:lt(2)")
定义和用法
:lt 选择器选取带有小于指定 index 值的元素。
index 值从 0 开始。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号之前的元素（如上面的例子）。
语法
$(":lt(index)")
| 参数 | 描述 |
|---|---|
| index | 必需。规定要选择的元素。 会选取 index 值小于指定数的元素。 |
13.jQuery :header 选择器
实例
选择所有标题元素（h1 - h6）：
$(":header")
定义和用法
:header 选择器选取所有标题元素（h1 - h6）。
语法
$(":header")
14.jQuery :animated 选择器
实例
选择当前的动画元素：
$(":animated")
定义和用法
:animated 选择器选取当前的所有动画元素。
语法
$(":animated")
15.jQuery :contains 选择器
实例
选择所有包含 "is" 的 <p> 元素：
$("p:contains(is)")
定义和用法
:contains 选择器选取包含指定字符串的元素。
该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。
经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素（如上面的例子）。
语法
$(":contains(text)")
| 参数 | 描述 |
| text | 必需。规定要查找的文本。 |
16.jQuery :empty 选择器
实例
选择每个空元素：
$(":empty")
定义和用法
:empty 选择器选取空的元素。
空元素指的是不包含子元素或文本的元素。
语法
$(":empty")
17.jQuery :visible 选择器
实例
选择 <body> 元素中每个可见的元素：
$("body :visible")
定义和用法
:visible 选择器选取每个当前是可见的元素。
除以下几种情况之外的元素即是可见元素：
- 设置为 display:none
- type="hidden" 的表单元素
- Width 和 height 设置为 0
- 隐藏的父元素（同时隐藏所有子元素）
语法
$(":visible")
18.jQuery [attribute] 选择器
实例
选择带有 id 属性的所有元素：
$("[id]")
定义和用法
[attribute] 选择每个带有指定属性的元素。
可以选取带有任何属性的元素（对于指定的属性没有限制）。
语法
$("[attribute]")
| 参数 | 描述 |
|---|---|
| attribute | 必需。规定要查找的属性。 |
19.jQuery [attribute=value] 选择器
实例
选择每个 id="choose" 的元素：
$("[id=choose]")
定义和用法
[attribute=value] 选择器选取每个带有指定属性和值的元素。
语法
$("[attribute=value]")
| 参数 | 描述 |
|---|---|
| attribute | 必需。规定要查找的属性。 |
| value | 必需。规定要查找的值。 |
20.jQuery [attribute!=value] 选择器
实例
选择（<body> 标签中）不包含 id="main_header" 的元素：
$("body [id!=main_header]")
定义和用法
[attribute!=value] 选择器选取每个不带有指定属性及值的元素。
带有指定的属性，但不带有指定的值的元素，也会被选择。
语法
$("[attribute!=value]")
| 参数 | 描述 |
|---|---|
| attribute | 必需。规定要查找的属性。 |
| value | 必需。规定要查找的值。 |
21.jQuery [attribute$=value] 选择器
实例
选择所有带有 id 属性且属性值以 "header" 结尾的元素：
$("[id$=header]")
定义和用法
[attribute$=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素。
语法
$("[attribute$=string]")
| 参数 | 描述 |
|---|---|
| attribute | 必需。规定要查找的属性。 |
| string | 必需。规定属性值以其结尾的字符串。 |
22.jQuery :input 选择器
实例
选择所有 <input> 元素：
$(":input")
定义和用法
:input 选择器选取表单元素。
该选择器同样适用于 <button> 元素。
语法
$(":input")
23.jQuery :text 选择器
实例
选择 type="text" 的 <input> 元素：
$(":text")
定义和用法
:text 选择器选取类型为 text 的 <input> 元素。
语法
$(":text")
24.jQuery :password 选择器
实例
选择 type="password" 的 <input> 元素：
$(":password")
定义和用法
:password 选择器选取类型为 password 的 <input> 元素。
语法
$(":password")
25.jQuery :radio 选择器
实例
隐藏所有 type="radio" 的 <input> 元素：
$(":radio")
定义和用法
:radio 选择器选取类型为 radio 的 <input> 元素。
语法
$(":radio")
26.jQuery :checkbox 选择器
实例
隐藏所有 type="checkbox" 的 <input> 元素：
$(":checkbox")
定义和用法
:checkbox 选择器选取类型为 checkbox 的 <input> 元素。
语法
$(":checkbox")
27.jQuery :submit 选择器
实例
选择 type="submit" 的 <input> 和 <button> 元素：
$(":submit")
定义和用法
:submit 选择器选取类型为 submit 的 <button> 和 <input> 元素。
如果 <button> 元素没有定义类型，大多数浏览器会把该元素当作类型为 submit 的按钮。
语法
$(":submit")
28.jQuery :reset 选择器
实例
选择 type="reset" 的 <input> 和 <button> 元素：
$(":reset")
定义和用法
:reset 选择器选取类型为 reset 的 <button> 和 <input> 元素。
语法
$(":reset")
29.jQuery :button 选择器
实例
选择 type="button" 的 <button> 元素和 <input> 元素：
$(":button")
定义和用法
:button 选择器选取类型为 button 的 <button> 元素和 <input> 元素。
语法
$(":button")
30.jQuery :image 选择器
实例
选择 type="image" 的 <input> 元素：
$(":image")
定义和用法
:image 选择器选取类型为 image 的 <input> 元素。
语法
$(":image")
31.jQuery :file 选择器
实例
选择 type="file" 的 <input> 元素：
$(":file")
定义和用法
:image 选择器选取类型为 file 的 <input> 元素。
语法
$(":file")
32.jQuery :enabled 选择器
实例
选择所有启用的 <input> 和 <button> 元素：
$(":enabled")
定义和用法
:enabled 选择器选取所有启用的表单元素。
语法
$(":enabled")
33.jQuery :disabled 选择器
实例
选择所有禁用的 <input> 和 <button> 元素：
$(":disabled")
定义和用法
:disabled 选择器选取所有禁用的表单元素。
语法
$(":disabled")
34.jQuery :selected 选择器
实例
隐藏被选择的下拉列表选项：
$(".btn1").click(function(){
$(":selected").hide();
});
定义和用法
:selected 选择器选取被选择的 <option> 元素。
语法
$(":selected")
35.jQuery :checked 选择器
实例
隐藏所有被选中的元素（复选框或单选按钮）：
$(".btn1").click(function(){
$(":checked").hide();
});
定义和用法
:checked 选择器选取所有选中的复选框或单选按钮。
语法
$(":checked")
扫一扫
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
