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

巴特西

clone data

最新文章

热门文章