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 写的简单进度条控件
Jan 22 Javascript
JQuery live函数
Dec 24 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
vue实现计步器功能
Nov 01 Javascript
JS array数组检测方式解析
May 19 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
PHP 工厂模式使用方法
2010/05/18 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
DOM事件探秘篇
2017/02/15 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python+Django+apache的配置方法详解
2016/06/01 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python如何代码集体右移
2020/07/20 Python
python中的unittest框架实例详解
2021/02/05 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
考试作弊被抓检讨书
2014/01/10 职场文书
求职个人评价范文
2014/04/09 职场文书
环保项目建议书
2014/08/26 职场文书
医德医魂心得体会
2014/09/11 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
2015年女职工工作总结
2015/05/15 职场文书
人生遥控器观后感
2015/06/11 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server