14.jQuery 工具函数

   工具函数是指直接依附于jQuery 对象，针对jQuery 对象本身定义的方法，即

全局性的函数。它的作用主要是提供比如字符串、数组、对象等操作方面的遍历。

 

一．字符串操作       

   在jQuery 中，字符串的工具函数只有一个，就是去除字符串左右空格的工具函

数：$.trim()。

 //$.trim()去掉字符串两边空格
var str = '           jQuery         ';

alert(str);

alert($.trim(str));    

二．数组和对象操作

   jQuery 为处理数组和对象提供了一些工具函数，这些函数可以便利的给数组或对象

进行遍历、筛选、搜索等操作。

//$.each()遍历数组
var arr = ['1', '2', '3', '4'];

$.each(arr, function (index, value) {

   $('#box').html($('#box').html() + index + '.' + value + '<br />');

});

//$.each()遍历对象
$.each($.ajax(), function (name, fn) {

   $('#box').html($('#box').html() + name + '.' + '<br /><br />');

})

注意：$.each()中index 表示数组元素的编号，默认从0 开始。

//$.grep()数据筛选
var arr = [5,2,9,4,11,57,89,1,23,8];

var arrGrep = $.grep(arr, function (element, index) {

   return element < 6 && index < 5;

});

alert(arrGrep);

注意：$.grep()方法的index 是从0 开始计算的。

//$.map()修改数据
var arr = [5,2,9,4,11,57,89,1,23,8];

var arrMap = $.map(arr, function (element, index) {

   if (element < 6 && index < 5) {

      return element + 1;

   }

});

alert(arrMap);

//$.inArray()获取查找到元素的下标
var arr = [5,2,9,4,11,57,89,1,23,8];

var arrInArray = $.inArray(1, arr);

alert(arrInArray);

注意：$.inArray()的下标从0 开始计算。

//$.merge()合并两个数组
var arr = [5,2,9,4,11,57,89,1,23,8];

var arr2 = [23,2,89,3,6,7];

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
$.isPlainObjet(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($.isEmptyObject(obj));


//判断是否由{}或new Object()创造出的对象
var obj = window;

alert($.isPlainObject(obj));

注意：如果使用new Object('name');传递参数后，返回类型已不是Object，而是

字符串，所以就不是纯粹的原始对象了。

 
 
 

//判断第一个DOM 节点是否含有第二个DOM 节点
alert($.contains($('#box').get(0), $('#pox').get(0)));

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

//$.isNumeric 检测数据是否为数值
alert($.isNumeric(5.25));

//$.isWindow 检测数据对象是否为window 对象
alert($.isWindow(window)); 

四．URL 操作

   URL 地址操作，在之前的Ajax 其实已经讲到过。只有一个方法：$.param()，将

对象的键值对转化为URL 键值对字符串形式。

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

   name : 'xxx',

   age : 100

};

alert($.param(obj));

五．浏览器检测

   由于在早期的浏览器中，分IE 和W3C 浏览器。而IE678 使用的覆盖率还很高，所

以，早期的jQuery 提供了$.browser 工具对象。而现在的jQuery 已经废弃删除了

这个工具对象，如果还想使用这个对象来获取浏览器版本型号的信息，可以使用兼容插件。

$.browser 对象属性

属性	说明
webkit	判断webkit 浏览器，如果是则为true
mozilla	判断mozilla 浏览器，如果是则为true
safari	判断safari 浏览器，如果是则为true
opera	判断opera 浏览器，如果是则为true
msie	判断IE 浏览器，如果是则为true
version	获取浏览器版本号

//获取火狐浏览器和版本号
alert($.browser.mozilla + ':' + $.browser.version);

   注意：火狐采用的是mozilla 引擎，一般就是指火狐；而谷歌Chrome 采用的引擎

是webkit，一般验证Chrome 就用webkit。

   还有一种浏览器检测，是对浏览器内容的检测。比如：W3C 的透明度为opacity，而

IE的透明度为alpha。这个对象是$.support。

$.support 对象部分属性

属性名	说明
hrefNormalized	如果浏览器从getAttribute("href")返回的是原封不 动的结果，则返回true。在IE 中会返回false，因为他 的URLs 已经常规化了
htmlSerialize	如果浏览器通过innerHTML 插入链接元素的时候会序列 化这些链接，则返回true，目前IE 中返回false
leadingWhitespace	如果在使用innerHTML 的时候浏览器会保持前导空白字 符，则返回true，目前在IE 6-8 中返回false
objectAll	如果在某个元素对象上执行 getElementsByTagName("*")会返回所有子孙元素，则为 true，目前在IE 7 中为false
opacity	如果浏览器能适当解释透明度样式属性，则返回true， 目前在IE 中返回false，因为他用alpha 滤镜代替
scriptEval	使用appendChild/createTextNode 方法插入脚本代码 时，浏览器是否执行脚本，目前在IE 中返回false，IE 使用.text 方法插入脚本代码以执行
style	如果getAttribute("style")返回元素的行内样式，则 为true。目前IE 中为false，因为他用cssText 代替
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.support/官网也不

提供属性列表和解释，给出一个Modernizr第三方小工具来辅组检测。

六．其他操作

   jQuery 提供了一个预备绑定函数上下文的工具函数：$.proxy()。这个方法，可

以解决诸如外部事件触发调用对象方法时this 的指向问题。

//$.proxy()调整this 指向
var obj = {

   name : 'xxx',

   test : function () {

      alert(this.name);

   }
};
$('#box').click(obj.test);    //alert(this.name) this = box 输出空
$('#box').click($.proxy(obj, 'test'));    //alert(this.name) this = obj 输出xxx