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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
js实现延迟加载的方法
Jun 24 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
js类型检查实现代码
2010/10/29 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python实现爬虫下载漫画示例
2014/02/16 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python程序退出方式小结
2017/12/09 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
领导干部培训感言
2014/01/23 职场文书
林肯就职演讲稿
2014/05/19 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
同意转租证明
2015/06/24 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript