工具函数
在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属性。