jQuery 工具方法
之前的方法叫实例方法，是基于选出来的对象进行操作，
工具方法是不用基于选择出来的东西进行操作了，往往操作一些原生的数据类型，比如对象、原始值、this、去空格...
一、判断数据类型
原生typeof()返回的数据类型，使用价值低了点
undefined、String、Number、Boolean、Object(Function、null)、Array
$.type()
原生typeof()返回数据是什么类型，$.type()返回数据是什么？
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
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（原生typeof返回object）
console.log($.type({})); // object
console.log($.type([1,2,3])); // array
</script>$.type返回的标记是"字符串"
console.log(typeof $.type([1,2,3])); // string
时间对象，对比两种方法返回的结果
console.log($.type(new Date())); // date console.log(typeof(new Date())); // object
包装类不如成哥封装的好，因为除了返回number，还要知道这是一个数字类型的对象
console.log($.type(new Number())); // number
所以结合typeof接着判断一次
console.log($.type(new Number()) + typeof(new Number())); // numberobject
字面量对象 和 自定义的对象，返回的都是object
function Person(){}
console.log($.type(new Person())); // object
console.log($.type({})); // object下面三个方法是jQuery出于效率做出的方法，一般在源码里调用，手册上查不到，
在jQuery库源码里需要严谨的判断传的的值
$.isArray() es5数组里也演变出了isArray方法
判断是不是数组
console.log($.isArray([1,2,3])); // true
$.isFunction()
匿名函数是一个索引返回true
console.log($.isFunction(function(){})); // true立即执行函数看的是false，
console.log($.isFunction( (function (){})()) ); // false因为立即执行函数返回的是undefined，所以$.isFunction判断返回false
console.log((function (){})()); // undefined$.isWindow()
后期编程涉及到iframe，跨越的编程的时候，判断是不是window就有些重要了
console.log($.isWindow(window)); // true
二、消除空格
$.trim()
$.trim()去掉前后的空格，与原生字符串里有trim()方法没有什么区别
var str = ' 1 2 3 '; console.log(str.trim()); console.log($.trim(str));
传的是数字，返回字符串类型数字
var num = 123; console.log($.trim(num)); // "123"
三、改变函数的this指向
$.proxy()
改变函数的this指向，有点类似于bind函数
show函数里的this默认指向window，通过$.proxy()改变指向obj，没有改变show方法，返回了一个新的方法里面this指向的是obj
参数一，要改变的show函数，
参数二，要指向的obj对象
function show(){
console.log(this);
}
var obj = {
name: 'Glee',
age:37
}
var showProxy = $.proxy(show, obj);
showProxy(); // {name: 'Glee', age: 37}$.proxy()源码是用call()和apply()写的
小例子，单对象式编程
init: function(){
}
一般独立成块的功能，都有一个init启动函数，初始起始的意思
bindEvent: function(){
}
这种编程形式，模块化写的很清晰，绑定事件单独一个方法，绑定事件全部写在bindEvent里面，接下来在调用就完事了
show: function(){
}
是事件处理函数
produseMs: function(ms){
}
生成信息的函数，是辅助show函数出现的
show方法里的this指向的是dom对象，不是list对象
<div id="demo" style="width:100px;height:100px;background-color:coral;"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var list = {
init: function(){
this.ms = 123;
this.dom = document.getElementById('demo');
this.bindEvent();
},
bindEvent: function(){
this.dom.onclick = this.show; // 这里的this是dom，dom调用的show方法
},
show: function (){
console.log(this); // <div id="demo" style="width:100px;height:100px;background-color:coral;"></div>
console.log(this.produseMs(this.ms)); // Uncaught TypeError: this.produseMs is not a function at HTMLDivElement.show
// 这的this指向不是list对象是dom元素，dom元素上没有prOduseMs方法所以报错，而且this也调用不了ms
},
produseMs: function (ms){
return ms + 234;
}
}
list.init();
</script>$.proxy方法修改show方法里的this，指向改成list对象
var list = {
init: function(){
this.ms = 123;
this.dom = document.getElementById('demo');
this.bindEvent();
},
bindEvent: function(){
this.dom.onclick = $.proxy(this.show, this); // 在这里把show方法里的this指向改成list对象
},
show: function (){
console.log(this.produseMs(this.ms));
},
produseMs: function (ms){
return ms + 234;
}
}
list.init();四、防止冲突
$.onConflict()
当其它库也用$做全局变量时，jQuery可以通过$.onConflict()方法转换，比如$c取代原来的$
<div id="demo" style="width:100px;height:100px;background-color:coral;"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var $c = $.noConflict();
$c('#demo').click(function(){
$c(this).css({backgroundColor: 'tomato'});
});
</script>五、循环
$.each()
$().each()是对前面选出来的集合进行循环处理叫实例方法，
$.each()叫工具方法是数组foreach()的前身，有了foreach以后$.each()基本不怎么用了，现在它只针对数组、类数组、对象而存在的
循环数组
var arr = ['a', 'b', 'c', 'd'];
$.each(arr, function (index, ele){
console.log(index, ele);
});
// 0 'a'
// 1 'b'
// 2 'c'
// 3 'd'循环对象
var obj = {
one:'aaa',
two:'bbb',
three:'ccc'
}
$.each(obj, function(key, value){
console.log(key, value);
});
// one aaa
// two bbb
// three ccc$.map()
es5的map()方法就是来源于$.map()
map()方法不改变原数组，返回一个新数组，所以就关注返回值return，把需要公式写在返回值里面
var arr = [1,2,3,4];
var arrNew = $.map(arr, function (index, ele){
return ele * index;
});
console.log(arrNew); // [0, 2, 6, 12]六、json字符串转成对象
$.parseJSON()
原生的JSON.parse()和$.parseJSON()是一样的，JSON.parse()方法把一个符合json格式的字符串，转换成纯粹意义的json
// 严格的json格式，属性名和属性名都要用双引号
var json = '{"number":"123", "string":"王珞丹", "boolean":true}';
// 把json格式的字符串转成json
console.log($.parseJSON(json)); // {number: '123', string: '王珞丹', boolean: true}$.parseJSON()的源码就一行 JSON.parse(data + "") data加空字符串的形式
json格式必须规范
定义json的时候，属性名不加双引号没什么问题，
如果想把字符串形式的json转成正常json对象，必须写严格的json格式，属性名和属性名都要用双引号，单引号都不行，属性值是布尔值或数字不用引号
七、类数组转成数组、制作数组
$.makeArray()
1、基本的用法，只传一个参数
类数组obj转换成数组，类数组obj不变
var obj = {
0 : 'a',
1 : 'b',
2 : 'c',
length : 3
}
var arr = $.makeArray(obj);
console.log(arr); // ['a', 'b', 'c']
console.log(obj); // {0: 'a', 1: 'b', 2: 'c', length: 3}slice方法空截取，也能把类数组变成数组
var obj = {
0 : 'a',
1 : 'b',
2 : 'c',
length : 3
}
var arr = [].slice.call(obj, 0);
console.log(arr); // ['a', 'b', 'c']把slice方法写在类数组obj里，obj自己直接调用就ok了
var obj = {
0 : 'a',
1 : 'b',
2 : 'c',
length : 3,
slice : Array.prototype.slice
}
var arr = obj.slice(0);
console.log(arr); // ['a', 'b', 'c']2、延伸的用法，一般传两个参数
参数一填字符串"d"，参数二填类数组，会把前面字符串"d"添加到类数组里面去，改变类数组obj
var obj = {
0 : 'a',
1 : 'b',
2 : 'c',
length : 3
}
$.makeArray('d', obj);
console.log(obj); // {0: 'a', 1: 'b', 2: 'c', 3: 'd', length: 4}前面填数组arr，第二个参数填类数组obj，能把数组arr挨个的加到类数组obj里面去，lenght长度也变成6位了
var obj = {
0 : 'a',
1 : 'b',
2 : 'c',
length : 3
}
var arr = [1,2,3];
console.log($.makeArray(arr, obj)); // {0: 'a', 1: 'b', 2: 'c', 3: 1, 4: 2, 5: 3, length: 6}前面传数字类型5，后面传数组arr，把5放到数组里面了
var arr = [1, 2, 3]; console.log($.makeArray(5, arr)); // [1, 2, 3, 5]
前面是数组，后面是类数组，把类数组依次放到数组里面去了
var obj = {
0 : 'a',
1 : 'b',
2 : 'c',
length : 3
}
var arr = [1, 2, 3];
console.log($.makeArray(obj, arr)); // [1, 2, 3, 'a', 'b', 'c']结论，底层就是一个拼接，
把前面的放到，后面第二个参数里面去，
后面的是什么类型，最后的结果就是什么类型