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中面向对象技术的模拟
Sep 25 Javascript
简单通用的JS滑动门代码
Dec 19 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
js只执行1次的函数示例
Jul 20 Javascript
js本地图片预览实现代码
Oct 09 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
Vue实现浏览器打印功能的代码
Apr 17 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常用函数小技巧
2008/09/11 PHP
php curl发送请求实例方法
2019/08/01 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JavaScript知识点整理
2015/12/09 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
教你打造完美的创业计划书
2014/01/06 职场文书
物流专业求职计划书
2014/01/10 职场文书
面试后的感谢信范文
2014/02/01 职场文书
校运会入场式解说词
2014/02/10 职场文书
购房意向书范本
2014/04/01 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis