jQuery 选择器
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
jQuery 最强大易用的即是它提供的选择器,它支持 CSS 选择器及其扩展,很方便已经熟 悉传统 web 开发模式的用户快速过渡到 jQuery 上来。比如下面这些常用的 CSS 选择器:
- div.highlight 选择 CSS 类 highlight 的所有 div 元素
- table#tabid 选择ID为tabid的table元素
- #aid.aclass 选择 ID 为 aid,CSS 类为 aclass 的链接元素
这些选择器均可直接在jQuery中使用,只需要将选择器包装在$()中即可。jQuery的选择器完全兼容 CSS3 选择器。这为跨浏览器的 web 应用提供了极大的便利。除了这些基本的 CSS 选择器外,jQuery 提供了更丰富的选择器,如通过位置选择:
选择器 | 作用 |
---|---|
:first | 选择第一个匹配 |
:last | 选择最后一个匹配 |
:first-child | 选择第一个字元素 |
:last-child | 选择最后一个子元素 |
:nth-child(n) | 选择第 n 个子元素 |
:even 及 :odd | 选择偶数/奇数子元素集 |
:eq(n) | 第n个元素(从0开始) |
:gt(n) | 选择第 n 个元素之后的元素集 |
:lt(n) | 选择第 n 个元素之前的元素集 |
比如:
- li a:first 匹配在列表(
<li>
)元素下的第一个链接(<a>
)元素。 - table tbody td:nth-child(5)返回 table 的第 6 列元素集。
自定义选择器:
选择器 | 作用 |
---|---|
:button | 选择按钮 |
:checkbox | 选择复选框 |
:checked | 选择已经选中的复选框/单选框 |
:hidden | 选择属性为隐藏的元素 |
:enabl | 选择启用的元素 |
:disable | 选择禁用的元素 |
:image | 选择图片 |
:input | 选择输入框 |
:radio | 选择单选框 |
:not(filter) | 反向选择器 |
应该注意的是,这些选择器可以组合使用,这样会给我们提供极大的方便,比如:
- :input:enable 选择已经启用的文本框元素
- :checkbox:checked 选择已经选择的复选框元素
在线练习
{$ activeFileHint $}