《jQuery Cookbook中文版》——1.13　克隆DOM元素

最新推荐文章于 2024-07-24 11:09:48 发布

weixin_34336292

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量67

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://yq.aliyun.com/articles/97809

版权

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章，第1.13节，作者：【美】jQuery社区专家组著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.13　克隆DOM元素

1.13.1　问题
你需要克隆/复制DOM的一部分。

1.13.2　解决方案
jQuery提供clone()方法复制DOM元素。它的用法很简单，只要用jQuery函数选择DOM元素，然后在选择的元素集上调用clone()方法就可以了。结果是返回用于链接的DOM结构的一个副本，而不是原来选中的DOM元素。在下面的代码中，将克隆一个< ul>元素，然后用插入方法appendTo()将这个副本附加到DOM中。实际上，在页面上插入了与现有的< ul>完全相同的一个结构：

<!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>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</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').clone().appendTo('body');
</script>
</body>
</html>

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语句来说，理解如何操纵选中的元素集或者返回前一个选择集都是至关重要的。

weixin_34336292

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《jQuery Cookbook中文版》——1.13　克隆DOM元素

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章，第1.13节，作者：【美】jQuery社区专家组著，更多章节内容可以访问云栖社区“异步社区”公众号查看1.13　克隆DOM元素1.13.1　问题你需要克隆/复制DOM的一部分。1.13.2　解决方案jQuery提供clone()方法复制DOM元素。它的用法很简单，只要用jQ...
复制链接

扫一扫