jquery的选择器
jQuery 选择器基本语法
jQuery 选择器基于 CSS 选择器语法扩展，用于快速定位 DOM 元素。基本语法为 $("selector") 或 jQuery("selector")，返回匹配元素的 jQuery 对象。
// 示例：选择所有段落元素
$("p").css("color", "red");基础选择器
-
元素选择器：通过标签名选择
$("div")选择所有<div>元素。 -
ID 选择器：通过
id属性选择$("#header")选择id="header"的元素。 -
类选择器：通过
class属性选择$(".active")选择所有class="active"的元素。 -
通配符选择器：选择所有元素
$("*")匹配页面所有元素。
层级选择器
-
后代选择器：选择嵌套元素
$("ul li")选择所有<ul>内的<li>。 -
子元素选择器：直接子元素
$("ul > li")仅选择<ul>的直接子级<li>。 -
相邻兄弟选择器：下一个同级元素
$("h1 + p")选择紧接在<h1>后的第一个<p>。 -
通用兄弟选择器：后续所有同级元素
$("h1 ~ p")选择<h1>之后的所有同级<p>。
属性选择器
-
存在性选择：包含指定属性
$("[href]")选择所有带href属性的元素。 -
精确匹配：属性值等于指定值
$("[type='text']")选择type="text"的元素。 -
前缀匹配：属性值以指定字符串开头
$("[class^='btn-']")选择class以"btn-"开头的元素。 -
后缀匹配：属性值以指定字符串结尾
$("[src$='.png']")选择src以".png"结尾的元素。 -
包含匹配：属性值包含指定子串
$("[title*='logo']")选择title包含"logo"的元素。
表单选择器
-
输入元素选择器
$(":input")选择所有<input>、<textarea>、<select>和<button>。 -
特定类型选择器
$(":text")选择type="text"的输入框；$(":checkbox")选择所有复选框；$(":radio")选择所有单选按钮。 -
状态选择器
$(":checked")选择被选中的复选框或单选按钮；$(":disabled")选择所有禁用的表单元素。
过滤选择器
-
首尾元素过滤
$("li:first")选择第一个<li>；$("li:last")选择最后一个<li>。 -
索引过滤
$("tr:eq(1)")选择索引为 1 的<tr>（从 0 开始）；$("tr:gt(2)")选择索引大于 2 的所有<tr>。 -
内容过滤
$("div:contains('Hello')")选择内容包含"Hello"的<div>；$("td:empty")选择内容为空的<td>。
可见性选择器
$("div:hidden")选择所有隐藏的<div>（包括display:none或type="hidden"）。$("div:visible")选择所有可见的<div>。
扩展方法
通过 .filter()、.find() 等方法进一步筛选：
// 筛选 class 为 'active' 的 div
$("div").filter(".active").hide();
// 在已选元素中查找子元素
$("#container").find("p").css("color", "blue");性能优化建议
- 优先使用 ID 选择器（
$("#id")），效率最高。 - 避免过度使用通配符或层级过深的选择器（如
$("body *")）。 - 对重复使用的选择器结果进行缓存：
const $elements = $(".items"); $elements.hide();
