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格式的筆記