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[nameusername]);// 属性值不等于指定值的元素$(input[name!username]);// 属性值以指定值开头的元素$(input[name^user]);// 属性值以指定值结尾的元素$(input[name$name]);// 属性值包含指定值的元素$(input[name*ser]);// 属性值等于指定值或多个值的元素多选框$(input[namenewsletter]:checkbox[valuenews]);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[typetext]);// 所有文本框$(: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(vari0;i100;i){$(.item).addClass(active);}// ✅ 高效缓存选择器var$items$(.item);for(vari0;i100;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 是 myId4. 空选择器// 如果选择器没有匹配到任何元素返回空 jQuery 对象var$empty$(#nonExistent);console.log($empty.length);// 0console.log($empty);// jQuery 对象但长度为 0八、选择器速查表类型语法说明ID#id选择指定 ID 的元素Class.class选择指定 class 的元素Tagtag选择指定标签的元素后代ancestor descendant选择后代元素子元素parent child选择直接子元素相邻prev next选择紧接的兄弟元素通用兄弟prev ~ siblings选择所有同级元素:first:first第一个匹配元素:last:last最后一个匹配元素:eq:eq(index)指定索引的元素:gt:gt(index)索引大于指定值的元素:lt:lt(index)索引小于指定值的元素:contains:contains(text)包含指定文本的元素:has:has(selector)包含指定子元素的元素:visible:visible可见元素:hidden:hidden隐藏元素:enabled:enabled可用表单元素:disabled:disabled禁用表单元素:checked:checked选中的单选/复选框:selected:selected选中的下拉选项九、实战示例1. 表单验证// 检查所有必填字段是否为空$(input[required]:not(:filled)).addClass(error);// 检查所有选中的复选框varcheckedCount$(input[typecheckbox]:checked).length;2. 动态列表操作// 删除所有奇数行的表格行$(tr:odd).remove();// 高亮包含特定文本的单元格$(td:contains(Error)).addClass(highlight);3. 导航菜单// 激活当前页面的菜单项$(a[hrefwindow.location.pathname]).addClass(active);// 展开所有包含子菜单的父菜单项$(li:has(ul)).addClass(has-submenu);jQuery 选择器功能强大且灵活熟练掌握这些选择器可以大大提高开发效率。在实际项目中建议根据具体场景选择最合适的选择器并注意性能优化。