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

简介:

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

1.13 克隆DOM元素

1.13.1 问题
你需要克隆/复制DOM的一部分。
**
1.13.2 解决方案**
jQuery提供clone()方法复制DOM元素。它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了。结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素。在下面的代码中,将克隆一个screenshot元素,然后用插入方法appendTo()将这个副本附加到DOM中。实际上,在页面上插入了与现有的

  • 完全相同的一个结构:
<!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>

如果在浏览器中运行这段代码,它将克隆页面上附加了单击事件的screenshot元素,将新克隆的元素(包括时间)插入空的screenshot中,然后删除克隆的screenshot元素。

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

1.jQuery('ul#a li')=选择id属性为screenshot元素,然后选择该screenshot元素里的所有screenshot
元素。

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

3..parent()=将选择集改为screenshot元素,遍历DOM。

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

5..find('li')=现在,在克隆元素中,将元素集改为仅包含在克隆screenshot元素中的screenshot元素。

6..appendTo('#b')=获取选中的克隆screenshot元素,并将它们放置在id属性为b的screenshot元素中。

7..end()=返回前一个元素选择集,该集即克隆的screenshot元素。

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

9..remove() =删除原始的screenshot元素。

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

相关文章
|
29天前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
45 0
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
10天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
10天前
|
JavaScript 前端开发
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
42 4
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
10天前
|
JavaScript 前端开发 API
|
1月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
203 1
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
26 2