JQuery复制DOM节点的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery复制DOM节点的方法。分享给大家供大家参考。具体分析如下:

复制节点也是常用的DOM操作之一,例如很多购物网站的效果,用户不仅可以通过单击商品下方的“选择”按钮购买相应的产品,也可以通过鼠标拖动商品并将其放到购物车中。这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到购物效果。

HTML DOM结构如下:

<p class="nm_p" title="欢迎访问三水点靠木" >欢迎访问三水点靠木</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='C编程'>简单易懂的C编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery'>简单易懂的JQuery编程</li>
</ul>

如果单击<li>元素后需要再复制一个<li>元素,可以使用clone()方法来完成。

JQuery代码如下:

$(function(){
  $(".nm_ul li").click(function(){
    $(this).clone(true).appendTo(".nm_ul");
    // 复制当前点击的节点,并将它追加到<ul>元素
  }) 
});

在页面中单击随便一项后,列表最下方出现该项的新节点。

复制节点后,被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能(本例中是单击事件),可以使用如下JQuery代码:

$("ul li").click(function(){ 
 $(this).clone(true).appendTo("ul"); // 注意参数true 
 //可以复制自己,并且他的副本也有同样功能。 
})

在clone()方法中传递了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能(本例中是单击事件)。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
UI Events 用户界面事件
Jun 27 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
jQuery ajax应用总结
Jun 02 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
解析vue中的$mount
Dec 21 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
JavaScript中标识符提升问题
Jun 11 #Javascript
JQuery删除DOM节点的方法
Jun 11 #Javascript
JQuery插入DOM节点的方法
Jun 11 #Javascript
JQuery创建DOM节点的方法
Jun 11 #Javascript
JQuery查找DOM节点的方法
Jun 11 #Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 #Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 #Javascript
You might like
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
使用js实现数据格式化
2014/12/03 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
AngularJS获取json数据的方法详解
2017/05/27 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python网络编程详解
2017/10/31 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
django 信号调度机制详解
2019/07/19 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
电子信息专业自荐书
2014/02/04 职场文书
个人存款证明书
2014/10/18 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书