JQUERY 选择器

jQuery 选择器是一组强大的工具，允许你快速、灵活地选择页面上的 HTML 元素。以下是一些常用的 jQuery 选择器：

基本选择器：

• ID 选择器：通过元素的 ID 选择元素。

$('#myId');

• 类选择器：通过元素的类名选择元素。

$('.myClass');

• 标签选择器：通过 HTML 标签名选择元素。

$('p'); //选择所有段落元素

• 属性选择器：通过元素的属性选择元素。

$('a[href^="http"]'); //选择所有以 "http" 开头的 href 属性的 a 元素

层级选择器

• 后代选择器：选择指定元素的后代。

$('div p'); //选择所有在 div 元素内的段落元素

• 子选择器：选择直接子元素。

$('ul > li'); //选择所有直接在 ul 元素内的 li 元素

• 兄弟选择器：

//相邻兄弟选择器：选择紧接在指定元素后的兄弟元素。
$('a + b'); //选择所有紧随 a 元素之后的 b 元素

//通用兄弟选择器：选择指定元素之后的所有兄弟元素
$('a ~ b'); //选择所有 a 元素之后的所有 b 元素

过滤选择器

第一匹配选择器：选择一组元素中的第一个。

$('.myClass:first');

最后匹配选择器：选择一组元素中的最后一个。

$('.myClass:last');

偶数/奇数选择器：选择一组元素中的偶数或奇数位置的元素。

$('.myClass:nth-child(odd)'); // 选择所有奇数位置的元素
$('.myClass:nth-child(even)'); // 选择所有偶数位置的元素

可见/隐藏选择器：选择所有可见或隐藏的元素

$('.visible'); // 选择所有可见的元素
$('.hidden'); // 选择所有隐藏的元素

内容过滤选择器

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

$('a:contains("Click me")');

空元素选择器：选择所有没有子元素的元素。

$('p:empty');

表单选择器

• 表单元素选择器：选择所有表单元素。

$(':input'); // 选择所有表单输入元素

特定表单元素选择器：选择特定类型的表单元素。

$(':checkbox'); // 选择所有复选框

表单状态选择器：选择具有特定状态的表单元素。

$('#myForm :input:enabled'); // 选择表单中所有启用的输入元素
$('#myForm :input:disabled'); // 选择表单中所有禁用的输入元素

特殊选择器

表单提交元素选择器：选择所有提交按钮。

$(':submit'); // 选择所有提交按钮

表单重置元素选择器：选择所有重置按钮。

':reset'; // 选择所有重置按钮

已选择选择器：选择所有选中的选项。

$(':selected'); // 选择所有选中的选项

jQuery 选择器的强大之处在于它们可以组合使用，以实现复杂的选择逻辑。这使得开发者能够轻松地定位和操作页面上的元素。