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格式的笔记
