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

    xiaoxiao2024-03-27  122

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

    1.13 克隆DOM元素

    1.13.1 问题你需要克隆/复制DOM的一部分。**1.13.2 解决方案**jQuery提供clone()方法复制DOM元素。它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了。结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素。在下面的代码中,将克隆一个元素,然后用插入方法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>

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

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

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

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

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

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

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

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

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

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

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

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

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)