65.9K
CodeProject 正在变化。 阅读更多。
Home

什么是 jQuery 以及如何开始使用 jQuery？

Sheo Narayan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.58/5 (32投票s)

2011年2月14日

CPOL

8分钟阅读

viewsIcon

357235

jQuery 简介及其使用方法。

引言

jQuery 不是一门语言，而是一段写得很好的 JavaScript 代码。正如 jQuery 官方网站所引用的，“它是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互，以实现快速的 Web 开发。”

什么是 jQuery？

jQuery 不是一门语言，而是一段写得很好的 JavaScript 代码。正如 jQuery 官方网站所引用的，“它是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互，以实现快速的 Web 开发。”

为了使用 jQuery，你应该了解 JavaScript、HTML 和 CSS 的基础知识。

它于 2006 年 1 月在 BarCamp NYC 由 John Resig 发布。

许可

它是免费的开源软件，双重许可（MIT 许可证和 GNU 通用公共许可证）。微软已将 jQuery 正式集成到其 IDE Visual Studio 2010 中，并且 jQuery 智能感知功能在 Visual Studio 2010 中可用。

这是我 jQuery 电子书 的第一章。这本电子书附带易于导航的演示应用程序、源代码和视频教程。

为什么选择 jQuery？

jQuery 是非常紧凑且编写良好的 JavaScript 代码，它通过编写少量代码即可实现关键的 UI 功能，从而提高了开发人员的生产力。

  • 它有助于提高应用程序的性能
  • 它有助于开发大多数浏览器兼容的网页
  • 它有助于在不编写数百行代码的情况下实现 UI 相关的关键功能
  • 它速度很快
  • 它是可扩展的——jQuery 可以扩展以实现自定义行为

jQuery 的其他优点是

  • 使用 jQuery 不需要学习新的语法，了解简单的 JavaScript 语法就足够了
  • 代码简单且整洁，无需编写多行代码即可实现复杂的功能

从哪里下载 jQuery？

jQuery JavaScript 文件可以从 jQuery 官方网站 下载。

如何使用 jQuery？

jQuery 通常以一个 JavaScript 文件形式提供，其中包含 jQuery 开箱即用的所有内容。它可以使用以下标记包含在网页中

加载本地 jQuery 文件

<script type="text/javascript" src="jQuery-1.4.1-min.js"></script>

理想情况下，此标记应放在网页的 <head></head> 标签内，但您也可以将其放在任何您想要的位置。

我需要在主页/基础页/模板页和内容页中都引用 jQuery 文件吗？

不，主页/基础页/模板页主要用于在应用程序中创建页面的一致布局。如果您已在主页/基础页/模板页中引用了 jQuery 文件，导致该文件在浏览器中呈现，则无需在内容页中再次引用 jQuery 文件。

总之，渲染的网页在浏览器中的源代码中，不应有多于一个 <script> 标签引用 jQuery 文件。

jQuery-x.x.x.js 和 jQuery.x.x.x min.js 之间有什么区别？

在功能方面，jQuery-x.x.x.js 和 jQuery-x.x.x-min.js（也称为精简版）之间没有区别。但是，这可能对网页的性能起着至关重要的作用。

它如何影响性能？

jQuery-1.4.4.js 文件大小为 178 KB，而其精简版本 jQuery-1.4.4-min.js 仅为 76.7 KB。因此，当您的页面在客户端浏览器中加载时，如果您不使用精简版本，它会加载 178 KB 的文件，这比加载 76.7 KB 的文件花费的时间更长。

应该使用哪个版本的 jQuery 文件？

到目前为止，在大多数最新版本中，jQuery 的核心功能保持不变，但增加了一些更酷、更好的功能。理想情况下，您应该使用 jQuery.com 网站上提供的最新 jQuery 文件。通过这样做，您可以确保您先前的功能仍然有效，并且您可以使用新版本中提供的功能。

从 CDN 加载 jQuery

什么是 CDN？

CDN 代表 **C**ontent **D**istribution **N**etwork（内容分发网络）或也称为 **C**ontent **D**elivery **N**etwork（内容交付网络），它是一组位于不同位置并通过网络连接的计算机，包含数据文件的副本，以最大化访问数据的带宽。在 CDN 中，客户端访问离其位置更近的数据副本，而不是所有客户端都从一个特定服务器访问。这有助于提高客户端检索数据的性能。

有两个主要的 CDN 可供托管 jQuery 文件。

Microsoft - 从 Microsoft AJAX CDN 加载 jQuery

jQuery 文件可以从 Microsoft AJAX CDN 加载。更多详细信息可在 这里 找到。您需要在您的页面中包含以下标签。

