jQuery常用的选择器
jQuery是一个常用的JavaScript库,它包含许多功能强大且易于使用的选择器。下面介绍一些jQuery中常用的选择器:
- 标签选择器
最普通的选择器就是标签选择器,可以通过输入HTML标记的名称来选定元素。
// 选择所有段落
$('p')
- 类选择器
类选择器可以通过CSS样式表中定义的类名来选定元素。
// 选择具有 "blue" 类的所有元素
$('.blue')
- ID 选择器
ID 选择器可以通过HTML标记中定义的id属性来选定元素。
// 选取id为 "myDiv" 的元素
$('#myDiv')
- 属性选择器
属性选择器可以基于特定属性或属性值来选定元素。
// 选取href属性值以"http"开头的a元素
$('a[href^="http"]')
- 子元素、后代及同级选择器
子元素选择器 (>) 选取作为另一个元素子级的元素。后代选择器(空格)则不考虑子/父关系,而选取任何在另一个元素内部的元素。同级元素选择器 (+) 和 ( ~ ) 则用于选择与某个元素处于相同层级的其他元素。
// 选取div直接下一级的所有span元素
$('div > span')
// 选取所有ul下的li
$('ul li')
// 查找div元素之后的第一个p元素
$('div + p')
// 查找div元素之后的所有p元素
$('div ~ p')
- 过滤选择器
过滤选择器用于从一个现有的选择结果中再次过滤结果。例如,:first-selectors 只会选择每个匹配集中的第一个。
// 选取 ul 下的第一个 li 元素
$('ul li:first')
// 选取倒数第二个 div 元素
$('div:nth-last-child(2)')
// 选取所有包含 "C#" 文本的元素
$(':contains("C#")')
- :input 选择所有输入字段: <input>, <textarea>, <select>, and <button>
// 选取表单中的所有输入框
$(':input')
- :checked 选择所有的被勾选的表单元素
// 选取所有被选中的复选框
$('input:checked')
- :header 选择所有标题元素: <h1>, <h2>, <h3>, etc.
// 选取所有标题元素
$(':header')
- :visible / :hidden 选择所有可见 / 不可见的元素
// 选取所有隐藏的元素
$(':hidden')
- :not() 指定类型之外的所有元素。
// 选取除类为 "green" 的其它元素
$('*:not(.green)')
- :first-child/.last-child 选择第一个或最后一个子元素。
// 选取每个 div 元素的第一个子元素
$('div:first-child')
// 选取每个 ul 元素的最后一个子元素
$('ul:last-child')
- :nth-of-type(n) 指定一组类型过滤元素中的x个数。
// 选取4th p 元素
$('p:nth-of-type(4)')
- :animated 选取正在执行动画的元素。
// 选取所有正在执行动画的元素
$(':animated')
这里只列举了部分更多例子,理论上讲 jQuery 的选择器可以匹配所有符合 CSS3 规范的样式选择器。需要进一步学习的话可以查阅jQuery官方文档。
上文介绍并不全面,可以参考jQuery官方文档学习更多内容:https://api.jquery.com/category/selectors/。
jQuery常用的选择器