学习 jQuery 选择器：选择和操作 DOM 元素的基石

2023-11-05 12:24:42

jQuery 是一个功能无比，并且用处极广的 JavaScript 库，它极大地方便了我们与 DOM（document object model，或者译作“D ocument O bject M odel，文本文档对象模型 ”）的交互。其中，选择器无疑是 jQuery 的基石，它允许我们根据各种标准精准定位 DOM 元素。本篇教程将带你踏上探索 jQuery 选择器奇妙旅程的第一步，助你掌握选择和操作 DOM 元素的基础。

选择器语法

jQuery 选择器语法遵循 CSS 选择器语法，由一个或多个选择器组合而成，每个选择器代表一个特定的 DOM 元素或元素组。最基本的语法如下：

$(选择器)

其中，“$” 符号代表 jQuery 函数，而**“选择器”** 可以是：

元素名称 （例如，$("div")）
类名（例如，$(".my-class")）
ID （例如，$("#my-id")）
标签名称 （例如，$("input[type=checkbox]"))

多个选择器可以组合使用，用逗号分隔。例如，以下选择器将选择所有具有 "my-class" 类和 "special" ID 的 div 元素：

$("div.my-class#special")

常用选择器

以下是一些最常用的 jQuery 选择器：

$("*")： 选择所有元素**
**(element)** ：选择具有指定元素名称的元素（例如，("div")）
**(".class")：** 选择具有指定类名的元素（例如，(".my-class")）
**("#id")：** 选择具有指定 ID 的元素（例如，("#my-id")）
**("tag[attribute]）：** 选择具有指定属性的元素（例如，("input[type=checkbox]"))
**(":first")：** 选择第一个元素（例如，("li:first"))
**(":last")：** 选择最后一个元素（例如，("li:last"))
**(":even")：** 选择偶数个元素（例如，("li:even"))
**(":odd")：** 选择奇数个元素（例如，("li:odd"))

选择器进阶

除了基本选择器外，jQuery 还提供了许多更复杂的表达式，允许我们对选择更加精细的控制。例如：

子代选择器： 用于选择父元素内的子元素（例如，$("div p"))
后代选择器： 用于选择所有后代元素（例如，$("div *"))
属性选择器： 用于根据属性值选择元素（例如，$("input[type=text]"))
伪类选择器： 用于根据元素的状态或行为选择元素（例如，$(":hover"))

选择器操作

一旦我们使用选择器定位了 DOM 元素，我们就可以使用 jQuery 方法对其进行各种操作。以下是一些最常用的操作：

$.hide()： 隐藏元素
$.show()： 显示元素
$.toggle()： 在隐藏和显示之间切换元素
$.addClass()： 添加一个或多个类到元素
$.removeClass()： 从元素中删除一个或多个类
$.toggleClass()： 添加或删除一个类，具体取决于元素的当前状态
$.text()： 获取或设置元素的文本内容
$.val()： 获取或设置表单输入元素的值

举例说明

为了演示 jQuery 选择器和操作的实际应用，我们来看一个示例：

<!DOCTYPE html>
<html>
<head>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>jQuery 选择器示例</h1>
  <ul>
    <li id="item1">项目 1</li>
    <li class="item2">项目 2</li>
    <li class="item3">项目 3</li>
    <li class="item4">项目 4</li>
    <li class="item5">项目 5</li>
  </ul>

  <button id="highlight-btn">高亮偶数项</button>

  <script>
    $(document).ready(function() {
      $("#highlight-btn").click(function() {
        $("li:even").addClass("highlight");
      });
    });
  </script>
</body>
</html>