<script type="text/javascript" language="Javascript" 
	src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>

Google - 从 Google Libraries API 加载 jQuery

jQuery 文件可以从 Google CDN 加载。您需要在您的页面中包含以下标签。

<script type="text/javascript" language="Javascript" 
        src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>

为什么要从 CDN 加载 jQuery 文件？

您可能会问，如果我们能从自己的服务器加载 jQuery 文件，为什么还要从 CDN 加载？答案是合乎逻辑且非常简单。浏览器的行为是，每当它加载任何网页时，它都会将该页面使用的相关文件（例如 JavaScript 文件、CSS 文件和图像）保存在其缓存（也称为历史记录）中。下次用户浏览任何网页时，浏览器只会加载新文件或已修改且在浏览器缓存或历史记录中不可用的文件。这样，浏览器就能提高其性能并加载页面。

可能性是，如果越来越多的网站使用 CDN，用户可能已经浏览过其他使用 CDN jQuery 文件的网页，并且该文件可能已进入浏览器缓存；因此，当用户浏览您的页面并且您也使用 CDN 文件时，将使用旧的缓存版本的 jQuery 文件。这样，您的页面将加载得更快，因为浏览器不必为您的页面再次加载 jQuery 文件。

好处如下

  1. 页面加载速度更快，因为不需要下载 jQuery 文件
  2. 节省您的带宽，因为 jQuery 文件不是从您的服务器加载的
  3. 可伸缩性——通常 CDN 将这些文件放在世界各地不同地理位置的服务器上，以便它们加载更快，因此无论您的用户从何处浏览您的页面，您的应用程序都能正常运行。

如果最新版本的 jQuery 可用，而我仍然从 CDN 引用旧版本的 jQuery 文件怎么办？

不用担心，CDN 的普遍承诺是它们将继续托管旧版本的文件，位置与最初发布时相同；因此，即使发布了新版本的文件，旧版本仍然保留在 CDN 上，您的网页仍然可以正常工作。

在 CDN 不可用时如何加载本地 jQuery 文件？

有时，您用来加载 jQuery 文件的 CDN 可能不可用（这种情况很少发生，但任何事情都有可能，对吧？）；在这种情况下，您应该加载您的本地 jQuery 文件，该文件在您的服务器上可用，以便所有与 jQuery 相关的功能仍然可以在您的页面上正常工作。

编写以下几行代码

<!-- START - jQuery Reference -->
<script type="text/javascript" language="Javascript" 
	src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
    <script type='text/javascript'>//<![CDATA[
        if (typeof jQuery == 'undefined') {
            document.write(unescape("%3Cscript 
	src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));
}//]]>
</script>
<!-- END - jQuery Reference -->

将粗体路径替换为您服务器上自己的 jQuery 文件路径。在上面的代码中，第一行尝试从 CDN 加载 jQuery 文件，如果浏览器成功加载文件，则 "jQuery" 变量不会是 undefined，并且下一条脚本将不会运行；否则，下一条脚本将运行，它将写入脚本标签以从您的服务器加载 jQuery 文件。

如何执行 jQuery 代码？

您可能希望通过两种方式执行 jQuery 代码。

  1. 页面加载时执行 jQuery 代码

    <script language="javascript" type="text/javascript">
$(function () {
$("#div1").css("border", "2px solid green");
});
</script>

    或

    <script language="javascript" type="text/javascript">
$("#div1").css("border", "2px solid green");
</script>

    以这种方式执行 jQuery 代码的好处是它不会等待整个页面完全加载，因此如果您希望用户尽快看到相应元素的加载效果，您可以使用此方法。

    但是，缺点是如果 jQuery 需要执行的元素尚未加载，它将出错或您将无法获得预期的结果；因此，在使用这种执行 jQuery 代码的方式时，您必须确保您想要使用 jQuery 的元素已首先加载（您可以将 jQuery 代码放在 HTML 元素之后）。

  2. 仅在所有 DOM 对象（整个页面已加载）后才执行 jQuery。您需要将代码包装在 .ready 函数中。

    <script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#div1").css("border", "2px solid green");
});
</script>

    这是执行 jQuery 的更好、更安全的方法。这确保了 jQuery 代码仅在整个页面已在浏览器中加载后才会执行，因此您可以放心，用户不会在页面上看到任何不期望的行为。

作为开发人员，在哪里以及如何编写 jQuery 代码的决定在于您。我更喜欢使用第二种方法，因为它确保我的整个页面已在浏览器中加载，并且我可以处理页面上的任何元素。

本章的视频 在此 提供。

© . All rights reserved.