13.4　用于操作HTML的更多函数

我们常常需要动态地添加、删除和修改一个页面的HTML。例如，当访问者单击表单上的一个提交按钮时，我们可能想要让“Send form information.Please wait.”文本出现在屏幕上。或者，当访问者的鼠标光标悬停在一张照片上时，我们想在照片的顶部显示一个框，其中带有标题和照片拍摄者。在这两种情况下，我们都需要给页面添加HTML。我们在4.7节学习了大多数的常见的函数。这里只是一个快速回顾：

·. text（）使用你传递给函数的选择来替换一个选择中的文本。例如：

$（'#error'）.text（'You must supply an e-mail address'）；

·. html（）像.text（）一样工作，但是允许你插入HTML而不只是文本：

$（'#tooltip'）.html（'＜h2＞Esquif Avalon＜/h2＞＜p＞Designed for canoe camping.＜/

p＞'）；

高级用户诊断室

给DOM遍历设置一个.end（）

为了编写最少的代码干最多的活儿，jQuery允许我们将函数串联到一起使用。本书4.6.4节介绍了串联功能，但是，概括起来说，它允许你选择某些页面元素，对它们做一些事情，然后对它们做些这样或那样的其他的事情，而只需要将一个函数添加到另一个函数之后就可以做到这些。例如，如果你想要选择页面上的所有的段落，并且让它们淡出视线然后再淡入视线，可以编写下面的代码：

$（'p'）.fadeOut（500）.fadeIn（500）；

可以将任意多个函数链接到一起，包括前面讨论的DOM遍历方法。例如，你可能选择了一个＜div＞标签，在其周围添加一个边框，然后选择了该＜div＞中的所有＜a＞标签，并且更改其文本颜色，如下所示：

$（'div'）.css（'outline'，’2px red solid'）.

find（'a'）.css（'color'，'purple'）；

将其分解为代码片段，其含义为：

1.$（'div'）选择所有的＜div＞。

2..css（'outline'，’2px red solid'）给该div添加一个2像素的红色边框。

3..find（'a'）随后将选择从div更改为div中的所有＜a＞标签。

4..css（'color'，'purple'）使得所有链接（不是div标签）的文本变为紫色。

当把一个DOM遍历函数添加到链中的时候，会改变选择。例如，在上面的代码中，jQuery首先选择该div，然后在链的中间，将选择更改为div中的链接。但是，有时候，你可能想要让选择回到其最初状态。换句话说，你想要选择一个对象，然后选择和第一次选择相关的另一个对象，然后，再回到第一个选择。例如，假设当一个访问者单击不透明度为50%的一个div的时候，你想要该div淡入到不透明度为100%，更改该div中的每个标题的颜色，并且给该div中的每个p添加一个背景颜色。一个动作（例如单击）需要触发页面上不同元素的数个操作。做到这点的一种方法如下所示：

$（'div'）.click（function（）{

$（this）.fadeTo（250，1）；//fade div in

$（this）.find（'h2'）.

css（'color'，’#F30'）；

$（this）.

find（'p'）.

（'backgroundColor'，’#F343FF'）；

}）；//end click

这就是串联真正能够起作用的地方，我们将调用$（this）一次并将所有的函数链接到一起，而不是调用$（this）3次。然而，如果你试图像下面这样将各个函数链接起来，将会遇到麻烦：

$（'div'）.click（function（）{

$（this）.fadeTo（250，1）

.find（'h2'）.css（'color'，’#F30'）

.find（'p'）.（'backgroundColor'，’#F343FF'）；

}）；//end click

这看上去是对的，但是，在.find（'h2'）之后会出现问题，它将选择从div更改为div中的h2标签。当下一个.find（）函数（.find（'p'））运行的时候，jQuery试图找到h2标签中的p标签，而不是div标签中的p标签。幸运的是，你可以使用jQuery的.end（）函数，将对选择的修改“返回”到其最初的状态。在上面的例子中，你可以使用.end（）将选择返回到div，然后，找到div中的＜p＞标签，代码如下所示：

$（'div'）.click（function（）{

$（this）.fadeTo（250，1）

.find（'h2'）.css（'color'，’#F30'）.end（）

.find（'p'）.（'backgroundColor'，’#F343FF'）；

}）；//end click

注意.css（'color'，’#F30）；之后的.end（），这段代码将jQuery选择返回到div，以使得后续的.find（'p'）可以找到div中的所有＜p＞标签。

·. append（）允许在一个元素末尾添加HTML（例如，在一个div的末尾，刚好在结束＜/div＞标签之前）。对于向一个列表底部添加项目来说，这个函数很适用。

·. prepend（）允许在元素开始处添加HTML（例如，在一个div的开始处，刚好在开始＜div＞标签之后）。

·. before（）在选择之前添加内容。

·. after（）像.before（）一样工作，只不过内容添加在选择之后（在结束标签之后）。

使用哪个函数，完全取决于你最终的目标是什么。本书4.4节提到，JavaScript只不过是将Web设计师通常手动执行的任务自动化了，例如，添加HTML和CSS来创建Web页面。如果你要编写一个程序以动态地向一个页面添加内容，例如一个工具提示、一条错误消息、一个提取引用等，只需要想象一下，最终完成的产品应该是什么样的以及实现它们所需的HTML和CSS。

