.clone ( ) : 把选中元素复制一个包含自定义属性、特性等（不包括事件），如果想包含事件加一个参数true；
eg：事件也可以被复制！
<div>吕星辰</div>
<script>
$("div").on("click",function(){
console.log("000")
})
$("div").clone(true).appendTo("body");
</script>注意：当我们用prop给元素添加自定义属性的时候，接着把元素clone，此时，自定义属性却没有被复制出来！
eg：下边我们用prop向div添加自定义属性data-name，接着克隆div，取出data-name的值，结果打印：undefined
<div class="box">吕星辰</div>
<script>
$(".box").prop("data-name","lvxingchen");
console.log( $(".box").clone().prop("data-name")) //打印的是undefined
</script>经过测试，data方法存储的数据，克隆接着取出属性值，也会是undefined，所以以后存储自定义属性接着clone且要取值的时候，我们用attr！！（它的底层是操作dom对象），或者先克隆在存值也行。
.data（）：也是可存或取自定义属性，但是区别在data是用来存储数据、信息、状态；也可以存储一个集合（用对象形式存储），实际上是存储在jQuery对象上边；而且取值的时候值是什么类型，取出来就是什么类型；它的底层是操作jq对象而不是dom对象，从性能上要比attr高；
eg：给div加上一些自定义属性，我们分别取下再看下数据类型：
<div class="box">000</div>
<script>
$(".box").data({
name:"lvxingchen",
age:20,
position:"coder"
})
console.log($(".box").data("name") + "--->" + $.type( $(".box").data("name")) );
console.log($(".box").data("age") + "--->" + $.type( $(".box").data("age")) );
console.log($(".box").data("position"));
</script>
附带一个data方法的小应用：
<style>
.box{
display:none;
}
</style>
//下边这个div我们设置为模板
<div class="box">
<p></p >
<p></p >
<button></button>
</div>
<h3>总价为：</h3>
<h3 class="allPrice"></h3>
<script>
//模拟数据
var arr = [
{content:"小米,价格为 ",price:900,id:"1001"},
{content:"华为,价格为 ",price:1000,id:"1002"},
{content:"iphone,价格为 ",price:1200,id:"1003"},
];
//把数据渲染到页面
arr.forEach(function(ele,index){
var $tem = $(".box").clone().removeClass("box").addClass("template");//克隆模板
$tem.data({
productId:ele.id,
pri:ele.price
}).children().eq(0).text(ele.content)
.next().text(ele.price)
.next().text("点击购买"+(index+1));
$tem.appendTo("body");//把模板插入到页面
})
//点击显示购买总价，一元运算可把字符串类型转化为数字类型
$("button").on("click",function(){
$(".allPrice").text( +$(".allPrice").text() + $(this).parent().data("pri") );
console.log( $(this).parent().data(productId) )
})
</script>效果如下：分别点击三个按钮：总价即是三个价格的总和，打印出来的id分别是按钮1 、按钮2、按钮3对应的id
