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 相关文章推荐
JS 操作符整理[推荐收藏]
Nov 15 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
js跳转页面方法总结
Jan 29 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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 $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
详解python中index()、find()方法
2019/08/29 Python
Python内置函数locals和globals对比
2020/04/28 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
白酒业务员岗位职责
2013/12/27 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
保护环境建议书400字
2014/05/13 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
运动会报道稿大全
2015/07/23 职场文书
自考生自我评价
2019/06/21 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js