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,您可以选择(查询)HTML 元素并在其上执行“操作”。


jQuery 语法

jQuery 语法专为选择 HTML 元素并在所选元素上执行某些操作而设计。

基本语法为:$(选择器).操作()

  • $ 符号用于定义/访问 jQuery
  • 选择器)用于“查询(或查找)”HTML 元素
  • jQuery 操作() 用于在元素上执行的操作

示例

$(this).hide() - 隐藏当前元素。

$("p").hide() - 隐藏所有 <p> 元素。

$(".test").hide() - 隐藏所有具有 class="test" 的元素。

$("#test").hide() - 隐藏 id 为 "test" 的元素。

您熟悉 CSS 选择器吗?

jQuery 使用 CSS 语法来选择元素。您将在本教程的下一章中详细了解选择器语法。

提示:如果您不了解 CSS,可以阅读我们的 CSS 教程


文档就绪事件

您可能已经注意到,我们示例中的所有 jQuery 方法都位于文档就绪事件中

$(document).ready(function(){

  // jQuery 方法在此处...

});

这样做是为了防止在文档加载完成(准备就绪)之前运行任何 jQuery 代码。

在处理文档之前等待文档完全加载并准备就绪是一个好习惯。这还允许您在文档的头部(head 部分)中放置 JavaScript 代码,而不是在文档主体(body 部分)中。

以下是一些示例,说明如果在文档完全加载之前运行方法可能会导致失败的操作

  • 尝试隐藏尚未创建的元素
  • 尝试获取尚未加载的图像的大小

提示:jQuery 团队还为文档就绪事件创建了一种更简短的方法

$(function(){

  // jQuery 方法在此处...

});

使用您喜欢的语法。我们认为在阅读代码时,文档就绪事件更容易理解。


×

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.