jquery元素选择器
jQuery 元素选择器基础
jQuery 使用 CSS 风格的选择器来选取 DOM 元素，核心语法基于 $() 或 jQuery() 函数。以下是最常用的元素选择器：
// 选取所有 <p> 元素
$("p")
// 选取 ID 为 "myId" 的元素
$("#myId")
// 选取 class 为 "myClass" 的元素
$(".myClass")组合选择器
通过组合不同类型的选择器实现更精确的定位：
// 选取所有带有 class="menu" 的 <ul> 元素
$("ul.menu")
// 选取 <div> 内所有 class="item" 的子元素
$("div .item")
// 同时选取 <h1> 和 <h2> 元素
$("h1, h2")属性选择器
通过元素的属性进行筛选：
// 选取所有带有 href 属性的 <a> 元素
$("a[href]")
// 选取 href 值等于 "example.com" 的链接
$("a[href='example.com']")
// 选取 href 以 "https" 开头的链接
$("a[href^='https']")
// 选取 href 包含 "google" 的链接
$("a[href*='google']")层级选择器
利用 DOM 层级关系定位元素：
// 选取 <ul> 的直接子元素 <li>
$("ul > li")
// 选取紧邻在 <h2> 后的同级 <p> 元素
$("h2 + p")
// 选取 <h2> 之后所有的同级 <p> 元素
$("h2 ~ p")表单选择器
专为表单元素优化的选择器：
// 选取所有文本框
$(":text")
// 选取所有选中的复选框
$(":checkbox:checked")
// 选取提交按钮
$(":submit")
// 选取禁用的表单元素
$(":disabled")过滤选择器
对已选元素进行二次筛选：
// 选取第一个 <li> 元素
$("li:first")
// 选取最后一个匹配的元素
$("li:last")
// 选取索引为偶数的元素
$("li:even")
// 选取包含特定文本的元素
$("p:contains('Hello')")
// 选取可见的 <div> 元素
$("div:visible")遍历方法
通过 DOM 遍历进一步定位元素：
// 获取父元素
$("span").parent()
// 获取所有祖先元素
$("li").parents("ul")
// 查找子元素中 class="active" 的
$("#nav").find(".active")
// 过滤当前选中的元素
$("div").filter(".important")性能优化建议
避免过度复杂的选择器，优先使用 ID 和 class。缓存重复使用的选择器结果：
// 不佳：每次调用都重新查询 DOM
$(".item").hide();
$(".item").show();
// 优化：缓存选择器结果
const $items = $(".item");
$items.hide();
$items.show();
