开始使用 jQuery
4.20/5 (4投票s)
开始使用 jQuery。
什么是 jQuery？
jQuery 是一个免费的 JavaScript 库，它允许开发人员以一种比原生 JavaScript 函数更简单、更直观的方式来利用 HTML DOM。该库提供了大量的函数，用于动画效果、淡入淡出、滑动、获取和设置文本、值等。
在哪里获取 jQuery？
您可以在这里下载 jQuery：这里。
核心库有几个版本可供选择，但如果您使用 Visual Studio 进行开发，我建议下载以下版本。
- jquery-1.3.2.min.js（这是库的精简版本，去掉了所有空格，用于代码的发布版本。）
- jquery-1.3.2-vsdoc2.js（这个版本的库将为 Visual Studio 提供智能感知功能）
注意：如果您想从智能感知中受益，需要为 Visual Studio 2008 安装 Service Pack 1，这绝对是值得的……
开始使用 jQuery
引用 jQuery 库
在项目中导入和使用 jQuery 非常简单。我通常在网站的根目录下创建一个名为 `global` 的文件夹，然后在此文件夹下创建 `CSS`、`JS` 等子文件夹，用于存放全局共享的文件。
然后，在所有需要使用 jQuery 的页面中，只需包含以下 script 块：
<script src="global/js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
上面的脚本块引用了 Visual Studio 格式的库，但有些浏览器在使用此库时可能无法正确渲染某些淡入淡出或动画效果，所以我通常会同时链接两个版本的库，在开发时将精简版本注释掉。在测试或发布代码时，我会注释掉 VS 版本，并启用精简版本的库，如下所示：
开发期间
<script src="global/js/jquery-1.3.2-vsdoc2.js"
type="text/javascript"></script>
<%--<script src="global/js/jquery-1.3.2.min.js"
type="text/javascript"></script>--%>
测试和发布期间
<!--<script src="global/js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>-->
<script src="global/js/jquery-1.3.2.min.js" type="text/javascript"></script>
例如
$(document).ready(function() {
//Code to be called when the document is loaded
});
jQuery 对象
jQuery 对象基本上是一个 JavaScript 函数。调用 jQuery 对象的标准表示法是：
jQuery(String selector, jQuery context);
使用上面提到的快捷方式，这可以简化为：
$(String selector, jQuery context);
首先，您必须明白 jQuery 函数返回的是一个 jQuery 对象，而不是一个 HTML DOM 对象。然而，这很少成为问题，因为返回的 jQuery 对象比它引用的 HTML DOM 对象功能更丰富。
jQuery 函数的第一个参数是一个选择器，它基本上是一个用于定位您想要返回的项的指令。可用的选择器种类繁多且多样，足够灵活，几乎可以触及页面上的所有对象。
有关可用选择器的完整列表，请参阅在线文档 这里。
ready() 函数
传统上，开发人员必须使用 `onload` 事件在能够对 HTML DOM 执行操作之前，但这个事件只有在所有图像都下载完成后才会触发。jQuery 提供了一个名为 `ready` 的函数，该函数在页面加载完毕并准备好进行操作时触发。
实际上，这通常是您所有 jQuery 操作的起点，因为这是您钩入 jQuery 的地方。
从示例中学习
在介绍了基础知识之后，让我们通过一个演示了这些内容如何结合在一起的基本示例进行讲解。我将首先给您一个完整的图景，然后详细讲解。
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2:
3: <script src="global/js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
4: <!--<script src="global/js/jquery-1.3.2.min.js"
type="text/javascript"></script>-->
5:
6: <script language="javascript" type="text/javascript">
7: $(document).ready(function() {
8: $('.main > :button').toggle(function() {
9: $('.content').slideDown('slow');
10: }, function() {
11: $('.content').slideUp('slow', function() {
12: alert('div is now hidden');
13: });
14: });
15: });
16: </script>
17:
18: <html xmlns="http://www.w3.org/1999/xhtml">
19: <head>
20: <title>jQuery Demo</title>
21: <link href="global/css/jQueryStyleSheet.css"
rel="stylesheet" type="text/css" />
22: </head>
23: <body>
24: <div class="main">
25: This is some text inside the main div. A button allows me to show and
hide the content block.<br />
26: <input type="button" value="Toggle Content" />
27: <div class="content">
28: This is a content block...
29: </div>
30: </div>
31: </body>
32: </html>
上面示例中首先要注意的是，所有内容都包含在 `ready` 函数内部。解释一下……传递给 `ready` 函数的参数本身就是一个函数。同样，传递给 `toggle` 函数（稍后将进行解释）的两个参数也都是函数。JavaScript 允许使用匿名函数，这对于 .NET 开发人员来说可能仍然是比较新的概念。因此，编写的脚本……
$(document).ready(function() {
$('.main > :button').toggle(function() {
$('.content').slideDown('slow');
}, function() {
$('.content').slideUp('slow', function() {
alert('div is now hidden');
});
});
});
……也可以写成如下形式，并且对于 JavaScript 新手来说可能更易读：
$(document).ready(onLoad);
function onLoad(){
$('.main > :button').toggle(showContent, hideContent);
}
function showContent() {
$('.content').slideDown('slow');
}
function hideContent() {
$('.content').slideUp('slow', hideCallback);
}
function hideCallback() {
alert('div is now hidden');
}
然而，正如您将注意到的，这占用了更多的空间，并且一旦您熟悉了匿名函数的工作方式，反而会更难阅读，因为您需要将注意力从函数调用的位置转移到它执行的操作。匿名方法表示法将函数逻辑与其调用位置一起保留。当然，如果您发现自己复制粘贴函数逻辑，应该自动将该逻辑包装在一个命名函数中，以避免代码重复。
现在，解释一下发生了什么……
当文档准备好时，主内容块中的按钮将绑定 `toggle` 函数。现在，当按钮被点击时，一个函数会运行，将内容 `div` 向下滑动，显示它；当再次点击时，第二个函数会运行，将内容 `div` 向上滑动，隐藏它。jQuery 文档将 `toggle` 函数描述如下：
“在两次点击之间切换两个函数调用。每当点击匹配的元素时，将触发第一个指定的函数，再次点击时，触发第二个函数。所有后续点击将继续在这两个函数之间轮换。”
选择符
使用选择器 `'.main > :button'` 定位按钮非常容易。
jQuery 借用了一些 CSS 的选择器表示法。因此，如果一个元素使用了类，比如问题中的 `div`，则可以使用类名加上“`.`”字符来定位该元素。类似地，如果一个元素有一个名称，可以使用 `id` 选择器来访问它。例如，如果该元素有一个 `id` 为“`mainDiv”，则可以使用选择器定位它：
$('#mainDiv')
“`>`”字符用于定位子元素。在这种情况下，按钮位于一个 `div` 中，因此在 `div` 的选择器之后使用“`>`”字符。最后，可以使用特殊表示法来访问表单字段，例如“`:button`”、“`:text`”、“`:radio`”、“`:submit`”等。
所以，`'.main > :button'` 选择器可以被解释为：“返回所有位于使用 CSS 类 `main` 的元素内部的按钮元素，并以 jQuery 对象的形式返回。”
再次，这里有一个需要注意的重要点……返回的 jQuery 对象可能引用多个对象。所以，如果 `main` `div` 中有多个按钮，返回的 jQuery 对象将引用所有这些按钮。因此，所有这些按钮都将绑定 `toggle` 函数，并在被点击时执行相同的操作。在某些情况下，这可能是期望的行为。例如，您可能希望一个函数来改变页面上所有 `div` 的边框。事实上，让我们在 `main` `div` 中添加第二个按钮，点击它时执行此操作。`main div` 现在看起来像这样：
<div class="main">
This is some text inside the main div. A button allows me to show and hide
the content block.
<input type="button" value="Toggle Content" />
<input type="button" value="Change borders" />
<div class="content">
This is a content block...
</div>
</div>
这个示例给我们带来了更新 jQuery 代码的重要原因，因为正如刚描述的那样，我们只希望第一个按钮执行显示/隐藏 `content` `div` 的操作，而第二个按钮执行改变边框的操作。我们可以通过给按钮分配不同的 `id` 来解决这个问题，然后使用上面描述的 `id` 选择器表示法。在实践中，我会这样做，因为它允许我们移动表单中的按钮，而我们的 jQuery 仍然可以正常工作。但是，为了演示另一种类型的选择器，这次我不打算这样做。
让我们看看如何修改我们现有的 jQuery 代码来仅指定 `main div` 中的第一个按钮。
$('.main > :button:first')
我们的选择器现在被修改为仅返回 `main div` 的第一个子按钮。所以，您可能会猜测使用 `:second`、`:third`、`:fourth` 选择器来返回第二个、第三个和第四个按钮——但您错了…… jQuery 的开发人员显然认为如果走这条路会带来麻烦。所以，他们想出了另一个选择器 `:eq(index)`，它允许返回第一个之后的所有元素。因此，要访问第二个按钮，我们将使用以下选择器：
$('.main > :button:eq(1)')
或者，因为 `main div` 中的第二个按钮也是 `div` 中的最后一个按钮，所以可以使用选择器……
$('.main > :button:last')
……也可以使用。
所以，用于改变 `div` 边框的 jQuery 代码将如下所示：
$('.main > :button:last').click(function() {
$('div').css('border', 'solid 1px black');
});
正如您现在可能已经猜到的，这段代码是将一个函数绑定到返回对象的点击事件上。当对象被点击时会发生什么也很清楚……一个引用页面上所有 `div` 的 jQuery 对象会被调用 `css` 函数，将引用元素的边框设置为 1 像素宽的纯黑色。
请记住，jQuery 选择器表示法借鉴了 CSS。因此，用于引用 `div` 的 jQuery 只是“`div”。类似地，选择表中的所有表格单元格将通过“`td”实现，以此类推。
函数
核心库中有许多可用的函数。在这篇文章中试图列出它们所有是很愚蠢的，因为在 文档 中已有足够的信息。
jQuery 的扩展
jQuery 对象上的函数数组非常庞大，并且随着插件（或扩展）的可用性不断增加。插件可以在 http://plugins.jquery.com 找到，大多数都带有充分的文档，甚至还有演示。但请注意，大多数插件是由通用编程社区的成员编写的，因此并非所有插件都能如预期那样执行。
结论
试图在一篇文章中涵盖所有 jQuery 内容是一件徒劳的事情。然而，开始使用它是最大的障碍，我希望这能帮助您克服这个障碍。
