jQuery复制节点用法示例(clone方法)


Posted in Javascript onSeptember 08, 2016

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("ul li").click(function(){
    $(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素
  })
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("ul li").click(function(){
    $(this).clone(true).appendTo("ul"); // 注意参数true
    //可以复制自己,并且他的副本也有同样功能。
  })
});
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图如下:

jQuery复制节点用法示例(clone方法)

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

Javascript 相关文章推荐
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jQuery动画与特效详解
Feb 01 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 #Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 #Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 #Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 #Javascript
js发送短信倒计时的简单实现方法
Sep 08 #Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 #Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
小程序实现多选框功能
2018/10/30 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
小程序实现投票进度条
2019/11/20 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
2014年司机工作总结
2014/11/21 职场文书
民政工作个人总结
2015/02/28 职场文书