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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
JQuery 入门实例1
Jun 25 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
PassWord输入框代码分享
Jun 07 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
php中file_exists函数使用详解
2015/05/08 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
浅谈PHP封装CURL
2019/03/06 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
全面解析Python的While循环语句的使用方法
2015/10/13 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python实现简单http服务器
2018/04/12 Python
python递归函数绘制分形树的方法
2018/06/22 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python 同时读取多个文件的例子
2019/07/16 Python
django框架cookie和session用法实例详解
2019/12/10 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
介绍一下Java中的static关键字
2012/05/12 面试题
高三毕业典礼主持词
2014/03/27 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
售票员岗位职责
2015/02/15 职场文书
学校节水倡议书
2015/04/29 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Python实现滑雪小游戏
2021/09/25 Python