jQuery 如何工作

jQueryjQueryBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

欢迎来到 jQuery 文档!本实验将向你介绍 jQuery。

根据你对 JavaScript、HTML、CSS 以及一般编程概念的经验,开始使用 jQuery 可能很容易,也可能具有挑战性。

需要了解的一件重要事情是,jQuery 只是一个 JavaScript 库。jQuery 的所有功能都是通过 JavaScript 来访问的,因此对 JavaScript 有扎实的掌握对于理解、构建和调试你的代码至关重要。虽然随着时间的推移,经常使用 jQuery 可以提高你对 JavaScript 的熟练程度,但如果没有对 JavaScript 的内置结构和语法的实用知识,很难开始编写 jQuery 代码。因此,如果你是 JavaScript 的新手,我们建议查看 Mozilla 开发者网络(MDN)上的 JavaScript 基础教程。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("`jQuery`")) -.-> jquery/EventHandlingGroup(["`Event Handling`"]) jquery/EventHandlingGroup -.-> jquery/event_methods("`Event Methods`") subgraph Lab Skills jquery/event_methods -.-> lab-153752{{"`jQuery 如何工作`"}} end

jQuery 如何工作

虚拟机中已提供 index.html

此文件将在环境初始化期间自动生成。如果未自动生成,请创建该文件并按上图所示编写函数。函数代码如下:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
  </head>
  <body>
    <p>jQuery</p>
    <script src="jquery.min.js"></script>
    <script>
      // 你的代码写在这里。
    </script>
  </body>
</html>

<script> 元素中的 src 属性必须指向 jQuery 的副本。从 下载 jQuery 页面下载一份 jQuery,并将 jquery.min.js 文件存储在与你的 HTML 文件相同的目录中。

注意:当你下载 jQuery 时,文件名可能包含版本号,例如 jquery-x.y.z.js。确保将此文件重命名为 jquery.js,或者更新 <script> 元素的 src 属性以匹配文件名。

在文档就绪时启动代码

为确保代码在浏览器完成加载文档后运行,许多 JavaScript 程序员将代码包装在 onload 函数中:

window.onload = function () {
  alert("welcome");
};

不幸的是,代码要等到所有图像(包括横幅广告)都下载完成后才会运行。为了在文档准备好被操作时立即运行代码,jQuery 有一个称为 就绪事件 的语句:

$(document).ready(function () {
  // 你的代码写在这里。
});

注意:jQuery 库通过 window 对象的两个属性 jQuery$ 来暴露其方法和属性。$ 只是 jQuery 的别名,通常使用它是因为它写起来更短更快。

例如,在就绪事件中,你可以为链接添加一个点击处理程序:

$(document).ready(function () {
  $("button").click(function () {
    $("p").text("Hello jQuery!");
  });
});

将上述 jQuery 代码复制到你的 HTML 文件中 // 你的代码写在这里 的位置。然后,保存你的 HTML 文件并在浏览器中重新加载测试页面。

完整示例

以下示例说明了上述讨论的点击处理代码,直接嵌入在 HTML <body> 中。请注意,在实际应用中,通常最好将代码放在一个单独的 JS 文件中,并使用 <script> 元素的 src 属性在页面上加载它。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
  </head>
  <body>
    <button>点击我</button>
    <p>Hello World</p>
    <script src="jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("button").click(function () {
          $("p").text("Hello jQuery!");
        });
      });
    </script>
  </body>
</html>

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后,你可以刷新 Web 8080 标签页来预览网页。

总结

恭喜你!你已经完成了“jQuery 如何工作”实验。要了解有关 jQuery API 的更多信息,请参阅官方的 jQuery 文档。

您可能感兴趣的其他 jQuery 教程