学科新技术
为web编写脚本：jQuery简介(4)
现在，如果有必要的话，你能够使用jq_03.html对你的代码进行检查。
通过比较，范例文件中的dom_01.html能够使用标准JavaScript和由W3C DOM推荐的元素创建方法产生相同结果。 该页面<head>部分的<script>块应该如下所示：
<script> function addPara(text) { var body = document.getElementsByTagName(body)[0], p = document.createElement(p), content = document.createTextNode(text); p.appendChild(content); body.appendChild(p); } window.onload = function() { addPara(This paragraph has been added dynamically.); }; </script>
我相信你会同意利用jQuery完成这一任务的方法要更加简单和易于理解。 但是，千万不要将使用jQuery想象成是某种意义上的欺骗。 jQuery在后台所做的一切实际上均使用标准JavaScript。 它只是隐藏相应的复杂性并有助于保持你的理智。
链接jQuery方法
jQuery最能够节省时间的功能之一是它具有链接方法的能力。 这意味着你能够使用点符号对同一个已选元素应用多个方法。 下面是一个简单的展示它的工作原理的范例。
继续使用与以前相同的文件。 此外，你也可以使用jq_03.html。
将插入点置于分号之前，该分号位于jQuery文档准备好处理程序（document ready handler）的代码行的尾部，并按下Enter/Return以便插入一个新行。
为了保持代码整齐，在前行的$(body)之后，插入若干空格以便使用点符号对齐相应的插入点。 然后，输入一个点。 Dreamweaver再一次为jQuery方法提供代码提示功能。
从代码提示中选中addClass。 它能够插入方法名称，后面跟着一个开始圆括号。
输入一个引号。 Dreamweaver知道addClass()方法期盼一个CSS类的名称，并且它能够在附着在页面的样式表单中检测出一个名称为reverse的类。 因此，它能够为该类提供代码提示功能（参见图7）。 如果有更多的类存在，那么代码提示将按照字母顺序全部列举它们。
图7. jQuery代码提示能够检测位于该页面的样式表中的类
选中该reverse类，并添加一个结束圆括号。 现在，文档准备好处理程序（document ready handler）中的相应代码应该如下所示：
$(function() { $(body).append(<p>This paragraph was added dynamically.</p>) .addClass(reverse); });
保存该页面，并在浏览器或者Live视图中对它进行测试。 现在，在添加第二段的同时，jQuery脚本能够将reverse类应用到<body>，并将背景色改为黑色而文本颜色为白色（参见图8）。
图8. 两种jQuery方法均已应用到页面的<body>
现在，如果有必要的话，你能够使用jq_04.html对你的代码进行检查。
你能够将你喜欢的任意数量的方法链接到已选的元素。 在本范例中，你已没有必要将每一个方法均置于每一新行上。 虽然你可以在一个单行中链接它们，但是，像这样对代码进行分解会使得代码更加易于阅读和维护。
将事件处理程序与元素进行绑定
JavaScript简介（Introduction to JavaScript ）<至教程的链接>教程中的范例使用onClick属性将事件处理程序函数与一个链接进行绑定。 这是将事件处理程序与元素进行绑定的传统方法。 但是，它会将你限制在一个单一的事件处理程序中，并且会弄乱你的带有行为标记的HTML代码。 该现代方法与CSS相似，利用该方法可以将事件与页面元素动态地绑定而非嵌入到HTML中。 但很不幸的是，Internet Explorer使用与其它浏览器不同的事件模型，因此使得相应的必需代码变得复杂化。 jQuery通过一个简单的、跨浏览器的解决方案解决了该问题。
显示和隐藏HTML元素
下一个练习将显示如何将click事件与一系列<h2>元素进行绑定，以便于打开和关闭每个标题后的段落。 它引入在jQuery中广泛使用的匿名函数（anonymous functions）的概念。 匿名函数（anonymous function）与普通的函数是相同的，除了它没有名称这个事实之外。
打开jq_05.html。 该页面包含三个<h2>标题，每一个标题后面均有一个单一的段落。
在Code视图中，采用与第一个练习相同的方法附着一个jQuery库，并创建一个jQuery文档准备好事件处理程序（document-ready event handler）。
在jQuery文档准备好事件处理程序（document-ready event handler）中，使用相邻兄弟结合符（adjacent sibling combinator）（h2 + p）为<h2>标题后的段落创建一个jQuery选择器，如下所示：
$(function() { $(h2 + p) });
这将选中<h2>标题后的第一个段落。 在该页面上有三个标题，因此它能够选中每一个标题后的段落。
将hide()方法应用于该选择器，如下所示：
$(function() { $(h2 + p).hide(); });
当该页面加载时，它会隐藏相应的三个段落（参见图9）。
图9. 段落已被动态地隐藏
使用jQuery来隐藏相应的段落，而非设置显示属性为none，这意味着相应的文本仍能够在关闭JavaScript的浏览器中获取。
在下一行上，输入$$(h2)以便为<h2>标题创建一个jQuery选择器。 然后，输入一个点以便将jQuery方法应用于已选的元素。 如果你希望给标题添加一个click事件， 那么输入cli。 在Dreamweaver CS5.5中，这将显示click()方法的代码提示。 正如图10所示，你有三个选项。
图10. Dreamweaver显示click()方法的若干选项
第一个选项只不过插入一个click()，并且允许你添加任何你希望添加的代码。 第二个选项插入一个click()，其后跟着一个开始圆括号，它也允许你添加剩下的代码。 第三个选项自动地插入一个匿名函数（anonymous function）。 第三个才是你想要的选项。 选中它并按下Enter/Return。 现在，相应的代码如下所示：
$(function() { $(h2 + p).hide(); $(h2).click(function(e) { }); });
在该匿名函数（anonymous function）内部，当事件目标—一个<h2>标题—被单击时，你便能够编译你希望执行的代码。 在jQuery中引用该事件目标的选择器是$(this)。 你需要选中紧跟已单击标题之后的相应段落。 为方便起见，jQuery将提供next()方法，并且它将包含你想要选中的HTML元素名称的一个字符串作为它的参数。 并且为了在显示和隐藏元素之间进行切换，jQuery将提供一种方法，其名称为—你已经猜到了—toggle()。 当你将它们放在一起时，该代码应该如下所示：
$(function() { $(h2 + p).hide(); $(h2).click(function(e) { $(this).next(p).toggle(); }); });
保存该页面，并在浏览器或者Live视图中对它进行测试。 当你单击其中一个标题时，它会弹出打开，并且将剩下的内容向页面的下方移动（参见图11）。 单击相同的标题会再次隐藏该段落。 每一个标题及其相关段落都与其它部分独立操作—这都应该归功于jQuery的几行代码。
图11. 当你单击一个标题时，它会切换其下面段落的打开或关闭状态
