jQuery 选择器

jQuery 选择器是 jQuery 库中的一个核心特性，它允许开发者轻松地选择 HTML 元素并添加特定的事件和样式。 jQuery 提供了广泛的选择器，包括基本选择器、层次选择器、过滤选择器和表单选择器等多种类型。

基本选择器

元素选择器

元素选择器允许您选择指定类型的元素，例如 div、p、img 等。

$('div') // 选择所有的 div 元素

ID 选择器

ID 选择器允许您选择具有指定 ID 属性的元素。

$('#myDiv') // 选择具有 ID 为 myDiv 的元素

类选择器

类选择器允许您选择具有指定类的元素。

$('.myClass') // 选择具有 class 为 myClass 的元素

层次选择器

层次选择器允许您通过元素之间的层级关系选择元素。

后代选择器

后代选择器选择指定元素的所有后代元素。

$('div p') // 选择所有的 div 元素的后代中的所有 p 元素

子代选择器

子代选择器选择指定元素的直接子元素。

$('div > p') // 选择所有的 div 元素的直接子元素中的所有 p 元素

相邻兄弟选择器

相邻兄弟选择器选择指定元素之后的紧邻兄弟元素。

$('h2 + p') // 选择所有的 h2 元素后面的相邻 p 元素

全部兄弟选择器

全部兄弟选择器选择指定元素之后的所有兄弟元素。

$('h2 ~ p') // 选择所有的 h2 元素后面的所有兄弟 p 元素

过滤选择器

过滤选择器允许您通过不同的筛选条件选择元素。

第一个元素

选择指定元素集合中的第一个元素。

$('div:first') // 选择第一个 div 元素

最后一个元素

选择指定元素集合中的最后一个元素。

$('div:last') // 选择最后一个 div 元素

奇数元素

选择指定元素集合中的所有奇数元素。

$('tr:odd') // 选择所有奇数行的 tr 元素

偶数元素

选择指定元素集合中的所有偶数元素。

$('tr:even') // 选择所有偶数行的 tr 元素

第一个子元素

选择指定元素的第一个子元素。

$('ul li:first-child') // 选择每个 ul 元素下的第一个 li 元素

最后一个子元素

选择指定元素的最后一个子元素。

$('ul li:last-child') // 选择每个 ul 元素下的最后一个 li 元素

包含指定文本的元素

选择包含指定文本的元素。

$('div:contains("Hello World")') // 选择所有包含 "Hello World" 文本的 div 元素

表单选择器

表单选择器允许您选择表单控件。

输入框

选择所有的文本框、密码框、文本域和隐藏域。

$('input:text, input:password, textarea, input:hidden') // 选择所有文本框、密码框、文本域和隐藏域

单选按钮和复选框

选择所有的单选按钮和复选框。

$('input:radio, input:checkbox') // 选择所有单选按钮和复选框

选中的元素

选择所有已被选中的元素。

$('input:checked') // 选择所有已被选中的单选按钮和复选框

启用的元素

选择所有已启用的元素。

$('input:enabled') // 选择所有已启用的表单元素

禁用的元素

选择所有已禁用的元素。

$('input:disabled') // 选择所有已禁用的表单元素