jQuery 选择器

jQuery 选择器是 jQuery 库中最重要的部分之一。

jQuery 选择器

jQuery 选择器允许您选取和操作 HTML 元素。

jQuery 选择器用于根据元素的名称、id、类、类型、属性、属性值等来查找（或选取）HTML 元素。它基于现有的 CSS 选择器，此外还有一些自定义的选择器。

jQuery 中的所有选择器都以美元符号和括号开头：$()。

元素选择器

jQuery 元素选择器根据元素名称选取元素。

您可以像这样选取页面上的所有 <p> 元素：

$("p")

实例

当用户点击按钮时，所有 <p> 元素将被隐藏：

实例

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

亲自试一试

#id 选择器

jQuery 的 #id 选择器使用 HTML 标签的 id 属性来查找特定的元素。

在一张页面中，id 应该是唯一的，因此当您想要查找单个、唯一的元素时，应该使用 #id 选择器。

要查找具有特定 id 的元素，请写上井号（#），后面跟上 HTML 元素的 id：

$("#test")

实例

当用户点击按钮时，id="test" 的元素将被隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

亲自试一试

.class 选择器

jQuery 的 .class 选择器查找具有特定类的元素。

要查找具有特定类的元素，请写上句点（.），后面跟上类的名称：

$(".test")

实例

当用户点击按钮时，所有 class="test" 的元素将被隐藏：

实例

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

亲自试一试

更多 jQuery 选择器实例

语法	描述	例子
`$("*")`	选取所有元素。	试一试
`$(this)`	选取当前 HTML 元素。	试一试
`$("p.intro")`	选取所有 `class="intro"` 的 `<p>` 元素。	试一试
`$("p:first")`	选取第一个 `<p>` 元素。	试一试
`$("ul li:first")`	选取第一个 `<ul>` 中的第一个 `<li>` 元素。	试一试
`$("ul li:first-child")`	选取每个 `<ul>` 中的第一个 `<li>` 元素。	试一试
`$("[href]")`	选取所有带有 `href` 属性的元素。	试一试
`$("a[target='_blank']")`	选取所有 `target` 属性值等于 `"_blank"` 的 `<a>` 元素。	试一试
`$("a[target!='_blank']")`	选取所有 `target` 属性值不等于 `"_blank"` 的 `<a>` 元素。	试一试
`$(":button")`	选取所有 `<button>` 元素和 `type="button"` 的 `<input>` 元素。	试一试
`$("tr:even")`	选取所有偶数位置的 `<tr>` 元素。	试一试
`$("tr:odd")`	选取所有奇数位置的 `<tr>` 元素。	试一试

请使用我们的 jQuery 选择器测试工具来演示不同的选择器。

有关所有 jQuery 选择器的完整参考，请访问我们的 jQuery 选择器参考手册。

将函数放在单独的文件中

如果您的网站包含大量页面，并且希望 jQuery 函数易于维护，可以将 jQuery 函数放在一个单独的 .js 文件中。

在本教程中演示 jQuery 时，函数已直接添加到 <head> 部分中。然而，有时最好将它们放在单独的文件中，如下所示（使用 src 属性引用 .js 文件）：

实例

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>