jQuery事件笔记_jquery 事件笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_55770974/article/details/122049898

多事件注册

        $('div').on({
            mouseenter:function(){},
            click:function(){},
            mouseleave:function(){}
        })
        $('div').on('mouseenter mouseleave',function(){
            $(this).toggleClass('color')
        })

事件委派可针对未来新创建的元素

        $('ul').on('click','li',function(){})

解除事件

        //解除该元素所有事件
        $('ul').off()
        //接触元素所有指定事件
        $('ul').off('click')
        //解除事件委托
        $('ul').off('click','li')

单次执行事件

        $('div').one('click',function(){})

自动执行函数

        $('input').on({
               focus:function(){ $(this).val(123)},
               mouseenter:function(){ $(this).val(321)},
        })
        // 直接执行函数  
        // focus+trigger会触发元素默认行为 如文本框获得焦点变蓝
        //triggerHandler不会触发元素默认行为 
        $('input').focus()
        $('input').trigger('focus')
        $('input').triggerHandler('focus')
        triggerHandler只会触发元素类的第一个元素的事件如 
        <input type="text" class="z">
        <input type="text" class="z">
        只会给第一个input 触发focus事件

拷贝对象

    //相同属性名会覆盖原来数据 没有则添加        
    浅拷贝
    $.extend(a,b) 
 /*浅拷贝 如果拷贝对象中有复杂对象则会复制其地址值 更改复杂对象的值拷贝对象中复杂对象的值也会改变*/   
    $.extend(true,a,b)
    /*深拷贝 会将拷贝对象中所有数据复制 更改值不会影响拷贝对象 */

jQuery多库共存

       jQuery('div'); //jQuery==$
       var a=jQuery.noConflict();// 自己给jQuery调用定义一个名字

jquery插件

本地存储以及数组字符串间的转换

         // localStorage.setItem本地存储对象 只能存储字符串的数据格式
        //JSON.stringify() 将数组转换为字符串格式 来存储
        localStorage.setItem('todo',JSON.stringify(todolist));
        //获得本地存储的数据
        var data=localStorage.getItem('todo')
        //JSON.parse 将字符串数据转换为对象格式 来使用
        data=JSON.parse(data)
        删除本地存储中指定的对象
        localStorage.removeItem('todo')
        删除本地存储中全部对象
        localStorage.clear()