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 相关文章推荐
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
虫族 Zerg 历史背景
2020/03/14 星际争霸
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP实现简易blog的制作
2016/10/24 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
python实现汽车管理系统
2018/11/30 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
教师节促销活动方案
2014/02/14 职场文书
个人培训自我鉴定
2014/03/28 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书