.clone( )

    <div class="demo"></div>

    <script src = "./jquery.js"></script>

    <script>

        $('.demo').clone().appendTo('body');//克隆 demo上的属性也会克隆过来(自定义属性也可)

    </script>
    <div class="demo" style="width:100px; height:100px;background-color:red"></div>

    <script src = "./jquery.js"></script>

    <script>

        $('.demo').click(function(){

            alert(0)；

        });

        $('.demo').clone(true).appendTo('body');

        //事件在clone()里添加参数才能克隆 (并不是所有事件都能克隆)
        $('.demo').prop('data-log','1111')

        console.log( $('.demo').clone.prop('data-log','1111') )//prop里的信息克隆不出来(用data)

        //data jQuery dom 存信息存数据存状态 (data信息存在jQuery对象上,jQuery对象与dom对象有一定映射关系)

        //data 用法：

        $('.demo').data('data-duyi','cg')//值不会存在行间样式之中，但是可以取出来

        $('.demo').data({

            name:'li',

            age:15,

            sex:true

        });//可以传多个值  在控制台取值：$('.demo').data('name'),可以取出name值

        //age是15 取出的就是数字15  用attr取值都是字符串






    <style>

        .tpl{

            display:none;

        }

    </style>

<body>

    <table class="stb">

        <tr>

            <th>姓名</th>

            <th>年龄</th>

            <th>班级</th>

        </tr>

        <tr class="tpl">

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

    <script src="./jquery.js"></script>

    <script>

        //克隆使用的场景

        var studentArr = [

            {

                name: 'li',

                age: 18,

                class: 3

            },

            {

                name: '小王',

                age: 20,

                class: 2

            },

            {

                name: '小李',

                age: 23,

                class: 1

            },

        ];

        var oWrapper = $('.stb')

        studentArr.forEach(function(ele,index){

           var oCloneDom = $('.tpl').clone().removeClass('tpl');

           oCloneDom

             .find('td')

                .eq(0)

                  .text(ele.name)

                    .next()

                      .text(ele.age)

                        .next()

                          .text(ele.class)

            oWrapper.append(oCloneDom);

        })

    </script>






.data( )








data跟dom 有映射但是不是直接操作dom，所以效率更高  （attr就需要dom操作）


jQuery中一般用data ，比attr和prop更高效，省去dom操作
												


											
clone  data的更多相关文章
	

    
								
  1. jQuery使用（六）：DOM操作之元素包裹、克隆DOM与data的综合应用
		
    包裹 wrap() wrapInner() wrapAll() unwrap() clone() 数据缓存机制 data 文档处理(包裹) 1.1.wrap()--将所匹配的元素用其他元素结构化标签包 ...
    
		
    2. 
						
  2. 高性能javascript（记录三）
		
    DOM(文档对象模型)是一个独立的语言,用于操作XML和HTML文档的程序接口(API).在游览器中,主要用来与HTML文档打交道,同样也用在Web程序中获取XML文档,并使用DOM API用来访问文 ...
    
		
    3. 
						
  3. JS 复制对象
		
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
    
		
    4. 
						
  4. 解决HTML5布局，兼容IE问题
		
    当我们使用h5的新标签,header,footer,aside,section,article...时,会遇到低版本IE不兼容问题,如下图: 解决方案:引入如下JS代码,即可 (这里我就直接放源码了, ...
    
		
    5. 
						
  5. 移动端图表插件jChart.js的修改
		
    bug1: 折线图,设置datasetGesture : true时,Y轴的刻度值居然会变.会变也就算了,居然没地方设置不能变. bug2: 折线图,设置tap.point事件,和datasetGes ...
    
		
    6. 
						
  6. 【原】使用SQLite打开本地*.db文件
		
    1.下载安装文件:官网下载地址:http://www.sqlite.org/download.html32位安装包:http://www.sqlite.org/2016/sqlite-tools-wi ...
    
		
    7. 
						
  7. JavaScript 变量克隆和判断变量类型
		
    一.变量克隆 在js中经常会遇到将一个变量赋值给一个新的变量这种情况,这对于基本类型很容易去实现,直接通过等号赋值就可以了,对于引用类型就不能这样了.(注:像函数,正则也可以直接通过等号赋值) 这里我 ...
    
		
    8. 
						
  8. -_-#【减少 DOM 访问】“离线”更新节点，再将它们添加到树中
		
    Minimize DOM Access javascript 之 DOM 优化 <!DOCTYPE html> <html> <head> <meta cha ...
    
		
    9. 
						
  9. EBS 数据库预克隆日志
		
    ora02@[/u07/CCTEST02/db/tech_st/11.1.0/appsutil/scripts/CCTEST02_test01] $ T02_test01/StageDBTier_06 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Ubuntu16.04上添加用户以及修改用户所属的组
			
    我的问题是这样的,我的本地的电脑上有一个用户以及一个用户组,我还想添加其他的用户,并且这个用户属于这个已有的用户组 <鸟哥的linux私房菜>针对的是centos系统,还是有一些不一样 实 ...
    
			
    2. 
						
  2. 使用 JavaScript 截屏
			
    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...
    
			
    3. 
						
  3. Linux命令行下：把程序放后台执行，以及从后台继续执行程序
			
    把任务放到后台用 & 和 Ctrl+z 让后台任务从停止状态转为运行状态用 bg %N 把后台任务调回到前台用 fg %N 查看所有任务用jobs
    
			
    4. 
						
  4. C++学习（三十八）（C语言部分）之 排序（冒泡 选择 插入 快排）
			
    算法是解决一类问题的方法排序算法 根据元素大小关系排序 从小到大 从大到小冒泡 选择 插入 快排希尔排序 归并排序 堆排序 冒泡排序 从头到尾比较 每一轮将最大的数沉底 或者最小数字上浮 选择排序 1 ...
    
			
    5. 
						
  5. shell脚本实现定时备份某文件
			
    1:目标       实现在图像化界面输入需要备份的源文件路径.目标路径,定时的时间.然后通过输入的信息,把需要备份的源文件打包放到指定的目标路径下以执行定时任务的时间为子目录       把/she ...
    
			
    6. 
						
  6. SQL SERVER 月、季、年统计与常用查询语句汇总
			
    一.SQL SERVER 月.季.年统计查询 --本天 SELECT *FROM dbo.TableName WHERE DATEDIFF(DAY,TimeField,getdate())= 0; - ...
    
			
    7. 
						
  7. MVC 中Scripts.Render、Styles.Render
			
    在ASP.NET MVC项目中,可以在视图中利用Scripts.Render.Styles.Render统一加载js.css文件,需要利用BundleConfig类来Add 各种Bundle,例如:b ...
    
			
    8. 
						
  8. MVC  Ajax.BeginForm  提交上传图片
			
    吃水不忘挖井人,如果对你有帮助,请说声谢谢.如果你要转载,请注明出处.谢谢! 异步提交时,出现图片不能上传. 起初我定格在  System.Web.Mvc  中.查询源码时,也是没有问题的.那问题出现 ...
    
			
    9. 
						
  9. Python 算术运算符
			
    Python 算术运算符 运算结果为浮点数 除法:/ 整除: // 求余计算: % 求余运算可以用于固定时间的检测,比如说每10分钟进行一次什么样的操作,则:minute % 10 乘方运算:
    
			
    10. 
						
  10. jsp 进度条
			
    <html>  <head>  <title>进度条</title>  <style type="text/css">  ...
    
			
    11.