clone data

.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操作

 

转载于:https://www.cnblogs.com/tianya-guoke/p/10542147.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值