jQuery 快速之旅
4.95/5 (70投票s)
对 jQuery 和万能 $ 的强大功能进行快速介绍。
引言
虽然我通常与 Silverlight 和 WPF 开发相关联，但我偶尔也会涉足更标准的 Web 应用程序开发。多年来，我一直手工编写 JavaScript 代码，并构建了常用的浏览器检查、技巧和解决方法库，以尝试开发在 Internet Explorer 中与在 Firefox、Safari 等浏览器中表现相同的网站。大约 18 个月前，我接触到了 jQuery 的乐趣，自从开始使用 JavaScript 后，我就再也没有回头看过。
“那么 Pete。你为什么这么喜欢 jQuery？”我听到你在问（你可能不知道你在问，但你确实在问）。嗯，根据 jQuery 官方主页
“jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互，以实现快速的 Web 开发。jQuery 的设计宗旨是改变你编写 JavaScript 的方式。”
如果 jQuery 只有这些，那已经足够令人印象深刻了，但它还有更多。它具有高度的可扩展性，并且拥有一个庞大的开发者社区基础设施，他们为各种功能创建插件和扩展。如果你想显示一个日期选择器，没问题。想显示一个可拖动的项？没问题。
在这篇文章中，我将带大家进行一次 jQuery 的快速游览，希望能帮助你更好地理解它是什么以及如何使用它。
入门
显然，如果我们没有下载 jQuery，我们就无法用它来开发我们想要的应用程序。最新版本可以在 这里 找到（我目前使用的是 1.4.4 版本）。有一个精简版的库，在部署网站时可以考虑使用它，因为它经过了大量的压缩，但我建议一开始安装未压缩的版本，这样在调试时你可以深入其中，更好地理解它。
注意：不要使用打包版本的库。这是一个压缩版本，必须在客户端解压，这会显著增加加载时间。
下载完成后，我们需要将其复制到我们的网站中并添加引用。我通常喜欢将我的文件夹组织成在网站中有一个顶级的 js 文件夹，并将 jQuery 部署在这个文件夹的一个子目录中。假设你想遵循这个约定，你可以在一个网站页面中使用以下方式添加对 jQuery 的引用：
<script src="js/jQuery/jquery-1.4.4.js" type="text/javascript"></script>
有了这个，我们就可以开始使用 jQuery 了。
直接上手
在我们的第一个示例中，我们将使用事件和动画来展示 jQuery 有多容易。首先，让我们看看代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" >
<head>
<title>First jQuery Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./js/jQuery/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#animateHide").click(function(){
$("#para1").hide('slow');
$("#para1").show('slow');
});
$("#justHide").click(function()
{
$("#para1").hide();
});
});
</script>
</head>
<body>
<p><span id="para1">Hello there</span></p>
<button type="button" id="animateHide">Animate hide</button>
<button type="button" id="justHide">Just hide</button>
</body>
</html>
那么，这是做什么的，它又是如何工作的？
在这个示例中，我们添加了两个按钮，它们将隐藏 span。其中一个按钮会动画地隐藏 span，使其消失（然后在隐藏操作完成后再次出现）。第二个按钮只是隐藏元素，这相当于将其 CSS display 设置为 none。
这里可能让你感到惊讶的一点是，我们在两个按钮的定义中都没有 `onclick`，但如果你在网页中点击这些按钮，它们确实会响应点击事件。它们是怎么做到的？
如果我们查看头部，我们会看到一个以 `$(document).ready(function() { 开头的 section。这个 section 非常重要，它向我们介绍了我们第一个实际的 jQuery 代码。`$` 符号（它是 jQuery 的别名）告诉 jQuery 操作括号内的元素。它有效地取代了 `getElementById` 和 `getElementsByTagName` JavaScript 方法。这意味着我们可以使用相同的语法来检索一个标签，就像通过 id 或 class 检索一个元素一样。现在，这本身就非常酷，但它还不止于此。
我们经常需要做的一件事是等待网页加载完成，然后我们才能操作 DOM 中的元素（请耐心点，这很重要，不是为了填充文章而写的）。传统上，这会通过 `window.onload=function(){ /* Do something */} ` 来编写。jQuery 提供了一个有用的 `ready` 方法，它会等待文档加载完成。
$(document).ready(function() {
页面加载完成后，DOM 元素就就位了，我们可以对其进行操作。请记住，我们有两个按钮需要分配点击事件处理程序；jQuery 为我们提供了一个 `click` 事件处理程序。如前所述，`$` 符号允许我们选择一个或一组元素。在这里，我们将使用这个符号来查找与按钮 ID 匹配的元素，并连接到我们感兴趣的事件处理程序。为了根据 ID 获取元素，我们使用模式 `$("#<
注意：选择元素的机制称为选择器。标签名、类选择器和 ID 选择器的使用只是 jQuery 提供的一组更强大的选择器中的一部分。我们稍后会详细介绍。
在 `ready` 函数中，我们选择两个按钮，并使用 `click` 函数将点击事件处理程序附加到它们上面。这段代码被 jQuery 特别处理，它会跟踪事件的创建，以便自动为我们移除它们，防止 IE 中的内存泄漏（因为 DOM 无法自动卸载元素，因为它仍然有对它们的事件引用）。在内部，jQuery 使用 `attachEvent` 和 `detachEvent` 来管理事件。以下代码由 jQuery 在内部执行，以添加 `onclick` 功能：
if ( div.attachEvent && div.fireEvent ) {
div.attachEvent("onclick", function click() {
// Cloning a node shouldn't copy over any
// bound event handlers (IE does this)
jQuery.support.noCloneEvent = false;
div.detachEvent("onclick", click);
});
div.cloneNode(true).fireEvent("onclick");
}
最后，我们的点击处理程序实际上必须做些什么。再次，我们使用 `$("#para1")` 搜索 ID 为 `para1` 的元素，并调用 `hide` 方法（在 `animateHide` 函数中是 `show` 方法）。`hide` 和 `show` 方法中的参数是可选的，正如我们将发现的，很多 jQuery 的参数都是可选的。
文本域的妙用
好了，这个例子就到这里。是时候写一些更实用的东西了。在这个例子中，我们将编写一些代码来限制我们在多行文本框中可以输入的文本量（这是单独使用 textarea 无法实现的）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Second jQuery Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./js/jQuery/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var length = 20;
$("#multiline").keyup(function(){ checkMaxLength($(this),length); });
$("#multiline").change(function(){ checkMaxLength($(this),length); });
});
function checkMaxLength(element, length) {
var maxLength = length;
var currentLength = element.val().length;
if (currentLength > maxLength)
element.text(element.val().substring(0, length));
}
</script>
</head>
<body>
<textarea id="multiline" rows="3" cols="20">Type</textarea>
</body>
</html>
这个功能建立在我们已经学到的关于事件和选择器的基础上。让我们分解一下，看看里面发生了什么。
$("#multiline").keyup(function(){ checkMaxLength($(this),length);});
$("#multiline").change(function(){ checkMaxLength($(this),length);});
在 `ready` 事件中，我们将 textarea 的 `keyup` 和 `change` 方法连接到同一个函数（`checkMaxLength`）。我们这样做是为了让用户不能输入超过 20 个字符，无论是通过输入还是尝试粘贴超过限制。但是等等，`checkMaxLength` 调用中的这个奇怪的 `$(this)` 元素是什么？我们需要一种方法让 `checkMaxLength` 方法知道我们正在处理的实际元素；`$(this)` 给了我们在该元素求值时处于上下文中的元素。在这种简单的情况下，我们可以使用 `$("#multiline")` 来达到相同的效果，但是如果我们想将此检查添加到所有 textarea 呢？我们就不能使用 ID 指定符，所以我们使用 `$(this)` 来为元素提供一些上下文。
在 `checkMaxLength` 方法内部，我们使用 `val()` 函数从传入的元素中检索 textarea 的值，并根据长度测试的结果，使用 `.text()` 方法替换文本。
它不仅仅支持荷兰足球
如今，在 Web 开发中，你不可能到处都听不到 AJAX。如果流言属实，AJAX 能将一辆奥斯汀·阿莱格罗（Austin Allegro）风格的网站变成一辆法拉利 458（Ferarri 458）。一个响应迅速、矫健如羚羊的网站，充满了活力和朝气。当然，这意味着任何严肃的 Web 开发库都需要支持 AJAX。不出所料，jQuery 也支持它，而且它像 jQuery 的其他元素一样易于使用。
让我们一起做一个快速示例，看看它是如何工作的。由于为了本文的目的，我们不会编写任何服务器端代码，我们需要一个数据源供我们通过 Web 查询。幸运的是，Twitter 提供了一个方便的 API 供我们查询，所以我们将使用它来获取最新的帖子并在网页上显示。这是一个更复杂的示例，但构建块仍然相同，所以我们应该不会遇到新概念的问题。
好了，这是所有 HTML 风格的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>First jQuery Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./js/jQuery/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#getTweets").click(function(){ getTweets("chris_maunder"); });
});
function getTweets (user){
var tweetString = "http://api.twitter.com/1/statuses/user_timeline/"
+ user + ".json?callback=?";
$.ajax(
{
url:tweetString,
dataType: 'json',
success: function(data) {
$("#result .tweets").empty();
$.each(data, function() {
$("#result .tweets")
.hide()
.append('<div>' + this.text + '</div>')
.fadeIn();
$("#user")
.hide()
.empty()
.append('<img src=' + data[0].user.profile_image_url + ' />')
.append('<a href="' + data[0].user.url + '">' + data[0].user.name + '</a>')
.fadeIn();
});
},
xhr: /*@cc_on false && @*/window.XMLHttpRequest ? function()
{ return new window.XMLHttpRequest(); }
: function() { try { return new window.ActiveXObject("Microsoft.XMLHTTP"); }
catch(e) {} }
});
}
</script>
</head>
<body>
<div>
<button type="button" id="getTweets">
Get latest</button></div>
<h1 class="tweets">Tweets</h1>
<div id="result">
<div id="user" ></div>
<div class="tweets"></div>
</div>
</body>
</html>
我们可以看到，这里有更多内容，但仍然相当简单。功能的核心在于 `$.ajax` 方法，所以我们将对其进行分解，看看发生了什么（jQuery 中有一个调用 JSON 方法的快捷方式，称为 `getJSON`，但由于这部分是为了处理原始形式的 AJAX，所以我们没有使用它）。
我们可以看到，Ajax 函数（以及许多其他 jQuery 函数）使用键/值对来存储参数的详细信息。第一个条目是 URL，我们已经预先设置好指向 Chris Maunder 的 Twitter 状态时间线。接下来，我们声明我们希望使用 JSON 来处理从服务器接收到的数据。它的值取决于我们要接收的数据类型，可以是 HTML、XML、jsonp 或 script 等类型。
这个函数中最有趣的部分是 `success` 部分。在这里，我们创建了一个 API 将调用（这里有一个很大的提示，它被称为回调函数，我们在 jQuery 中到处都能找到它们）。正如我们之前所做的，我们将在此函数中操作底层的 DOM 元素。我们在此函数中所做的第一件事是删除之前的推文，确保我们不会在列表中两次得到相同的推文。
你可能已经意识到，我们可以从服务器接收多条推文。这意味着我们需要迭代推文集合。幸运的是，jQuery 提供了一套非常方便的用于处理集合数据的函数，我们使用 `each` 函数来迭代 JSON。在这个函数中，我们提取我们感兴趣的推文文本，并将其附加到属于 `tweets` 类的项中。细心的读者已经注意到，这个类在两个地方被使用了；通过指定 `"#result .tweets"`，我们告诉 jQuery 将此信息附加到 `result` ID 的 `div` 中包含的 `tweets` 类内。这是 jQuery 如此强大的原因之一——通过这样做，我们减少了大量需要手动编写的代码。
注意：要填写用户信息，我们只需要使用第一个返回的元素，因为这些数据对于该用户的每篇帖子都是相同的。
有一个 `xhr` 参数，它允许我们指定 XML Http Request 对象是如何创建的。过去，AJAX 调用在 jQuery 中出现过一些内存泄漏问题，指定此代码可以解决这些问题。
显然，在生产环境中使用 jQuery 通常需要进行错误处理和验证，但希望这能让你对如何构建一个基本的 jQuery AJAX 应用程序有所了解。
最终想法
好了，就这样。对 jQuery 强大功能的快速介绍，以及它如何轻松地用于创建丰富而强大的网站的指南。我希望你喜欢它，并希望它能激发你思考如何让你的网站更进一步。
历史
- 2010 年 12 月 22 日：初次发布