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 Eval 函数使用
Mar 23 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
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
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
创建简单的node服务器实例(分享)
2017/06/23 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python中创建二维数组
2018/10/17 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
2014年终工作总结范本
2014/12/15 职场文书
先进单位申报材料
2014/12/25 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
Python制作动态字符画的源码
2021/08/04 Python