【jQuery】jQuery实用工具函数

工具函数

在jQuery中，工具函数是指直接依附于jQuery对象，针对jQuery对象本身定义的方法，即全局性的函数，统称工具函数，或Utilities函数。

采用如下的格式进行调用：

$.函数名() 
或
jQuery.函数()

工具函数分类

根据工具函数处理对象的不同，可以将其分为下列几大类别：

浏览器的检测

在jQuery中，可以通过访问$.browser对象的属性获取浏览器的信息。$.browser对象即jQuery.browser对象，用于处理与浏览器相关的事务，该对象的属性如下：

属性名称	说明
webkit	如果是webkit相关的浏览器，则为true
mozilla	如果是mozilla相关的浏览器，则为true
safari	如果是safari浏览器，则为true
opera	如果是opera浏览器，则为true
msie	如果是ie浏览器，则是true
version	获取浏览器的版本号

盒子模型

通过 jQuery.support.boxModel对象返回的属性值，确定页面是否是标准的W3C盒子模型。该方法返回一个布尔值，如果是true表示是W3C盒子模型。

$.support.boxModel

数组和对象的操作

遍历数组

使用$.each()工具函数，其调用的语法格式如下：

$.each(obj, fn(para1, para2))

参数 obj 表示要遍历的数组或对象， fn 为每个遍历元素执行的回调函数，该函数包含2个参数， para1 表示数组的序号或对象的属性， para2 表示数组的元素或对象的属性的值

例如：

var arrStu = {"1":"2", "3":"4"};
$.each(arrStu, function(name, value){
	... ... // name: 1,3 value: 2 4
})

遍历对象

遍历对象，获取对象的属性和值。

数据筛选

使用工具函数jQuery.grep()，可以很方便的筛选数组中的任何元素，该函数的调用语法格式如下：

$.grep(array, function(elementOfArray, indexInArray), [invert])

参数array表示要筛选的数组，回调函数fn中可以设置两个参数，其中elementOfArray为数组中的元素，indexInArray为元素在数组中的序列号。另外，可选项[invert]为布尔值，表示是否根据fn的规则取反向结果，默认值为false，表示不取反。

例如：

var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.each(arrNum, function(ele, index){
	return ele > 5 && index < 8; // 元素值大于5其序号小于8
})

数据变更

要按指定条件修改数组中的所选元素，还需要调用另外一个工具函数$.map()，其调用的语法格式如下：

$.map(array, callback(elementOfArray, indexInArray))

参数array表示要变更的原数组，回调函数fn中可以设置两个参数，其中elementOfArray为数组中的元素，indexInArray为元素在数组中的序列号。

例如：

var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21];
var arrGet = $.map(arrNum, function(ele, index){
	if (ele > 5 && index < 8)// 元素值大于5其序号小于8
   ｛
        return ele + 1; // 变更后数据 9， 8， 10， 11
    ｝
})

数据搜索

要在数组中所有某个元素，可以使用工具函数$.inArray()，在工具函数$.inArray()中，如果找到了指定的某个元素，则返回该元素在数组中的索引号，否则，返回-1，其调用格式如下：

$.inArray(value, array)

参数value表示要搜索的对象，array表示搜索对象的数组。

字符串的操作

在jQuery中，如果要除掉字符中左右两边的空格符，可以使用工具函数$.trim()。该函数也是jQuery核心库中唯一一个针对字符串操作的工具函数，其调用语法格式如下：

$.trim(str)

参数str为需要删除左右两边空格符的字符串。

测试操作

jQuery中测试工具函数：

函数名称	说明	支持版本
$.isArray(obj)	返回一个布尔值，检测参数obj是否是一个数组对象，如果为true，则表示是	1.3以上
$.isFunction(obj)	返回一个布尔值，检测参数obj是否是一个函数	1.2以上
$.isEmptyObject(obj)	返回一个布尔值，检测参数obj是否是一个空对象	1.4以上
$.isPlainObject(obj)	返回一个布尔值，检测参数obj是否是一个纯粹对象，即对象是否通过{}或new Object()关键字创建	1.4以上
$.contains(container,contained)	返回一个布尔值，检测一个DOM节点是否包含另一个DOM节点	1.4以上

URL操作

工具函数$.param()，通过该函数可以使数组或jQuery对象按照name / value的格式进行序列化，普通对象按照 key/value的格式进行序列化。工具函数$.param()调用的语法格式如下：

$.param(obj, [traditional])

参数obj表示需要进行序列化的对象，该对象可以是数组，jQuery元素，普通对象，可选参数[traditonal]表示是否使用普通的方式浅层序列化。该函数返回一个序列化后的字符串。

工具函数扩展 - $.extend()

需要使用另外一个工具函数 $.extend()，通过该函数，可以定义自己的工具函数。

例如：

<script type="text/javascript">
    ; (function($){
    	$.extend({
            "MaxNum" : function(p1, p2){
        	    return (p1 > p2) ? p1 : p2;
            }
        });
    })(jQuery);

    ; (function($){
    	$.extend({
            "MinNum" : function(p1, p2){
            	return (p1 > p2) ? p2 : p1;
            }
    	});
    })(jQuery);

    $(function(){
    	var v1 = $.MaxNum(5, 6);
    	var v2 = $.MinNum(7, 8)l
    })
</script>

工具函数$.extend()除可以扩展jQuery自身函数外，还有另外一个功能，就是可以用于扩展已有的Object对象，其调用的语法格式为：

$.extend(target, object1, ... [objectN])

参数target表示合并后的独享，object为被合并的对象，即可以将一个或对个对象合并成一个对象，最后返回该对象。在$.extend()函数中，如果是合并对象，且存在相同参数的名称，那么，后面对象中的参数值将覆盖前面对象中的参数值。

例如：

var objName = {name : "zhangsan", sex: "nan"};
var objInfo = {name : "lisi", age : 30};
var objLast = $.extend(objName, objInfo);
返回的结果是：
objLast = {name: "lisi", sex: "nan", age: 30};

其他工具函数 - $.proxy()

$.proxy()函数返回一个新的函数，并且这个函数始终保持特定的作用域。

所谓的作用域，就是执行该函数对象的范围。当一个事件函数被元素绑定时，其作用域原则上应指向该元素，但有些事件函数的作用域，在被元素绑定时并不指向元素本身，而是指向另外一个对象。这时，为了使元素的绑定事件能正常执行，必须调用函数$.proxy()进行处理。经过处理后的事件函数，不仅可以被绑定的元素执行，而且还可以传递原先函数取消事件的绑定，该函数调用的语法格式为：

$.proxy(function, scope)

参数function为要改变作用域的事件函数，参数scope为被事件函数设置作用域的对象。即事件函数的作用域将设置到该对象中。

该函数还有另一种调用的方法，代码如下：

$.proxy(scope, name)

参数scope为被事件函数设定的作用域对象，参数name为将要设置作用域的函数名，并且该参数必须是scope作用域对象的一个属性。

例如：

var objMyInfo = {
	name : "zhangsan",
	sex: "male",
	ShowEvent : function(){
		... ...
		this.name + this.sex;
	}
}

$("#Button1").bind("click", $.proxy(objMyInfo.ShowEvent, objMyInfo));
或者
$("#Button1").bind("click", $.proxy(objMyInfo， “ShowEvent”));

如果直接绑定 objMyInfo中的函数showEvent，则该函数中的this作用域与传递的this作用域不同，因此，无法访问事件函数中的name和sex属性。