快速查找栏目 dropdowndropdown

学科新技术

为Web编写脚本jQuery简介(3)

 点击OK保存该代码片段。

无论何时你需要使用jQuery文档准备好处理程序（document-ready handler）来插入一个<script>块，你只需要将插入点置于你想要添加相应块的位置，然后双击Snippets面板上的该代码片段即可。

动态地添加一个新段落

为了演示jQuery的工作原理，本练习在页面加载时，动态地为页面添加一个新段落。 坦率地说，它并不是jQuery的最佳用法，但它可以说明两个至关重要的功能：选中页面元素和使用jQuery方法。

继续使用与以前相同的文件。 此外，你也可以使用jq_02.html。

在文档准备好处理程序（document ready handler）中的空白行上，输入一个dollar符号，其后跟着一个开始圆括号。 Dreamweaver CS5.5 jQuery的代码提示功能将立即启用（参见图4）。

3.gif

图4. 当你输入文本时，Dreamweaver会提供jQuery代码提示

前两行代码提示是针对文档的，它能够应用于整个文档，而这个，则是应用于相应的事件目标。这两者都不适合本练习，因此，需要输入一个引号（单引号或者双引号均可）。

Dreamweaver能够自动地添加互相匹配的结束引号并能够显示HTML元素代码提示的列表（参见图5）。

4.gif

图5. 当你输入一个引号时，代码提示能够显示HTML元素

由于你希望选中<body>标签，因此输入bo并按下Enter/Return。 Dreamweaver能够补齐相应的标签名称并将插入点留在结束引号内。 由于jQuery使用CSS选择器来选择页面元素，因此Dreamweaver不能告知你是否准备简化该选择器。 在这种情形下，你已经完成相应操作。 将插入点移至结束引号的右侧，并输入一个结束圆括号。 现在，文档准备好处理程序（document ready handler）中的相应代码应该如下所示：

$(function() { $(body) });

这是jQuery选中页面的元素的方式。

在选中一个或者多个页面元素之后，你能够将jQuery方法应用于它们。 为了将新的HTML元素添加到已选中的元素中，你可以使用append()方法，将新的元素作为参数进行传递。

在$(body)之后输入一个点（或者句号）。 Dreamweaver CS5.5可以为所有能够应用于已选元素的jQuery方法提供代码提示功能。 选中append()方法，并给它传递一个HTML字符串，如下所示：

$(function() { $(body).append(<p>This paragraph was added dynamically.</p>); });

保存该页面，并在浏览器或者Live视图中对它进行观察。 相应的新段落已被添加到该页面（参见图6）。

5.gif

图6. 作为参数传递给append()的HTML已被添加到页面。