.clone( )
<div class="demo"></div>
<script src = "./jquery.js"></script>
<script>
$('.demo').clone().appendTo('body');//克隆 demo上的属性也会克隆过来(自定义属性也可)
</script>
<div class="demo" style="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操作