概述

优质

小牛编辑

141浏览

2023-12-01

什么是jQuery？

jQuery是一个快速而简洁的JavaScript库，由John Resig在2006年创建，其中有一个很好的座右铭: Write less, do more 。 jQuery简化了HTML文档遍历，事件处理，动画和Ajax交互，以实现快速Web开发。 jQuery是一个JavaScript工具包，旨在通过编写更少的代码来简化各种任务。以下是jQuery支持的重要核心功能列表 -

DOM manipulation - 通过使用名为Sizzle跨浏览器开源选择器引擎，jQuery可以轻松选择DOM元素，协商它们并修改其内容。
Event handling - jQuery提供了一种捕获各种事件的优雅方式，例如用户单击链接，而不需要使用事件处理程序来混淆HTML代码本身。
AJAX Support - jQuery可以帮助您使用AJAX技术开发响应迅速且功能丰富的站点。
Animations - jQuery带有大量内置动画效果，您可以在您的网站中使用它们。
Lightweight - jQuery是非常轻量级的库 - 大小约为19KB（Minified和gzipped）。
Cross Browser Support - jQuery具有跨浏览器支持，适用于IE 6.0 +，FF 2.0 +，Safari 3.0 +，Chrome和Opera 9.0+
Latest Technology - jQuery支持CSS3选择器和基本XPath语法。

如何使用jQuery？

有两种方法可以使用jQuery。

Local Installation - 您可以在本地计算机上下载jQuery库并将其包含在HTML代码中。
CDN Based Version - 您可以直接从Content Delivery Network（CDN）将jQuery库包含到HTML代码中。

本地安装 (Local Installation)

转到https://jquery.com/download/下载最新版本。
现在将下载的jquery-2.1.3.min.js文件放在您网站的目录中，例如/ jquery。

例子 (Example)

现在，您可以在HTML文件中包含jquery库，如下所示 -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

CDN Based Version

您可以直接从Content Delivery Network（CDN）将jQuery库包含到HTML代码中。 Google和Microsoft为最新版本提供内容交付。

在本教程中，我们使用的是Google CDN版本的库。

例子 (Example)

现在让我们使用Google CDN中的jQuery库重写上面的示例。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
   <body>
      <h1>Hello</h1>
   </body>
</html>

如何调用jQuery库函数？

几乎所有事情，我们都在使用jQuery读取或操作文档对象模型（DOM）时，我们需要确保在DOM准备好后立即开始添加事件等。

如果您希望事件在您的页面上运行，您应该在$（document）.ready（）函数内调用它。在加载DOM之后和加载页面内容之前，其中的所有内容都将加载。

为此，我们为文档注册一个ready事件，如下所示 -

$(document).ready(function() {
   // do stuff when DOM is ready
});

要调用任何jQuery库函数，请使用HTML脚本标记，如下所示 -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

如何使用自定义脚本？

最好在自定义JavaScript文件中编写自定义代码: custom.js ，如下所示 -

/* Filename: custom.js */
$(document).ready(function() {
   $("div").click(function() {
      alert("Hello, world!");
   });
});

现在我们可以在我们的HTML文件中包含custom.js文件，如下所示 -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

使用多个库

您可以一起使用多个库，而不会相互冲突。例如，您可以一起使用jQuery和MooTool javascript库。您可以查看jQuery noConflict方法以获取更多详细信息。

接下来是什么？ (What is Next ?)

如果你不理解上面的例子，不要太担心。您将在后续章节中很快掌握它们。

下一章将尝试涵盖传统JavaScript中的一些基本概念。