Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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")

示例

当用户点击按钮时,具有类“test”的元素将被隐藏

示例

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
自己试试 »

jQuery 选择器的更多示例

语法 描述 示例
$("*") 选择所有元素 试试
$(this) 选择当前 HTML 元素 试试
$("p.intro") 选择所有具有类“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> 元素和类型为“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>


jQuery 练习

通过练习测试自己

练习

使用正确的 **选择器** 来隐藏所有 <p> 元素。

$("").hide();

开始练习


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.