我的jQuery第五天clone,data()and事件方法

jQuery实例方法-DOM操作

事件方法

1. on()
2. one()
3. off()

clone()

• 克隆，克隆元素，包括类名和行间属性，自定义属性，可以传布尔参数，ture就会克隆事件
• 使用场景：用户去操作DOM复制，拖拽排序

 <div class="demo"></div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('.demo').clone().appendTo('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="./js/jquery-1.8.3.min.js"></script>
    <script>
        // $('.demo').clone().appendTo('body');
        var studentArr =  [
            {
                name : '洲',
                age : 18,
                class : 1
            },
            {
                name : '王',
                age : 14,
                class : 2
            },
            {
                name : '李',
                age : 11,
                class : 4
            },
            {
                name : '刘',
                age : 14,
                class : 3
            }
        ]
        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()

• 针对DOM对象，不会映射在行间样式，会存在jQ对象中，数据的存储，存什么值就是什么值

<div class="demo"></div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>

        $('.demo').data('AAA', 'zhou');
        $('.demo').data({
            name : 'zhou',
            age : 18,
            sex : true
        })
        //用法，类似于购物车结算
            <div class="wrapper">
        <div class="tpl">
            <p></p>
            <span></span>
            <button>add</button>
        </div>
   
    <p class="show">
        <span>sum</span>
        <span class="sum">0</span>
    </p>
</div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        var shopArr = [
            {
                name : '苹果',
                zl : '19kg',
                jg : 20,
                id : '1001'
            },
            {
                name : '西瓜',
                zl : '59kg',
                jg : 56,
                id : '2002'
            },
            {
                name : '香蕉',
                zl : '39kg',
                jg : 40,
                id : '3003'
            },
        ]
        shopArr.forEach(function(ele, index){
            var oCloneDom = $('.tpl').clone().removeClass('tpl');
            oCloneDom.data({
                id : ele.id,
                jiage : ele.jg,
                zl : ele.zl
            }).find('p')
                    .text(ele.name)
                        .next()
                             .text(ele.jg);
        oCloneDom.insertBefore($('.show'))
        });
        $('.wrapper button').click(function(){
           $('.sum').text(+$('.sum').text() + ($(this).parent().data('jiage')))
        })
    </script>

on()

• 系统事件，传两个参数，第一个是事件，第二个可传可不传，元素,同一事件可以绑定多个函数

<div class="demo" style="width: 100px;height: 100px;background-color: red;"></div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        //1. type 2. selector 3.data 4.handle
        $('.demo').on('click', , function(){
            alert(0)
        })
         $('.demo').on('mouseenter', , function(){
            alert(0)
        })
        //三个参数
         $('.demo').on('click',{name : "111"},function(e){
            console.log(e.data)
        })
        $('.demo').on('click',true,function(e){
            console.log(e.data)
        })

        </script>
         <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    //三个参数
    <script>
        $('ul').on('click', ,'li',function(e){
            alert($(e.target).text())
        })
        $('<li>9</li>').appendTo($('ul'))
    </script>

one()

<a href="https://baidu.com" target="_black">111</a>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        //双击执行百度，单击执行淘宝
        $('a').one('click', function(){

            window.open("https://taobao.com")
            
        })
    </script>

off()

• 解绑事件

<div class="demo" style="width: 100px;height: 100px;background-color: red;"></div>
<script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        function clickOne(){
            console.log('clickOne')
        }
        function clickTwo(){
            console.log('clickTwo')     
        }
        $('.demo').on('click',clickOne)
        $('.demo').on('click',clickTwo)
        function enterOne(){
            console.log('enterOne')
        }
        function enterTwo(){
            console.log('enterTwo')
        }
        $('.demo').on('mouseenter',enterOne)
        $('.demo').on('mouseenter',enterTwo)
        $('demo').off()//解绑所有
        $('demo').off('click')//对应所有点击事件解绑
        $('demo').off('cilck',clickOne)//只解绑对应事件的函数
    </script>