jQuery移动和复制dom节点实用DOM操作案例


Posted in Javascript onDecember 17, 2012

本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考。

在做一个项目时,需要dom节点移动,如以下代码:

<div></div> 
<p></p>

需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便:
$('div').append($('p'))

这样即可把p标签移动到div标签里,千万不要写成这样:
$('div').append( $('p').html() )

这样只是把p标签里的内容复制到div标签里。

如果只是复制一份到div标签里,原来的标签还保留着,那么可以这么写:

$('div').append( $('p').clone(true))


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

而且当clone参数设置为true时还可以将按钮上绑定的事件一起复制到新按钮上

在clone()方法中传递了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。如果不希望事件也被复制,则可以这么写:

$('div').append( $('p').clone())

移动节点
将页面上的一个节点移动到另外一个地方可以用jq的内部和外部插入方法(append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore),直接将选中的节点传递进去就可以实现移动
<button>Move Me!</button> 
<div id="box"></div> 
实例 
$("button").click(function(){ 
$(this).appendTo($("#box")); 
//或者用append 
$("#box").append(this); 
});

复制节点也是常用的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()方法来完成,先来看看效果:
效果演示
欢迎访问三水点靠木图书馆
简单易懂的PHP魔法
简单易懂的C魔法
简单易懂的JavaScript魔法
简单易懂的JQuery魔法
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 
//可以复制自己,并且他的副本也有同样功能。 
})
Javascript 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 #Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 #Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 #Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 #Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 #Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 #Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python中字符串的格式化方法小结
2016/05/03 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
Python 处理图片像素点的实例
2019/01/08 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
商超业务员岗位职责
2014/03/12 职场文书
组织生活会发言材料
2014/12/15 职场文书
董事长秘书工作总结
2015/08/14 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记