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高亮效果的二种实现方法
Sep 14 Javascript
javascript代码加载优化方法
Jan 30 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php 图片上传类代码
2009/07/17 PHP
PHP速成大法
2015/01/30 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
JSON 数据格式介绍
2012/01/13 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
js如何实现元素曝光上报
2019/08/07 Javascript
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Python中的函数作用域
2018/05/07 Python
python 函数中的参数类型
2020/02/11 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
总经理司机职责
2014/02/02 职场文书
生态养殖创业计划书
2014/05/06 职场文书
政府采购方案
2014/06/12 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python