jQuery文档处理之克隆用法详解

范范 · 发表于 2018-3-26 22:26:20

jQuery文档处理之克隆用法详解

在页面html编写中，在分页的时候，我们都需要使用ajax去后台获取数据，然后在前端组织html代码，然后替换当前页面的html内容，以便于达到分页，获取下一页，或者其它指定页面的页面内容。
在此，使用克隆的方法，就会方便很多，减少很多html的组织编写。
在后期维护的时候，也便于维护，只用修改首页的html样式等，就可以达到所有页面都修改。

jQuery中的克隆方法为：

[C#] 纯文本查看 复制代码

clone([Even[,deepEven]])   克隆匹配的DOM元素并且选中这些克隆的副本。

参数详解如下：

[C#] 纯文本查看 复制代码

Events  Boolean
一个布尔值（true 或者 false）指示事件处理函数是否会被复制

Events[,deepEvents]Boolean
1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

实例1

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("b").clone().prependTo("p")

输出结果：

[JavaScript] 纯文本查看 复制代码

<b>Hello</b><p><b>Hello</b>, how are you?</p>

附件html代码：

[HTML] 纯文本查看 复制代码

<b>Hello</b><p>, how are you?</p>

从上例可以看出实现的效果如下：
克隆所有 b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

实例2

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

点击一次后，页面输出结果如下：

[HTML] 纯文本查看 复制代码

<body><button>Clone Me!</button><button>Clone Me!</button>

附件html代码：

[HTML] 纯文本查看 复制代码

<button>Clone Me!</button>

实现结果如下：
点击当前按钮后，会克隆一个一模一样的按钮，放到该按钮后，并且当前按钮，也可以实现点击创建功能

站长苏飞 · 发表于 2018-3-27 17:39:12

强烈支持楼主ing……

		自动登录	找回密码
密码			马上注册

[Jquery] jQuery文档处理之克隆用法详解

相关帖子