jquery 选择器

jQuery 选择器基础语法

jQuery 选择器基于 CSS 选择器语法扩展，用于快速定位 DOM 元素。基本结构为 $("selector") 或 jQuery("selector")，返回一个包含匹配元素的 jQuery 对象。

// 选择所有段落元素
$("p").css("color", "red");

// 选择 ID 为 myId 的元素
$("#myId").hide();

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

常用选择器类型

元素选择器
通过 HTML 标签名选择元素：

$("div") // 选择所有 <div> 元素

ID 选择器
通过元素的 id 属性选择：

$("#header") // 选择 id="header" 的元素

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

$(".btn") // 选择 class 包含 "btn" 的元素

属性选择器
通过元素的属性筛选：

$("[type='text']") // 选择 type="text" 的元素
$("[href^='https']") // 选择 href 以 https 开头的元素

层级与组合选择器

后代选择器
选择嵌套在指定元素内的所有后代：

$("ul li") // 选择 <ul> 内所有 <li>

子元素选择器
仅选择直接子元素：

$("ul > li") // 仅选择 <ul> 的直接子级 <li>

并集选择器
同时匹配多个选择器：

$("div, p, .class") // 选择所有 <div>、<p> 和 class="class" 的元素

过滤器与伪类选择器

基本过滤器
通过位置或状态筛选：

$("li:first") // 选择第一个 <li>
$("tr:even") // 选择偶数行 <tr>
$("input:checked") // 选择已勾选的复选框

内容过滤器
根据元素内容或子元素匹配：

$("div:contains('text')") // 选择包含 "text" 文本的 <div>
$("td:empty") // 选择内容为空的 <td>

表单相关选择器

表单元素选择器
针对表单控件的快捷选择方式：

$(":input") // 选择所有 <input>、<select>、<textarea> 等
$(":text") // 选择 type="text" 的输入框
$(":submit") // 选择提交按钮

方法链式操作

jQuery 选择器支持链式调用，可在单个语句中执行多个操作：

$("div")
  .addClass("highlight")
  .css("border", "1px solid red")
  .fadeOut(1000);

性能优化建议

• 优先使用 ID 选择器（#id），其速度最快。
• 缓存重复使用的选择器结果：

  const $elements = $(".list-item");
  $elements.hide();
  $elements.addClass("active");

• 避免过度使用通用选择器（如 *）或复杂层级嵌套。

与其他库冲突处理

若页面中存在多个库使用 $ 符号，可通过 jQuery.noConflict() 释放 $ 的控制权：

const jq = jQuery.noConflict();
jq("div").hide();