jQuery 选择器

理解 jQuery 选择器

jQuery 选择器是一个基础功能，它允许你高效地查找网页上的 HTML 元素并与之交互。

什么是 jQuery 选择器？

jQuery 选择器提供了一种强大的方法，可以从 文档对象模型（Document Object Model, DOM） 中选择特定的 HTML 元素。选中后，你可以操作这些元素（例如，改变样式 style、内容 content 或行为 behavior）。

选择器主要使用基于标准 CSS 选择器（如元素名、ID、类、属性）的语法 syntax，但也包含自定义的 jQuery 扩展，用于更高级的选择。这使得熟悉 CSS 的人很容易上手。

所有的 jQuery 选择器都以美元符号 $ 开头，后跟括号 ()，括号内包含选择器字符串：$(selector)。这个 $ 函数 function 是 jQuery 的别名 alias。

注意：现代 JavaScript 提供了内置方法 methods，如 document.querySelector() 和 document.querySelectorAll()，它们无需 jQuery 库 library 即可提供类似功能。然而，jQuery 选择器仍然简洁强大，尤其是在已经使用 jQuery 的项目中 projects。

元素选择器

选择所有匹配特定 HTML 标签名的元素。

选择页面上所有 <p>（段落）元素：

$(“p”)

示例：当按钮 button 被点击 clicked 时，隐藏所有段落 paragraphs。

// 等待 DOM 完全加载
$(function() {
  // 选择按钮并附加点击事件处理程序
  $("button").on('click', function() {
    // 选择所有段落元素并隐藏它们
    $("p").hide();
  });
});

最佳实践：使用 $(function() { ... }); 是 $(document).ready(function() { ... }); 的现代简写方式。使用 .on('click', ...) 是附加事件监听器 event listeners 的首选方法。

ID 选择器 (#id)

根据元素的唯一 id 属性 attribute 选择单个元素。

在 HTML 文档 document 中，id 应该是唯一的。当你需要定位某个特定元素时，使用 ID 选择器。

查找 id="main-content" 的元素 element，使用井号 (#) 后跟 ID 名称：

$(“#main-content”)

示例：当按钮 button 被点击 clicked 时，隐藏 id="test" 的元素。

$(function() {
  $("button").on('click', function() {
    // 根据 ID 选择元素并隐藏它
    $("#test").hide();
  });
});

类选择器 (.class)

选择所有具有特定 class 属性的元素。

查找 class="highlight" 的元素 elements，使用句号 (.) 后跟类名：

$(“.highlight”)

示例：当按钮 button 被点击 clicked 时，隐藏所有具有 class="test" 的元素。

$(function() {
  $("button").on('click', function() {
    // 选择所有具有 'test' 类的元素并隐藏它们
    $(".test").hide();
  });
});

更多 jQuery 选择器示例

jQuery 支持多种多样的选择器 selectors，结合了 CSS 标准 standards 和自己的扩展 extensions：

• $("*")：选择页面上的所有元素 elements。由于性能 performance 影响，请谨慎使用。
• $(this)：在事件处理程序 event handler 内部，选择触发事件 event 的那个 HTML 元素 element。
• $("p.intro")：选择所有具有 intro 类的 <p> 元素。
• $("p:first")：选择文档 document 中找到的第一个 <p> 元素。
• $("ul li:first-child")：选择 每个 <ul> 内部的第一个 <li> 元素。
• $("ul li:first")：仅选择找到的 第一个 <ul> 中的第一个 <li> 元素。
• $("[href]")：选择所有具有 href 属性 attribute 的元素（例如，<a>，<link>）。
• $("a[target='_blank']")：选择所有 target 属性恰好为 _blank 的 <a> 元素。
• $("a[target!='_blank']")：选择所有 target 属性 不 等于 _blank 的 <a> 元素。
• $(":button")：选择所有 <button> 元素和 type="button" 的 <input> 元素。
• $("tr:even")：选择索引 index 为偶数的表格行 (<tr>)，从索引 0 开始 (0, 2, 4…)。常用于实现斑马条纹表格 zebra-striping tables 效果。
• $("tr:odd")：选择索引 index 为奇数的表格行 (<tr>) (1, 3, 5…)。
• $("p:contains('Hello')")：选择所有包含文本 text ‘Hello’ 的 <p> 元素。
• $("input:visible")：选择所有当前可见 visible 的 <input> 元素。

有关完整列表 list，请参阅官方 official 的 jQuery Selectors 文档 documentation。

将代码组织到单独文件中

为了更好的可维护性 maintainability 和组织性 organization，尤其是在大型项目中 projects，将你的 jQuery（和一般的 JavaScript）代码放在单独的 .js 文件中。

不要将脚本 scripts 直接嵌入 <head> 或 <body> 中，而是使用 <script> 标签 tag 的 src 属性 attribute 链接 link 到外部文件 external file。确保在你的自定义脚本文件 custom script file 之前 加载 jQuery 库 library。

<head>
  <!-- 从 CDN（内容分发网络 Content Delivery Network）加载 jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
          integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
          crossorigin="anonymous"></script>

  <!-- 加载你的自定义脚本文件 -->
  <script src="scripts/my_jquery_functions.js"></script>
</head>

建议使用 CDN 加载像 jQuery 这样的库 libraries，因为它可以利用浏览器缓存 browser caching 和分布式服务器 distributed servers 来加快加载速度 loading。