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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
vue打包后显示空白正确处理方法
Nov 01 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
js实现跟随鼠标移动的小球
Aug 26 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绘图中显示不出图片的原因及解决
2014/03/05 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
法律专业自我鉴定
2013/10/03 职场文书
会计电算化个人自我评价
2013/11/17 职场文书
总账会计岗位职责
2014/03/13 职场文书
环保倡议书
2014/04/14 职场文书
小学元宵节活动总结
2015/02/06 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书