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格式的笔记
posted @ 2020-05-15 10:05  lanshanxiao  阅读(219)  评论(0编辑  收藏  举报