jquery选择

jQuery 选择器基础

jQuery 选择器是 jQuery 的核心功能之一，用于选取 HTML 元素并对其进行操作。选择器基于 CSS 选择器语法，并扩展了更多功能。

基本语法：

$(selector).action()

• $ 是 jQuery 的别名。
• selector 用于查找 HTML 元素。
• action() 是对元素执行的操作。

常用选择器类型

元素选择器 通过元素名称选取元素。

$("p") // 选取所有 <p> 元素

ID 选择器 通过元素的 ID 属性选取元素。

$("#myId") // 选取 ID 为 "myId" 的元素

类选择器 通过元素的 class 属性选取元素。

$(".myClass") // 选取所有 class 为 "myClass" 的元素

属性选择器 通过元素的属性选取元素。

$("[href]") // 选取所有带有 href 属性的元素
$("[type='text']") // 选取所有 type 属性为 "text" 的元素

组合选择器 将多个选择器组合使用。

$("p.intro") // 选取所有 class 为 "intro" 的 <p> 元素
$("div, p") // 选取所有 <div> 和 <p> 元素

层级选择器

后代选择器 选取指定元素的后代元素。

$("div p") // 选取 <div> 元素内的所有 <p> 元素

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

$("div > p") // 选取 <div> 元素的直接子元素 <p>

相邻兄弟选择器 选取指定元素的下一个兄弟元素。

$("div + p") // 选取紧接在 <div> 元素后的 <p> 元素

通用兄弟选择器 选取指定元素之后的所有兄弟元素。

$("div ~ p") // 选取 <div> 元素之后的所有 <p> 兄弟元素

过滤选择器

首尾元素过滤

$("p:first") // 选取第一个 <p> 元素
$("p:last") // 选取最后一个 <p> 元素

索引过滤

$("p:eq(1)") // 选取索引为 1 的 <p> 元素（从 0 开始）
$("p:gt(2)") // 选取索引大于 2 的 <p> 元素
$("p:lt(2)") // 选取索引小于 2 的 <p> 元素

内容过滤

$("p:contains('text')") // 选取包含文本 "text" 的 <p> 元素
$("p:empty") // 选取没有子元素的 <p> 元素
$("p:has(span)") // 选取包含 <span> 元素的 <p> 元素

表单选择器

表单元素选择

$(":input") // 选取所有 input、textarea、select 和 button 元素
$(":text") // 选取所有 type="text" 的 input 元素
$(":password") // 选取所有 type="password" 的 input 元素
$(":radio") // 选取所有 type="radio" 的 input 元素
$(":checkbox") // 选取所有 type="checkbox" 的 input 元素
$(":submit") // 选取所有 type="submit" 的 input 元素

表单状态选择

$(":checked") // 选取所有被选中的复选框或单选按钮
$(":selected") // 选取所有被选中的 option 元素
$(":disabled") // 选取所有被禁用的元素
$(":enabled") // 选取所有可用的元素

选择器性能优化

避免使用通用选择器 *，因为它会遍历所有元素。

$("*") // 不推荐，性能较差

尽量缩小选择范围，优先使用 ID 或 class 选择器。

$("#container .item") // 优于 $(".item")

缓存选择器结果以减少 DOM 查询次数。

var $items = $(".item");
$items.hide();
$items.show();

动态选择器

使用变量构建选择器。

var className = "myClass";
$("." + className).css("color", "red");

使用 filter() 方法进一步过滤选择结果。

$("div").filter(".highlight").css("background", "yellow");

选择器链式操作

jQuery 支持链式调用，可以在一个语句中对同一组元素执行多个操作。

$("p").css("color", "red").slideUp(2000).slideDown(2000);