• 9.jQuery工具方法


    # jQuery工具方法
    - 1.$.type() 判断数据类型 $.isArray() $.isFunction() $.isWindow()
    ```js
    console.log($.type(undefined));//undefined
    console.log($.type('abc'));//string
    console.log($.type(123));//number
    console.log($.type(true));//boolean
    console.log($.type(function(){}));//function
    console.log($.type(null));//null
    console.log($.type({}));//object
    console.log($.type([1,2,3]));//array
    console.log($.type(new Date()));//date
    console.log($.type(new Number()));//number
    console.log($.type(new Person()));//object 自定义对象
    ```

    - 2.$.trim() 消除前后空格

    - 3.$.proxy() 改变this指向,返回一个函数,此函数改变了原来函数的指向
    ```js
    function show(){
        console.log(this);
    }

    var obj = {
        name:"nihao",
        age:12
    };

    var showProxy = $.proxy(show, obj);//改变this指向,并返回改变后的函数
    show();//window
    showProxy();//obj对象
    ```
    ```js
    var list = {
        init : function(){
            this.ms = 123;
            this.dom = document.getElementById('demo');
        },
        bindEvent:function(){
            this.dom.onclick = $.proxy(this.show(), this);
        },
        show :function(){
            console.log(this.produseMs(this.ms));
        },
        produseMs :function(){
            return ms + 234;
        }
    };

    list.init();
    ```

    - 4.$.noConflict()防止冲突
    ```js
    $c = $.noConflict();//防止$变量命名冲突,这样$c就是替代了原来的$
    $c('.demo').width();
    ```

    - 5.$.each()循环 $.map()
    ```js
    var arr = [1,2,3];
    $.each(arr, function(index, ele){
        console.log(ele);
    });

    $.map(arr, function(index, ele){
        return ele * index;
    })
    console.log(arr);
    ```


    - 6.parseJSON() 严格json字符串转换成对象 - 原生JSON.parse();
    ```js
    var json = '{"a" : 123,"b" : "str","c" : true}'
    var a = $.parseJSON(json);
    ```

    - 7.$.makeArray() 类数组转换成数组
    ```js
    //传一个类数组,变成数组
    var obj = {
        0 : 'a',
        1 : 'b',
        2 : 'c',
        length : 3
    }
    var arr = $.makeArray(obj);
    ```

    - 8.$.extend()插件扩展(加到工具方法)
    $.自定义方法
    ```js
    //1.扩展方法
    $.extend({
        definedRandom : function(start, end){
            var len = end - start;
            return Math.random() * len + start;
        }
    });//定义产生随机数的方法
    $.definedRandom(5, 10);
    //2.浅层克隆
    $.extend(obj1, obj2);//把obj2中的内容浅度复制到obj1中
    //3.深层克隆
    $.extend(true, obj1, obj2);//把obj2中的内容深度复制到obj1中
    ```

    - 9.$.fn.extend()插件扩展(加到实例方法里面)
    $().自定义方法
    ```js
    //1.扩展方法
    $.fn.extend({
        drag : function(){
            var disX,
                disY,
                self = this;

            $(this).on('mousedown',function(e){
                disX = e.pageX - $(this).offset().left;
                disY = e.pageY - $(this).offset().top;
                $(document).on('mousmove', function(e){
                    $(self).css({left:e.pageX - disX, top:e.pageY - disY});
                });
                $(document).on('mouseup', function(e){
                    $(docment).off('mousemove').off('mouseup');
                });
            });

            return this;
        }
    });//定义元素拖拽的方法
    $().definedRandom(5, 10);
    ```

    - 10.$.ajax() 网络
    ```js
    //参数obj
    //属性 url:请求地址
    //type: 'GET' 或者 'POST'
    //data: 请求数据信息
    //success: 请求成功后的处理函数
    //error: 请求失败后的处理函数
    //complete:请求完成的处理函数 最后执行
    //context:改变函数上下文
    //timeout:请求超时
    //async:true false 是否异步
    //dataType: 'jsonp'
    $.ajax({
        url:'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person',
        type: 'GET',
        dataType:'jsonp',
        data:{
            username:'qwe',
            password:'123456'
        },
        success:function(res){
            //res:请求成功后的返回数据
            console.log(res);
            consolt.log(this);
        },
        error:function(e){
            console.log(e.status, e.statusText);//状态码和状态名称
        },
        complete: function(e){

        },
        context:$('.wrapper')//改变this的指向
    });
    ```

    - 11.回调管理者Callbacks()
    ```js
    var cb = $.callbacks('once');//once:回调只执行一次; memory:具有记忆功能,后面add的回调函数,fire执行时,也会被执行; unique:添加相同的回调处理函数会被去重; stopOnFalse:回调函数中返回false,后面的回调处理函数不会在执行
    //回调处理函数
    function a(x, y){
        console.log('a', x, y);
    }
    function b(x, y){
        console.log('b', x, y);
    }
    cb.add(a,b);
    cb.fire('10', '20');
    cb.fire('10', '20');
    ```
    ```js
    var cb = $.callbacks('memory');//once:回调只执行一次; memory:具有记忆功能,后面add的回调函数,fire执行时,也会被执行; unique:添加相同的回调处理函数会被去重
    //回调处理函数
    function a(x, y){
        console.log('a', x, y);
    }
    function b(x, y){
        console.log('b', x, y);
    }
    cb.add(a,b);
    cb.fire('10', '20');
    function c(x, y){
        console.log('c', x, y);
    }
    cb.add(c);
    ```
    ```js
    var cb = $.callbacks('unique');//once:回调只执行一次; memory:具有记忆功能,后面add的回调函数,fire执行时,也会被执行; unique:添加相同的回调处理函数会被去重
    //回调处理函数
    function a(x, y){
        console.log('a', x, y);
    }
    function b(x, y){
        console.log('b', x, y);
    }
    cb.add(a,b);
    cb.add(a,b);
    cb.fire('10', '20');
    ```
    ```js
    var cb = $.callbacks('stopOnFalse');//once:回调只执行一次; memory:具有记忆功能,后面add的回调函数,fire执行时,也会被执行; unique:添加相同的回调处理函数会被去重; stopOnFalse:回调函数中返回false,后面的回调处理函数不会在执行
    //回调处理函数
    function a(x, y){
        console.log('a', x, y);
    }
    function b(x, y){
        console.log('b', x, y);
        return false;
    }
    function c(x, y){
        console.log('c', x, y);
    }
    cb.add(a,b,c);
    cb.fire('10', '20');
    ```
     
    以上是markdown格式的笔记
  • 相关阅读:
    基础学习笔记之opencv(9):Mat图像扫描
    Android开发历程_7(ListView和ProgressBar控件的学习)
    基础学习笔记之opencv(13):基本绘图
    Qt学习之路_5(Qt TCP的初步使用)
    基础学习笔记之opencv(7):ubuntu下opencv在Qt中的使用
    EM算法学习笔记_1(对EM算法的简单理解)
    Android开发历程_1(从1个activity跳转到另一个activity)
    Matlab成长之路_1(图片,视频,摄像头的读取和显示)
    深入理解JavaScript系列(41):设计模式之模板方法
    深入理解JavaScript系列(44):设计模式之桥接模式
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12893226.html
Copyright © 2020-2023  润新知