55-讨论

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

1.13.3　讨论

克隆方法对在DOM中移动DOM片段非常方便，尤其是在你打算复制和移动的不仅是DOM元素而且包括附加到克隆的DOM元素中的事件时。认真看看下面的HTML和jQuery：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<ul id="a">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
<ul id="b"></ul>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
 jQuery('ul#a li')
　　 .click(function(){alert('List Item Clicked')})
　　 .parent()
　　　　　.clone(true)
　　　　　　　 .find('li')
　　　　　　　 .appendTo('#b')
　　　　　.end()
　　 .end()
　　 .remove();
</script>
</body>
</html>

如果在浏览器中运行这段代码，它将克隆页面上附加了单击事件的 <li> 元素，将新克隆的元素（包括时间）插入空的 <ul> 中，然后删除克隆的 <ul> 元素。

这对于新的jQuery开发人员来说可能有点不可思议，所以我们一起来逐步观察这段代码，以便解释这个链式方法：

1． jQuery('ul#a li') =选择 id 属性为 a 的 <ui> 元素，然后选择该 <ui> 元素里的所有 <li> 元素。

2． .click(function(){alert('List Item Clicked')}) =为每个 <li> 添加一个单击事件。

3． .parent() =将选择集改为 <ul> 元素，遍历DOM。

4． .clone(true) =克隆 <ui> 元素和所有子元素，包括附加到克隆元素中的任何事件。这通过传递给 clone() 方法一个布尔值 true 完成。

5． .find('li') =现在，在克隆元素中，将元素集改为仅包含在克隆 <ui> 元素中的 <li> 元素。

6． .appendTo('#b') =获取选中的克隆 <li> 元素，并将它们放置在 id 属性为 b 的 <ui> 元素中。

7． .end() =返回前一个元素选择集，该集即克隆的 <ui> 元素。

8． .end() = 返回前一个元素选择集——克隆的原始 <ul> 元素。

9． .remove() =删除原始的 <ul> 元素。

对于复杂的jQuery语句来说，理解如何操纵选中的元素集或者返回前一个选择集都是至关重要的。

Previous 上一篇本节目录 Next 下一篇

55-讨论

1.13.3 讨论

1.13.3　讨论