前提条件
本文档假定您具备以下技术的基本知识或编程经验：
- NetBeans IDE
- JavaScript
- CSS 选择器和 HTML 标记
我们将使用 NetBeans 6.5 IDE 来创建一个普通的 HTML 文件。但是在理论上，这些步骤可以应用到 JavaScript 所能嵌入的任何 Web 文档文件中，包括 JSP、PHP 以及其他。
注意：尽管我们使用的是仅支持 PHP 的 NetBeans 6.5 构建版，但是本教程并不使用 PHP 本身。如果您配置了一个运行 PHP 的本地 Web 服务器来进行测试，您就可以在该服务器中测试项目。即便您没有本地 Web 服务器，您只需保存我们所创建的 HTML 文件，并在一个激活 JavaScript 的 Web 浏览器中查看它来完成本教程。
设置 jQuery 项目
-
首先，创建一个新项目（Ctrl-Shift-N）。选择
“文件”>“新建项目...”。 -
在显示出的窗口中，选择左边的 "
PHP",然后选择右边的“PHP 应用程序”。 -
单击
“下一步”。 -
为项目命名。我们将项目命名为
jqproject。 -
选择要保存项目的路径。单击
“下一步”。 -
在“运行配置”设置中，选择“
本地 Web 站点”并根据您的配置验证“项目 URL”是否正确。 -
选中“
将源文件夹中的文件复制到其他位置”，并在“复制到以下文件夹”中，选择您想在本地 Web 服务器上使用的目录。在本例中，IDE 将会在您选择的目录中创建一个jqproject目录。
注意：如果您未运行本地 Web 服务器，只需要接受所有缺省值。不要选中“
将源文件夹中的文件复制到其他位置”。在本例中，直接在浏览器中查看我们所创建的 HTML 文件（从 NetBeans 项目目录）是最好的方式。 -
单击“
完成”。NetBeans 将创建项目并打开index.php文件。我们将在一个普通的 HTML 文档中工作，因此我们可以删除
index.php并创建index.html来代替它。（这样是为了方便那些不在本地 Web 服务器上运行 PHP 的人。如果您不是这些用户中的一员，您尽管继续并跳过下面四个步骤，使用 "index.php" 来完成教程。） -
右键单击 "
index.php" 并选择“删除”。 -
现在，右键单击“
源文件”节点图标，依次选择“新建”和“HTML 文件...”。 -
在“
文件名：”中输入 "index"。验证项目和创建的文件路径是否正确。 -
单击“
完成”。
您的 Web 浏览器将加载我们刚才创建的页面。如果您正在运行本地 Web 服务器，在您的浏览器的地址栏中输入上面所配置的项目的 URL。否则，在您的 NetBeans 项目目录的 jqproject 子目录中找到 index.html，并在您的 Web 浏览器中打开它。您将看到一个类似下图的页面：
返回 NetBeans，删除 index.html 中的所有文本并用以下内容替换它：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery test project</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>注意：因为最近的浏览器已经支持 doctype 和 charset 声明（来自 HTML 5 规范的建议），我们也在本教程中使用了他们。实际的生产就绪项目可能需要您使用不同或者更加明确的 doctype 形式的 charset 声明，这对于支持老版浏览器或者在宽松模式中生成页面是必不可少的。本文使用的 HTML 5 doctype 将触发所有最近浏览器的标准模式。
在开始使用 jQuery 之前，我们必须将 jQuery 库添加到项目中。NetBeans 6.5 包含了 jQuery 库。
-
在项目的根层次上，右键单击主
jqproject节点，并选择“属性”。此时将打开“属性”设置对话框。 -
在“
运行配置”中，确保将“索引文件”设置为 "index.html"（或者,如果您使用一个 PHP 文件,则将其设置为 "index.php"。） -
选择“
JavaScript 库”。单击右边的“添加...”按钮。
-
选择 "
jQuery 1.2.6"。缺省设置将为该库创建一个又长又丑的路径，因此让我们将对它进行适当简化。
-
单击选择区右侧的 "
..." 按钮。此时将出现一个对话框。
-
仅在路径的结尾处添加
/js并单击“打开”。
-
验证路径是否正确并单击“
确定”。在项目属性窗口中，您将看到 "
jQuery 1.2.6" 已被添加到 JavaScript 库的清单中。 -
单击“
确定”。可以看到
js目录已被添加到“源文件”中，并且 "jQuery-1.2.6.js" 位列其中。现在，我们通过在
index.html文件中创建一个 script 链接来将 jQuery 库连接到我们的项目中。 -
在 <style> 标志对后面，闭合的
</head>标记之前输入如下内容：<script type="text/javascript" src="js/jquery-1.2.6.js"></script> -
保存。
现在，jQuery 库已被添加到我们的项目中、链接到了我们的项目文件中，并且可以使用了。
警告：NetBeans 6.5 的早期构建版存在一个错误，项目的 JavaScript 文件并没有正确地移动到上面设置所指定的“其他位置”中。解决办法就是手动将文件复制到 localhost 上的正确位置。在本教程中需要牢记这一点，因为我们稍后将为该项目添加更多 JavaScript 文件。
熟悉 jQuery
jQuery 的原理是将动态应用的 JavaScript 属性和行为与 DOM（文档对象模型）元素连接在一起。让我们为 DOM 添加一个元素并试着改变其属性。我们将创建一个标题，当单击该标题时其颜色会由黑变蓝。
首先创建该标题，在结构上创建一个 <h1> 元素。在 <body> 标记间输入以下内容：
<h1>Test.</h1>现在我们将创建一个 CSS 类，当应用该类时使元素出现蓝色。在文档 <head> 的 <style> 标记间输入以下内容：
.blue { color: blue; }下一步，我们将建立一个容纳 jQuery 命令的地方。在 jQuery 脚本标记后面，在文档的 <head> 部分添加一组新的 <script> 标记，如下所示：
<script type="text/javascript">
</script>
我们将要添加的 jQuery 指令必须在浏览器加载所有 DOM 元素之后才能执行。这点很重要，因为 jQuery 行为与 DOM 元素连接在一起，jQuery 必须可以使用这些元素，这样我们才能得到预期结果。jQuery 通过其内嵌的 (document).ready 函数帮助实现此目的，该函数在 jQuery 对象之后，由 $ 表示。在刚创建的脚本标记间输入以下结构：
$(document).ready(function(){
});
注意： 此函数还有一个精简版，可根据您的偏好选择使用，如下所示：
$(function(){
});
jQuery 指令采用 JavaScript 方法的形式，通过一个可选的对象字面值来表示参数数组，且必须置于 (document).ready 函数内的大括号 {} 之间，从而只在合适的时间执行，也就是在 DOM 完全加载后。
文档应如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery test project</title>
<style type="text/css">
.blue { color: blue; }
</style>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
});
</script>
</head>
<body>
<h1>Test.</h1>
</body>
</html>
为了演示 jQuery 语法的原理，我们将尝试一些简单操作。将 jQuery 指令添加到页面中，单击 "Test" 时，该指令使该词变为蓝色。为实现此功能，我们希望 jQuery 在接收到鼠标单击事件后将 CSS 类 .blue 添加到 DOM 的 <h1> 元素中。
在 (document).ready 函数的大括号 {} 内输入下面的代码：
$("h1").click(function(){
$(this).addClass("blue");
});
保存该文档并将其加载到 Web 浏览器中。测试其运行情况。当单击 "Test" 单词，该词将变成蓝色。
在本例中，当与 CSS 选择器 "h1" 相匹配的元素出现时，使用 jQuery click() 函数调用 jQuery addClass() 函数。$(this) 指向调用元素。如果想在页面中添加更多的 <h1>，可以采用同一套规则下的相同行为，各行为单独与 jQuery 进行交互。（您可以自己尝试此练习）
jQuery 的另一项重要特质是,其函数可被简单链接起来，以创建更加复杂甚至是序列化的行为。为演示这一点，我们将为 click() 函数添加一条“慢 fadeOut”指令。在 addClass 函数后面添加一个 fadeOut("slow") jQuery 函数，如下所示：
$(this).addClass("blue").fadeOut("slow");完整的 jQuery 函数如下所示：
$(document).ready(function(){
$("h1").click(function(){
$(this).addClass("blue").fadeOut("slow");
});
});
刷新该页面然后单击 "Test" 。您将看到 "Test" 变蓝，然后淡出，并从页面中消失。（想再试一次，必须刷新页面。）
将 jQuery 行为应用于结构化文档
通过使用包含在基本 jQuery 库中的 JavaScript 行为，我们创建了上面的简单测试。通过使用 jQuery 插件添加功之后能实现什么，让我们拭目以待。
我们将以一个简单的雇员联系列表为例，创建一个反映单个内容条目间关系的结构化文档，使用 CSS 和 jQuery 解决一系列表示法问题。构造该文档时，我们将使用与文档元素的语义相称的 HTML 标记。
显然，雇员联系列表是一个列表，为反映出这一点，我们将使用 <ul>（未排序列表）和 <li>（列表条目）元素来构建该列表。此外，列表中的每个人将拥有他们自己的情况列表，惟一地属于他们。从语义学的角度来讲，我们得到的是一个列表的列表。我们的文档结构将反映出在一系列未排序列表中，每个列表都嵌入在一个列表条目中，列表条目本身是单个未排序列表的一部分。
此外，每个列表条目将接收一个反映其意义的 CSS 类。这让我们（和 jQuery）有可能以一种语义学上适当的方式对待每个条目 。在联系列表中，通过关于每个人的数据集合对他们进行描述：每个人都有一个小肖像图片，和有关其职业头衔、办公地址、电话号码、混乱的电子邮件地址和简历。
-
将以下代码粘到文档中代替
<h1>Test。</h1>:<ul id="infolist">
<li>
<a class="personName" href="#">Mary Adams</a>
<div class="person">
<ul>
<li class="portrait">
<img src="pix/maryadams.jpg" alt="Mary Adams">
</li>
<li class="title">Vice President</li>
<li class="office">102 Bldg 1</li>
<li class="phone">4 8234</li>
<li class="email">mary.adams(at)company.com</li>
<li class="bio">
Neque porro quisquam est, qui dolorem ipsumquia
dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut
labore et magnam aliquam quaerat voluptatem. Ut
enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem
eum fugiat quo voluptas nulla pariatur?
</li>
</ul>
</div>
</li>
<li>
<a class="personName" href="#">John Matthews</a>
<div class="person">
<ul>
<li class="portrait">
<img src="pix/johnmatthews.jpg" alt="John Matthews">
</li>
<li class="title">Middle Manager</li>
<li class="office">307 Bldg 1</li>
<li class="phone">4 3082</li>
<li class="email">john.matthews(at)company.com</li>
<li class="bio">
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit
aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt.
</li>
</ul>
</div>
</li>
<li>
<a class="personName" href="#">Sam Jackson</a>
<div class="person">
<ul>
<li class="portrait">
<img src="pix/samjackson.jpg" alt="Sam Jackson">
</li>
<li class="title">Deputy Assistant</li>
<li class="office">457 Bldg 1</li>
<li class="phone">4 3494</li>
<li class="email">sam.jackson(at)company.com</li>
<li class="bio">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</div>
</li>
<li>
<a class="personName" href="#">Jenifer Applethwaite</a>
<div class="person">
<ul>
<li class="portrait">
<img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
</li>
<li class="title">Senior Technician</li>
<li class="office">327 Bldg 1</li>
<li class="phone">4 9430</li>
<li class="email">jenifer.applethwaite(at)company.com</li>
<li class="bio">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</li>
</ul>
</div>
</li>
</ul>注意整个
<ul>闭合元素被赋予了一个值为infolist的id属性，。 在此<ul>结构中，每个<li>元素包含一个锚点元素<a>，带有一个 "class" 属性，值为 "personName"。 此外，每个嵌入的个人情况列表都包括在一个<div>中，class属性值为 "person"。 此外，每条个人情况都有一个反映其语义的类属性值。 -
保存该文档。
-
现在,我们将向项目添加以前代码段中涉及的 .jpg 肖像。从之前下载的 .zip 归档中检索
pix/目录，将整个目录复制到项目文件夹中，将其与index.html和js/目录同级放置。 稍后，NetBeans 将自动更新“项目”窗口，可以看到该项目中已经添加了一个新目录。 -
切换至浏览器，刷新。
我们还要说明本文档的许多问题。首先，在列表中快速扫描以找到您要找的人变得更加困难：必须滚动页面查看大量可能和当前利益无关的信息。四个联系人的列表都是可管理的，但如果人数上升到 50 人（举例来说），使用列表将变得更加困难。其次，没有任何信息保存头部信息，也没有任何信息含有区别性的类型图特征，表明其目的或表明其相对该页面其他条目的重要性。第三，该文档看起来是简单的，不大可能很美观地插入大多数 Web 站点的设计，特别是有很强图形特征的设计。我们将使用 jQuery 折叠对象组合 CSS 样式表来解决这些问题。
为项目添加一个 jQuery 插件
刚开始添加到项目中的 jQuery 库只为项目带来了一个基本功能集。幸运的是，通过各种 jQuery 插件下载和安装的方式为项目添加新功能也是很容易的。这些插件都仅仅是在 Web 浏览器初始化 Web 页面时和 jQuery 一起加载的 JavaScript 文件。
-
为了实现我们想要的折叠效果，首先要为项目添加两个插件：
ui.core.js和ui.accordion.js。 可从之前下载的js/目录中的 .zip 归档中检索到这两个插件。 -
将这两个文件放到之前在 NetBeans 文件夹下面创建的
js/目录中。 -
在文档头部输入两个引用这两个新文件的
<script>标记，紧靠引用核心 jQuery 库jquery-1.2.6.js的<script>标记。使用现有的<script>标记作为模型。 -
删除我们在
(document).ready函数中创建的测试代码。我们不再需要它了。也请删除出于测试目的而创建在<style>标记内的.blue样式。
head 标记应如下所示：
<head>
<meta charset="utf-8">
<title>jQuery test project</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>让静态、无样式的列表接受折叠行为就和添加一行 jQeury 代码一样简单。将此行输入(document).ready函数：
$("#infolist").accordion();在此行代码中，#infolist 是一个 CSS 选择器，连接到一个唯一的 DOM 元素中，该元素有一个值为 infolist（换言之，即联系列表）的 id 属性。 它由一个 . 连接到 jQuery 指令，以使用 accordion() 方法来显示此元素。
返回 Web 浏览器并刷新。单击其中一个姓名（除了顶部第一个），查看实际的折叠效果。jQuery 不仅处理将 DOM 动态化和响应用户鼠标单击的所有详情，还要确保所有条目都占据相同的垂直高度。这种对细节的关注是 jQuery 的典型特点，使用户更进一步认识到 Web 应用程序是完善和专业的。
现在我们还要添加一些代码，目前这些代码还不会带来什么不同的影响，但稍后将在本教程最后一部分中帮助我们完成本教程。我们将向 accordion() 函数中插入一个对象类型，该函数指定了 jQuery 将认作为每个联系人的头元素的 DOM 元素，我们将让 jQuery 不使用针对导航触发折叠效果的锚点元素 <a>。（换言之，<a> 将只用于触发该效果，浏览器将不会跟随 href="#" （在任何情况下为空。）修订过的函数如下所示：
$("#infolist").accordion({
header: '.personName',
navigation: false
});
使用 CSS 添加外观增强
我们的项目现有具有了我们想要的行为。我们将添加一组 CSS 样式界定来解决此问题，这些界定将影响 DOM 中的一些元素和元素的一些类的显示。
-
在 NetBeans 中，在项目的
源文件节点单击鼠标右键（在 Mac 中，使用 ctrl-click）。 -
选择“
新建 >”。 -
选择“
层叠样式表”。 -
将文件命名为
styles并单击“完成”。 -
项目中出现了一个名为
styles.css新文件，并已在编辑器中打开。 -
使用以下 CSS 代码替换
styles.css文件的全部内容：body { width: 40em; margin: auto; }
a { outline: none; }
.ui-accordion {
margin: 0; padding: 0;
}
.ui-accordion li {
list-style-type: none;
border-bottom: 2px solid white;
}
.ui-accordion li .ui-accordion-header {
margin: 0; padding: 0 1em;
font: bold 14px/28px sans-serif;
color: #eef;
background-color: #aaf;
text-decoration: none;
display: block;
}
a.personName:hover { color: white; }
ul.infolist { display: block; }
.person {
background-color: #eef;
margin: 0; padding: 0;
border-bottom: 1px solid #ccf;
}
.person ul { padding: 0 3em 2em; }
.person ul li {
padding-top: 1em;
border: 0 none;
}
li:before {
color: #66f;
font-weight: bold;
display: inline-block;
width: 4.5em;
}
li.portrait img {
float: right;
margin: 1em;
border: 1px solid #ccf;
}
li.title:before { content: "Title: "; }
li.office:before { content: "Office: "; }
li.phone:before { content: "Phone: "; }
li.email:before { content: "E-mail: "; }
li.bio:before { content: "Bio: "; }
通过指定以下内容，styles.css 中的 CSS 实现了各种格式化任务：
- 元素间距和相对位置，
- 特定元素的宽度和高度，
- 各种元素的颜色，和
- 针对联系人姓名使用普通无衬线字体。
或许,最有趣的一点就是，在 CSS 样式表的最后几行内指定了用于标识文档各个语法部分的文本标签的内容。通过将此类条目放入样式表，如果需要，我们能够通过对此文件做一项编辑，很容易地改变文本标签的所有实例。
仍需将新的样式表连接到 Web 应用程序。我们将使用 @import CSS 指令导入样式表并将其应用到 DOM 的元素。
-
在 NetBeans 编辑器中打开
index.html。打开style标记。 -
在打开和关闭
style标记处，输入以下内容：@import url("styles.css"); -
保存。
切换至 Web 浏览器并刷新，查看应用到该文档的 CSS 样式。效果与以下类似：
选择列表中任意姓名（当前显示的联系人下面）将显示实际的折叠效果，还有我们定义了的 CSS 样式。作为一个小练习，请标注页面中各种元素的位置、间距和颜色并检查 CSS 样式表，看看您是否能确定它们分别遵照了哪条（些）规则。
进一步的优化措施
修改动画效果
我们可以在此处结束本教程，您将会对 jQuery 的运行有基本的理解。但 jQuery 也提供一种简单的机制，可以进行各种似乎变化无限的调整和定制为证明这一点，我们将修改单击除当前显示的联系人外的联系人链接时触发的滑动动画。我们将添加一个 jQuery 效果来实现这一些。
-
在您之前下载的 .zip 归档中找到文件 "jquery.easing.js"。
-
将此文件放入项目文件夹的
js/目录中。 -
将以下
script标记放到ui.accordion.js脚本标记之后，(document).ready函数的script标记之前。<script type="text/javascript" src="js/jquery.easing.js"></script> -
更改
accordion()函数中的对象字面值，如下所示：$("#infolist").accordion({
header: '.personName',
animated: 'easeslide',
navigation: false
});注意：对象类型中的参数可以任意顺序排列，由逗号隔开。请记住,数组中最后一个元素后面不能跟逗号，这点很重要。
-
保存，切换至浏览器并刷新。选择一个除正在显示的联系人以外的联系人时，您会发现该项切换的动作起初很快，逐渐变慢，然后在最后阶段加速。
-
回到 NetBeans 中，将
easeslide更改为bounceslide。 -
保存，然后在浏览器中再次刷新该页面。测试时，您将看到向上的方向中切换进行的很平缓，而在向下的方向中，却出现了反弹效果。
修改页面内容
我们也可以使用 jQuery 修改 Web 页面的内容。您可能已经注意到，由于使用带括号的英语文字单词 "at"，即(at)，来替换 @ 的这种转换，样例数据集（联系人列表）中使用的电子邮件地址被 弄乱。 这样做是为了防止垃圾收割机通过万维网的公共页面轻易地获取有效电子邮件地址。这样做很聪明，但却至少存在两个缺点。一个缺点是垃圾收割机变得更复杂了，一些垃圾收割机已经知道了这种 (at) 转换。另一个缺点是不允许个人通过单击电子邮件链接来向那个人键入消息，这妨碍了可用性和预期行为。
可以使用 defuscator.js jQuery 插件来解决这两个问题，该插件可在之前下载的 .zip 归档中找到。
-
将 "defuscator.js" 放在
js/目录中。 -
向页面中添加一个引用它的脚本链接，正如我们之前所做的那样。
-
将以下代码行添加到
(document).ready函数最后，但在最后一组大括号-括号-分号});之前。$(".email").defuscate();此命令只连接到所有
class="email"并运行defuscate.js插件的 DOM 元素。 -
保存并刷新浏览器。请注意每个 "(at)" 都已被 "@" 所替换，现在电子邮件链接为可点击状态，并如预期运行。
关于 defuscator.js 有一点很有趣，任何 文本都可放在括号 () 中间来代替 "at"。 函数将以相同方式运行。这使其更加强壮，从而应对装备更精良的垃圾收割机。
结束语
在本教程中，您了解了如何在项目中安装 jQuery 以及如何使用 jQuery 语法编写基本指令。您了解了 jQuery 如何使用和 CSS 选择器类似的变量与“文档对象模型”进行交互,从而影响 Web 页面中元素的外观和行为。您也了解了如何将 jQuery 插件添加到项目中从而为 Web 页面引入高度可定制的增强功能。
此外，您还了解到 jQuery 可被用于修改 Web 页面的内容，并将静态页面元素转为更动态的元素。