有一段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 |