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常用小技巧小结
Dec 29 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
js文字横向滚动特效
Nov 11 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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
删除无限级目录与文件代码共享
2006/07/12 PHP
一个查看session内容的函数
2006/10/09 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
小程序云开发实战小结
2018/10/25 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python 闭包的使用方法
2017/09/07 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
Python编写单元测试代码实例
2020/09/10 Python
Python通过字典映射函数实现switch
2020/11/06 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
优秀志愿者事迹材料
2014/02/03 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
运动会广播稿200字
2015/08/19 职场文书