Jquery李炎恢——31，32工具函数

学习要点：
1.字符串操作
2.数组和对象操作
3.测试操作
4.URL操作
5.浏览器检测
6.其他操作

工具函数是指直接依附于jquery对象，针对jquery对象本身定义的方法，即全局性的函数，它的作用主要是提供比如字符串、数组、对象等操作方面的遍历。

一、字符串操作
在jquery中，字符串的工具函数只有一个，就是去除字符串左右空格的工具函数：$.rim()。
//$.trim()去掉字符串两边空格
var str="             jquery         ";
alert(str);
aler($.trim(str));

二、数组和对象操作
jquery为处理数组和对象提供了一些工具函数，这些函数可以便利的给数组或对象进行遍历、筛选、搜索等操作。
//$.each()遍历数组
var arr=["张三","李四","王五","马六"]；
$.each(arr,function(index,value){
 $("#box").html($("#box").html()+index+"."+value+"</br>");
});

//$.each()遍历对象
$.each($.ajax(),function(name,fn){
 $("#box").html($("#box").html()+name+"."+value+"</br>");
});
注意：$.each()中index表示元素编号，默认从0开始。

//$.grep()数据筛选
var arr=[5,2,9,4,11,57,46,13,34,5];
var arrGrep=$.grep(arr,function(element,index){
 return element<6&&index<5;         //这里按道理是布尔值，但整体返回一个数组
});
alert(arrGrep);
注意：$.grep()方法的index是从0开始计算的。

//$.map()修改数据
var arr=[5,2,5,63,35,2,4,67,21,4,5];
var arrMap=$.map(arr,function(element,index){
 if(element<6&&index<5){
  return element+1;
 }
});
alert(arrMap);

//$.inArray()获取查找到元素的下标
var arr=[5,2,5,63,35,2,4,67,21,4,5];
var arrInArray=$.inArray(21,arr);
alert(arrInArray);
注意：$.inArray()的下标从0开始计算。

//$.merge()合并两个数组
var arr=[5,2,5,63,35,2,4,67,21,4,5];
var arr2=[34,56,3,22,34,78];
alert($.merge(arr,arr2));

//$.unique()删除重复的DOM元素
<div></div>
<div></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>

var divs=$(".div").get();
divs=divs.concat($(".box").get());
alert($(divs).size());
$.unique(divs);
alert($(divs).size);

//toArray()合并多个DOM元素组成数组
alert($("li").toArray());

三、测试操作

在jquery中，数据有着各种类型和状态。有时，我们希望能通过判断数据的类型和形状做相应的操作，jquery提供了五组测试用的工具函数。

函数名	说明
$.isArray(obj)	判断是否为数组对象，是返回true
$.isFunction(obj)	判断是否为函数，是返回true
$.isEmptyObject(obj)	判断是否为空对象，是返回true
$.isPlainObject(obj)	判断是否为纯粹对象，是返回true
$.contains(obj)	判断DOM节点是否含另一个DOM节点，是返回true
$.type(data)	判断数据类型
$.isNumeric(data)	判断数据是否为数值
$.isWindow(data)判断	数据是否未window对象

//判断是否为数组对象

var arr=[1,2,3];

alert($.isArray(arr));

//判断是否为函数

var fn=function(){};

alert($.isFunction(fn));

//判断是否为空对象

var obj={};

alert($.isPlainObject(obj));

//判断是否由{}或new Object()创造出的对象

var obj=window;

alert($.isPlanObject(obj));

注意：如果使用new Object("name");传递参数后，返回类型已不是Object，而是字符串，所以就不是纯粹的原始对象了。

//判断第一个DOM节点是否含有第二个DOM节点

alert($.contain($("#bos").get(0),$("#pox").get(0)));

//$.type()检测数据类型

alert($.type(window));

//$.isNumeric检测数据是否为数值

alert($.isNumeric(5.23));

//$.isWindow检测数据对象是否为Window对象

alert($.isWindow(window));

四、URL操作

URL地址操作，在之前的Ajax章节其实已经讲到过。只有一个方法：$.param(),将对象的键值对转化为URL键值对字符串形式。

//$.param()将对象键值对转换为URL字符串键值对

var obj={

name:"Lee",

age:100

}

alert($.param(obj));

五、浏览器检测

由于在早期的浏览器中，分IE和W3C浏览器。而IE678使用的覆盖率还很高，所以，早期的jquery提供了$.browser工具对象。而现在的jquery已经废弃删除了这个工具对象，如果还想使用这个对象来获取浏览器版本型号的信息，可以使用兼容插件。

属性：webkit，判断webkit浏览器，如果是则为true；

属性：mozila，判断mozila浏览器，如果是则为true；

属性：safari，判断safari浏览器，如果是则为true；

属性：opera，判断opera浏览器，如果是则为true；

属性：msie，判断webkit浏览器，如果是则为true；

属性：webkit，判断IE浏览器，如果是则为true；

属性：version，判断浏览器版本号

//获取火狐浏览器和版本号

alert($.browser.mozila+":"+$.browser.version);

注意：火狐采用的是mozila引擎，一般就是指火狐；而谷歌Chrome采用的引擎是webkit,一般验证Chrome就是webkit。

还有一种浏览器检测，是对浏览器内容的检测。比如：W3C的透明度为opacity，而IE的透明度为alpha，这个对象是$.support.

$.support对象部分属性

属性名：hrefNormalized；如果浏览器从getAttribute("href")返回的是原封不动的结果，则返回true，在IE中会返回false，以为他的URLs已经常规化了

属性名：htmlSerialize：如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接，则返回true，目前IE中返回false

属性名：leadingWithespace：如果在innerHTML的时候浏览器会保持前导空白字符，则返回true，目前在IE678中为false。

属性名：objectAll：如果在某个元素对象上执行getElementByTagName("*")会返回所有子孙元素，则为true，目前在IE7中为false。

属性名：opacity，如果浏览器能适当解释透明度样式属性，则返回true，目前在IE中返回false，因为他用alpha滤镜代替。

属性名：scriptEval，使用appendChild/creatTextNode方法插入脚本代码时，浏览器是否执行脚本，目前在IE中返回false，IE使用.text方法插入脚本代码以执行

属性名：style，如果getArribute("style")返回元素的行内样式，则为true。目前在IE中会返回false，因为他用sccText代替

属性名：tbody，如果浏览器允许table元素不包含tbody元素，则返回true。目前在IE中会返回false，他会自动插入缺失的tbody

属性名：Ajax，如果浏览器支持ajax操作，则返回true

//$.support.ajax判断是否能创建ajax

alert($.support.ajax);

//$.support.opacity设置不同浏览器的透明度

if($.support.opacity==true){

     $("#box").css("opacity","0.5");

}else{

     $("#box").css("filter","alpha(opacity=50)");

}

注意：由于Jquery越来越放弃低端的浏览器，所以检测功能在未来使用频率也越来越低。所以，$.brower已被废弃，而$.support.boxModel检测W3C或IE盒子也被删除。并且http://api.jquery.com/jQuery/官网也不提供属性和列表和解释，给出一个Modernizr第三方小工具来辅助检测。

六、其他操作

jquery提供了一个预备绑定函数上下文的工具函数：$.proxy()。这个方法，可以解决诸如外部事件触发调用对象方法时this的指向问题。

//$.proxy()调整this指向

var obj={

name:"Lee";

test:function(){

   alert(this.name);

   }

};

$("#box").click(obj.test);                              //指向的this为#box元素

$("#box").click($.proxy(obj,"test"));             //指向的this为方法属于对象box