jQuery常用的选择器

jQuery是一个常用的JavaScript库,它包含许多功能强大且易于使用的选择器。下面介绍一些jQuery中常用的选择器:

  1. 标签选择器

最普通的选择器就是标签选择器,可以通过输入HTML标记的名称来选定元素。

// 选择所有段落
$('p') 
  1. 类选择器

类选择器可以通过CSS样式表中定义的类名来选定元素。

// 选择具有 "blue" 类的所有元素
$('.blue')
  1. ID 选择器

ID 选择器可以通过HTML标记中定义的id属性来选定元素。

// 选取id为 "myDiv" 的元素
$('#myDiv')
  1. 属性选择器

属性选择器可以基于特定属性或属性值来选定元素。

// 选取href属性值以"http"开头的a元素
$('a[href^="http"]')  
  1. 子元素、后代及同级选择器

子元素选择器 (>) 选取作为另一个元素子级的元素。后代选择器(空格)则不考虑子/父关系,而选取任何在另一个元素内部的元素。同级元素选择器 (+) 和 ( ~ ) 则用于选择与某个元素处于相同层级的其他元素。

// 选取div直接下一级的所有span元素
$('div > span')

// 选取所有ul下的li
$('ul li') 

// 查找div元素之后的第一个p元素 
$('div + p')

// 查找div元素之后的所有p元素 
$('div ~ p')
  1. 过滤选择器

过滤选择器用于从一个现有的选择结果中再次过滤结果。例如,:first-selectors 只会选择每个匹配集中的第一个。

// 选取 ul 下的第一个 li 元素
$('ul li:first') 

// 选取倒数第二个 div 元素
$('div:nth-last-child(2)') 

// 选取所有包含 "C#" 文本的元素
$(':contains("C#")')  
  1. :input 选择所有输入字段: <input>, <textarea>, <select>, and <button>
// 选取表单中的所有输入框
$(':input')
  1. :checked 选择所有的被勾选的表单元素
// 选取所有被选中的复选框
$('input:checked')
  1. :header 选择所有标题元素: <h1>, <h2>, <h3>, etc.
// 选取所有标题元素
$(':header')
  1. :visible / :hidden 选择所有可见 / 不可见的元素
// 选取所有隐藏的元素
$(':hidden')
  1. :not() 指定类型之外的所有元素。
// 选取除类为 "green" 的其它元素
$('*:not(.green)')
  1. :first-child/.last-child 选择第一个或最后一个子元素。
// 选取每个 div 元素的第一个子元素
$('div:first-child')

// 选取每个 ul 元素的最后一个子元素
$('ul:last-child')
  1. :nth-of-type(n) 指定一组类型过滤元素中的x个数。
// 选取4th p 元素
$('p:nth-of-type(4)')
  1. :animated 选取正在执行动画的元素。
// 选取所有正在执行动画的元素 
$(':animated')

这里只列举了部分更多例子,理论上讲 jQuery 的选择器可以匹配所有符合 CSS3 规范的样式选择器。需要进一步学习的话可以查阅jQuery官方文档。

上文介绍并不全面,可以参考jQuery官方文档学习更多内容:https://api.jquery.com/category/selectors/。

作者

Nick

发布于

2023-06-15

更新于

2023-10-21

许可协议

评论