例如，如果当访问者的鼠标光标悬停在一个按钮上的时候，你想要在页面上创建一条特定的消息，尝试构建一个显示该消息的Web页面而不使用JavaScript，只使用CSS和HTML。一旦你有了有效的HTML/CSS模型，看一下用来实现这一效果的HTML：它是否放在某些其他的元素之前？如果是，使用.before（）函数。HTML应该在一个特定的标签中吗？那么，使用.append（）或.prepend（）函数。

jQuery还提供了从页面删除内容的一些函数：

·. replaceWith（）使用你传递给函数的任何内容来完全替换选择（包括标签以及标签中的所有内容）。例如，使用文本“processing……”替换页面上的一个提交按钮，可以使用如下这段代码：

$（'：submit'）.replaceWith（'＜p＞processing……＜/p＞'）；

·. remove（）从DOM删除选择，实际上是将其从页面删除。例如，要将ID为error的一个div从页面中删除，可以编写如下代码：

$（'#error'）.remove（）；

尽管你可能只需要上面列出的以及第4章介绍的那些函数，jQuery还提供了其他函数，给出了操作页面的HTML的其他方式。

·. wrap（）会将一个选择中的每个元素包围到一对HTML标签中。例如，如何对页面上的图像创建一种好看的标题效果呢？首先，我们可以选择页面中的图像，将它们包围到带有诸如figure这样的class的一个＜div＞中，并且在该div中添加一个＜p＞标签，这个＜p＞标签有一个caption的class。然后，使用CSS，我们可以将div和caption格式化为想要的形式。如下是完成这些工作的一种方法：

1//loop through the list of images

2$（'img'）.each（function（）{

3//save reference to current image

4 var$this=$（this）；

5//get the alt property for the caption

6 var caption=$this.attr（'alt'）；

7//add the HTML

8$this.wrap（'＜div class="figure"＞＜/div＞'）.after（'＜p＞’+caption+’＜/p＞'）；

9}）；//end each

上面的代码首先选择页面上的所有图像，然后使用.each（）函数（参见4.9节）遍历图像的列表；在第4行，循环中的当前图像存储到一个变量中（正如本书13.1.2节所述，真是一种好的做法）。在第6行，从图像获取alt属性，并将其存储到名为caption的一个变量中。最后，第8行将图像包围到一个＜div＞标签中，然后，使用前面介绍的.after（）函数在图像的后面添加一个标题。

注意：在教程chapter13文件夹下的wrap.html文件中，可以看到第8行中的.wrap（）代码的应用。

我们将一组完整的标签传递给.wrap（）函数，如$（'p'）.wrap（'＜div＞＜/div＞'），甚至可以传递下面这样的一组嵌套标签：

$（'#example'）.wrap（'＜div id="outer"＞＜div id="inner"＞＜/div＞＜/div＞'）；

在上面的代码中，jQuery将用两个div来包围选择，使得HTML如下所示：

＜div id="outer"＞

＜div id="inner"＞

＜div id="example"＞This is the original code on the page＜/div＞

＜/div＞

＜/div＞

·. wrapInner（）将选择中的每个元素的内容包含到HTML标签中。例如，假设你的HTML中有如下的代码：

＜dio id="outer"＞

＜p＞This is the contents of outer＜/p＞

＜/div＞

如果浏览器遇到代码$（'#outer'）.wrapinner（'＜div id="inner"＞＜/div＞'），在页面中它将HTML翻译成如下形式：

＜div id="outer"＞

＜div id="inner"＞

＜p＞This is the contents of outer＜/p＞

＜/div＞

＜/div＞

·. unwrap（）直接将包围选择的父标签删除。例如，假设一个页面的HTML如下：

＜div＞

＜p＞a paragraph＜/p＞

＜div＞

运行代码$（'p'）.unwrap（），将会把该HTML修改为：

＜p＞a paragraph＜/p＞

外围的＜div＞直接删除了。注意，和这里讨论的其他函数不同，.unwrap（）不接收参数，换句话说，在.unwrap（）的括号中不要放置任何东西，否则它无法工作。

·. empty（）删除一个选择的所有内容，但是，保留选择不动。例如，假设你的Web页面上有一个ID为messageBox的div。使用JavaScript，你可以动态地给这个div添加内容，以便当访问者与页面交互的时候，向他显示消息。你可能使用很多目录标题、图像和段落来填充这个div，以便为访问者提供状态消息。你可能想要在程序中的某个位置清空这个框（例如，没有当前消息要显示的时候），但是，保留该框在那个位置，以便稍后可以为其添加状态消息。为了删除该框中的所有标签，我们可以使用如下所示的代码：

$（'#messageBox'）.empty（）；

和.unwrap（）一样，.empty（）也不接收参数。

注意：jQuery提供了甚至更多的函数来操作HTML。可以在http：//api.jquery.com/category/manipulation/了解到所有的这些函数。