jQuery 选择器

jQuery 选择器详解

jQuery 选择器是 jQuery 最强大的功能之一，它允许你快速、准确地选中 DOM 元素进行操作。jQuery 选择器基于 CSS 选择器，并扩展了一些特有的选择器。

一、基础选择器

1. ID 选择器

// 选择 id 为 "myId" 的元素$("#myId");

• 特点：唯一性，页面中只能有一个元素使用该 ID。
• 性能：最快，因为浏览器原生使用getElementById。

2. 类选择器

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

• 特点：可重复使用，一个类可应用于多个元素。
• 性能：较快，使用getElementsByClassName。

3. 标签选择器

// 选择所有 <p> 标签$("p");// 选择所有 <div> 标签$("div");

• 特点：选择所有指定标签的元素。
• 性能：较慢，使用getElementsByTagName。

4. 通配符选择器

// 选择所有元素$("*");

• 特点：选择页面中所有元素，通常用于初始化或全局操作。
• 性能：最慢，慎用。

5. 组合选择器

// 选择 id 为 "myId" 或 class 为 "myClass" 的元素$("#myId, .myClass");// 选择多个标签$("div, p, span");

二、层级选择器

1. 后代选择器

// 选择 "div" 元素内部所有的 "p" 元素（包括嵌套多层）$("div p");

2. 子元素选择器

// 选择 "div" 元素的直接子元素 "p"（不包括嵌套更深的 p）$("div > p");

3. 相邻兄弟选择器

// 选择紧接在 "h1" 元素之后的第一个 "p" 元素$("h1 + p");

4. 通用兄弟选择器

// 选择 "h1" 元素之后的所有同级 "p" 元素$("h1 ~ p");

三、过滤选择器

1. 基本过滤选择器

// 第一个匹配元素$("li:first");// 最后一个匹配元素$("li:last");// 指定索引的元素（从 0 开始）$("li:eq(2)");// 第 3 个 li// 索引大于指定值的元素$("li:gt(2)");// 索引 > 2 的 li// 索引小于指定值的元素$("li:lt(2)");// 索引 < 2 的 li// 奇数索引元素（从 0 开始，即第 2, 4, 6...个）$("li:odd");// 偶数索引元素（从 0 开始，即第 1, 3, 5...个）$("li:even");

2. 内容过滤选择器

// 包含指定文本的元素$("div:contains('Hello')");// 包含子元素的元素（非空元素）$("div:has(p)");// 有子元素的元素$("div:parent");// 没有子元素的元素$("div:empty");

3. 可见性过滤选择器

// 可见元素$("div:visible");// 隐藏元素$("div:hidden");

• 注意：display: none、visibility: hidden或opacity: 0的元素都被视为隐藏。

4. 属性过滤选择器

// 有指定属性的元素$("input[name]");// 属性值等于指定值的元素$("input[name='username']");// 属性值不等于指定值的元素$("input[name!='username']");// 属性值以指定值开头的元素$("input[name^='user']");// 属性值以指定值结尾的元素$("input[name$='name']");// 属性值包含指定值的元素$("input[name*='ser']");// 属性值等于指定值或多个值的元素（多选框）$("input[name='newsletter']:checkbox[value='news']");

5. 子元素过滤选择器

// 第一个子元素$("li:first-child");// 最后一个子元素$("li:last-child");// 第 n 个子元素（从 1 开始）$("li:nth-child(2)");// 偶数子元素$("li:nth-child(even)");// 奇数子元素$("li:nth-child(odd)");// 只包含一个子元素的元素$("div:only-child");

四、表单选择器

1. 表单元素类型选择器

// 所有 input, textarea, select, button 元素$(":input");// 所有 input 元素$(":input[type='text']");// 所有文本框$(":text");// 所有密码框$(":password");// 所有单选框$(":radio");// 所有复选框$(":checkbox");// 所有提交按钮$(":submit");// 所有重置按钮$(":reset");// 所有按钮$(":button");// 所有文件上传框$(":file");// 所有图像域$(":image");

2. 表单状态选择器

// 可用的表单元素$(":enabled");// 禁用的表单元素$(":disabled");// 选中的单选框或复选框$(":checked");// 选中的下拉选项$(":selected");

五、选择器组合使用示例

1. 复杂选择

// 选择 class 为 "container" 的 div 中，所有 class 为 "item" 且可见的 p 元素$("div.container p.item:visible");// 选择 id 为 "list" 的 ul 中，所有奇数索引的 li 元素$("#list li:odd");// 选择所有 name 属性以 "user" 开头且未被禁用的 input 元素$("input[name^='user']:enabled");

2. 链式选择

// 先选择所有 div，再过滤出 class 为 "active" 的$("div").filter(".active");// 先选择所有 p，再排除 class 为 "hidden" 的$("p").not(".hidden");// 先选择所有 li，再获取第一个$("li").first();

六、性能优化建议

1. 优先使用 ID 选择器

// ✅ 推荐：最快$("#myId");// ❌ 不推荐：较慢$("div#myId");

2. 避免过度使用通配符

// ❌ 性能差：选择所有元素$("*").filter(".active");// ✅ 性能好：直接选择$(".active");

3. 使用上下文参数

// ✅ 推荐：限制搜索范围$(".item","#container");// 等同于 $("#container .item")// ❌ 不推荐：全局搜索$(".item");

4. 缓存选择器

// ❌ 低效：每次循环都重新选择for(vari=0;i<100;i++){$(".item").addClass("active");}// ✅ 高效：缓存选择器var$items=$(".item");for(vari=0;i<100;i++){$items.addClass("active");}

七、常见陷阱与注意事项

1. 选择器字符串格式

// ✅ 正确$("#myId");$(".myClass");// ❌ 错误：ID 选择器不能有空格$("# myId");// 错误// ❌ 错误：类选择器不能有空格$(". myClass");// 错误

2. 特殊字符转义

// 如果 ID 或 class 包含特殊字符，需要转义$("#my\\#id");// 选择 id 为 "my#id" 的元素$(".my\\.class");// 选择 class 为 "my.class" 的元素

3. 选择器大小写

// jQuery 选择器是大小写敏感的$("#myId");// 正确$("#myid");// 错误，如果实际 ID 是 "myId"

4. 空选择器

// 如果选择器没有匹配到任何元素，返回空 jQuery 对象var$empty=$("#nonExistent");console.log($empty.length);// 0console.log($empty);// jQuery 对象，但长度为 0

八、选择器速查表

九、实战示例

1. 表单验证

// 检查所有必填字段是否为空$("input[required]:not(:filled)").addClass("error");// 检查所有选中的复选框varcheckedCount=$("input[type='checkbox']:checked").length;

2. 动态列表操作

// 删除所有奇数行的表格行$("tr:odd").remove();// 高亮包含特定文本的单元格$("td:contains('Error')").addClass("highlight");

3. 导航菜单

// 激活当前页面的菜单项$("a[href='"+window.location.pathname+"']").addClass("active");// 展开所有包含子菜单的父菜单项$("li:has(ul)").addClass("has-submenu");

jQuery 选择器功能强大且灵活，熟练掌握这些选择器可以大大提高开发效率。在实际项目中，建议根据具体场景选择最合适的选择器，并注意性能优化。