Jquery 简明教程

jQuery - Overview

jQuery 是 John Resig 在 2006 年创建的一个快速简洁的 JavaScript 库，其座右铭 lautet Write less, do more 。jQuery 简化了 HTML 文档遍历、事件处理、动画制作以及 Ajax 交互，加快 Web 开发。

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

jQuery Features

jQuery 通过编写较少的代码简化了程序员的各种任务。以下是 jQuery 支持的重要核心功能列表 −

jQuery simplifies various tasks of a progammer by writing less code. Here is the list of important core features supported by jQuery −

DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.
Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
AJAX Support − The jQuery helps you a lot to develop a responsive and featurerich site using AJAX technology.
Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.
Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and gzipped).
Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.

Setting up jQuery

有两种方法可以使用 jQuery。

There are two ways to use jQuery.

jQuery - Local Installation

您可以在您的 Web 服务器上下载最新版本的 jQuery，并在您的代码中包含已下载的库。我们建议您下载该库的压缩版本以获得更好的性能。

You can download latest version of jQuery on your web server and include the downloaded library in your code. We suggest you to download compressed version of the library for a better performance.

Go to the https://jquery.com/download/ to download the latest version available.
Now put downloaded jquery-3.6.0.min.js file in a directory of your website, e.g. /jquery/jquery-3.6.0.js.
Finally include this file in your HTML markup file as shown below.

Example

现在您可以在您的 HTML 文件中包含 jquery 库，如下所示。请尝试单击图标以运行以下 jQuery 代码 −

Now you can include jquery library in your HTML file as given below. Try to click the icon to run the following jQuery code −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>

jQuery - CDN Based Installation

您可以直接从内容分发网络 (CDN) 中将 jQuery 库包含到您的 HTML 代码中。有许多 CDN 提供直接指向最新 jQuery 库的链接，您可以在程序中包含此链接。

You can include jQuery library into your HTML code directly from a Content Delivery Network (CDN). There are various CDNs which provide a direct link to the latest jQuery library which you can include in your program.

Example

现在让我们使用 Google CDN 中的 jQuery 库来改写上述示例。请尝试单击图标以运行以下 jQuery 代码 −

Now let us rewrite above example using jQuery library from Google CDN. Try to click the icon to run the following jQuery code −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>
<html>

在本 jQuery 教程中，我们在使用我们自己的 Tutorials Point CDN 版本库。您可以在互联网上找到许多其他 CDN，以将 jQuery 包含到您的网页中。

We are using our own Tutorials Point CDN version of the library throughout this jQuery Tutorial. You can find many other CDNs on the internet to include jQuery in your web pages.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>
<html>

How to Call a jQuery Library Functions?

正如我们在使用 jQuery 时的几乎所有操作，都会读取或操作 Document Object Model (DOM)，我们需要确保我们在 DOM 准备就绪后立即开始添加事件等。

As almost everything, we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

如果想让你的页面上某个事件发挥作用，应在 $(document).ready() 函数内调用它。只要 DOM 载入，且在页面内容载入之前，该函数内的所有内容都将立即加载。

If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

为此，我们按照如下方式为文档注册一个 ready 事件：

To do this, we register a ready event for the document as follows −

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

若要调用任何 jQuery 库函数，使用 HTML 脚本标签，如下所示。单击图标尝试运行以下 jQuery 代码 −

To call upon any jQuery library function, use HTML script tags as shown below. Try to click the icon to run the following jQuery code −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function() {alert("Hello, world!");});
   });
</script>
</head>
<body>
   <div>Click on this to see a dialogue box.</div>
</body>
</html>

How to Use Custom Scripts?

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

It is better to write your custom code in the custom JavaScript file : custom.js, as follows −

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

我们将这个文件保存在 /jquery 目录中，然后可以按如下方式在 HTML 文件中引用 custom.js 文件。单击图标尝试运行以下 jQuery 代码 −

Let’s keep this file in /jquery directory and then we can include custom.js file in our HTML file as follows. Try to click the icon to run the following jQuery code −

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script src="https://www.tutorialspoint.com/jquery/custom.js"></script>
</head>
<body>
   <div>Click on this to see a dialogue box.</div>
</body>
</html>

Using Multiple Libraries

您可以一次使用多个库，而不会互相冲突。例如，你可以同时使用 jQuery 和 MooTool javascript 库。你可以查看 jQuery noConflict 方法了解更多详情。

You can use multiple libraries all together without conflicting each others. For example, you can use jQuery and MooTool javascript libraries together. You can check jQuery noConflict Method for more detail.

What is Next ?

如果你没看懂以上示例，不用过于担心。你很快就会在后续章节中理解它们。

Do not worry too much if you did not understand above examples. You are going to grasp them very soon in subsequent chapters.

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

Next chapter would try to cover few basic concepts which are coming from conventional JavaScript.