jQuery-选择器
有一段html代码如下：
<div class="box hz" id="box1"></div>
<div class="box hz" id="box2"></div>
<div class="box" id="box3"></div>
<p class="text" id="text1">
<span></span>
<img src="" id="img1" title="flower" lang="chinese-cn" />
</p>
<p class="text" id="text2">
<img src="" id="img2" title="star" lang="chinesecn" />
</p>
<h1 id="h1">
<em id="em1"></em>
<span>
<em id="em2"></em>
</span>
</h1>
与css选择器相同部分
| 选择器 | 示例 | 结果 | 备注 |
|---|
| id | #box1 | box 1 | |
| 类 | .box | box 1-3 | |
| 标签 | p | text 1-2 | |
| 通配符 | * | 所有 | |
| 交集 | p.text / p.text#text1 | text 1-2 / text 1 | 多者的交集,不能有空格 |
| 并集 | #box1 , p | box 1,text 1-2 | 分隔符两侧空格随意(包括后面的) |
| 后代 | #h1 em | em 1-2 | 后代是所有后代 |
| 子代 | #h1 > em | em 1 | 子代只有下一代 |
| 紧邻 | #box1 + .box | box 2 | 紧邻的下一个 |
| 兄弟 | #box1 ~ .box | box 2-3 | 同级的后面的所有兄弟(不含前面) |
| 子元素 | .text img:first-child | img 2 | |
| .text img:last-child | img 1-2 | |
| .text img:nth-child(1) | img 2 | |
| .text img:nth-last-child(1) | img 1-2 | |
| .box:nth-child(even) | box 2 | 偶数 |
| .box:nth-child(odd) | box1 3 | 奇数 |
| 属性 | [title] | img 1-2 | 含有title属性的元素 |
| [title=star] | img 2 | title=star的元素 |
| [class~=hz] | box 1-2 | 用空格分隔且第1个是hz的,或整体等于hz的 |
| [lang|=chinese] | img 1 | 用-分隔且第1个是chinese的,或整体等于chinese的 |
| [title*=ow] | img 2 | 只要能拆分出ow的 |
| [title^=f] | img 1 | 开头只要是f的 |
| [title$=r] | img 1-2 | 结尾只要是r的 |
jQuery改进的css选择器
子元素
- css的子元素选择器，无论子元素类型是什么，都选择；jQuery则只选择指定类型子元素
- jQuery的子元素选择器下标从0开始
- 如第一行示例，css的子元素选择器选择每个.text下的第1个标签(无论子元素类型是什么)，而jQuery只选择第一个.text下的第一个img标签(同理last是只选择最后一个.text下的)
| jQuery示例 | 结果 | 备注 |
|---|
| $(".text img:first") | img 1 | |
| $(".text img:last") | img 2 | |
| $(".text img:eq(0)") | img 1 | 类似nth-child |
| $(".box:gt(1)") | box 3 | 指定元素的后一个 |
| $(".box:lt(1)") | box 1 | 指定元素的前一个 |
| $(".box:odd") | box 1 3 | 所有奇数行元素 |
| $(".box:even") | box 2 | 所有偶数行元素 |
属性
| jQuery示例 | 结果 |
|---|
| $(".text img[title!=flower]") | img 2 |
新增选择器
input
| 选择器 | 解释 |
|---|
| $(":input") | 所有input |
| $(":button") | input中type=button的 |
| $(":submit") | |
| $(":reset") | |
| $(":text") | |
| $(":password") | |
| $(":file") | |
| $(":image") | |
| $(":radio") | |
| $(":checkbox") | |
元素状态
| 选择器 | 解释 |
|---|
| $(":checked") | 被选中的checkbox |
| $(":disabled") | 所有禁用的input(有disabled属性) |
| $(":enabled") | 所有激活的input(无disabled属性) |
| $(":selected") | select中被选中的option |
| $(":hidden") | display=none的元素 |
| $(":visible") | display!=none的元素 |
| $(":empty") | 不含任何子节点(有注释节点也被作为空元素)的元素 |
| $(":contains(text)") | 包含指定字符串的元素(节点的属性,名称,注释不算，只算节点内容) |
| $(":not(select)") | 例如:not(:empty)所有含子节点的元素，可以任意搭配 |
快速选择
| 选择器 | 解释 |
|---|
| $(this) | 自己 |
| $(":header") | <h1>-<h6> |
| $(":animated") | 动画元素 |
筛选(方法)选择器
| 示例 | 解释 |
|---|
| $(".box").eq(0) | 等同于$(".box:eq(0)") |
| $("#h1").find(“em”) | 等同于$("#h1 em")，必须有参数 |
| $("#h1").children(“em”) | 等同于$("#h1 > em")，可以无参数,表示所有下一代子元素 |
| $("#box1").siblings(".box") | 同级的符合参数的兄弟(除了自己)，可以无参数,表示所有除了自己的兄弟 |
| $("#img1").parent() | img1的父元素，结果:text 1 |
