jQuery基础之七 -- 工具函数

浏览器及特性检测

$.support

$.support主要包括以下测试：
boxModel:  如果这个页面和浏览器是以W3C CSS盒式模型来渲染的，则等于true。通常在IE 6和IE 7的怪癖模式中这个值是false。在document准备就绪前，这个值是null。
cssFloat:   如果用cssFloat来访问CSS的float的值，则返回true。目前在IE中会返回false,他用styleFloat代替。
hrefNormalized:   如果浏览器从getAttribute("href")返回的是原封不动的结果，则返回true。在IE中会返回false，因为他的URLs已经常规化了。
htmlSerialize:       如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接，则返回true，目前IE中返回false。
leadingWhitespace:  如果在使用innerHTML的时候浏览器会保持前导空白字符，则返回true，目前在IE 6-8中返回false。
noCloneEvent:            如果浏览器在克隆元素的时候不会连同事件处理函数一起复制，则返回true，目前在IE中返回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。

例如： jQuery.support.boxModel  //检测浏览器是否支持盒式模型

$.browser

可用值: safari, opera, msie, mozilla 此属性在 DOM 树加载完成前即有效，可用于为特定浏览器设置 ready 事件
$.browser.msie   //在 Microsoft's Internet Explorer 浏览器中返回 true。
if ($.browser.safari) {alert("this is safari!");}   //仅在 Safari 中提示 "this is safari!" 。

$.browser.version

if ( $.browser.msie )  alert( $.browser.version );    //显示当前 IE 浏览器版本号。

$.boxModel

当前页面中浏览器是否使用标准盒模型渲染页面。 建议使用 jQuery.support.boxModel 代替,在 Internet Explorer 怪癖模式（QuirksMode）中返回 False。

数组和对象操作
$.each(object, [callback])

通用例遍方法，可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});

$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});

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

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。
未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);   //合并 settings 和 options，修改并返回settings， { validate: true, limit: 5, name: "bar" }

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options); //合并 defaults 和 options, 不修改 defaults。

结果：
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

$.grep(array, callback, [invert])

使用过滤函数过滤数组元素。此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。
$.grep( [0,1,2], function(n,i){
return n > 0;
});   //过滤数组中小于 0 的元素。 [1, 2]

$.grep( [0,1,2], function(n,i){
return n > 0;
}, true);  //排除数组中大于 0 的元素，使用第三个参数进行排除。[0]

$.makeArray(obj)

将类数组对象转换为数组对象。
var arr = $.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用数组翻转函数

$.map(array, callback)

将一个数组中的元素转换到另一个数组中。
$.map( [0,1,2], function(n){
return n + 4;
});  //将原数组中每个元素加 4 转换为一个新数组。 [4, 5, 6]

$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});   //原数组中大于 0 的元素加 1 ，否则删除。[2, 3]

$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});  //原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。[0, 1, 1, 2, 2, 3]

$.inArray(value, array)

确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr);    //3
jQuery.inArray(4, arr);     //0
jQuery.inArray("David", arr);    //-1

$.toArray()

把jQuery集合中所有DOM元素恢复成一个数组。
alert($('li').toArray());   //得到所有li的元素数组

$.merge(first, second)

合并两个数组,返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()
$.merge( [0,1,2], [2,3,4] ) //合并两个数组到第一个数组上。[0,1,2,2,3,4]

$.unique(array)

删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。
$.unique(document.getElementsByTagName("div"));   //删除重复 div 标签。

$.parseJSON(json)

接受一个JSON字符串，返回解析后的对象。传入一个畸形的JSON字符串会抛出一个异常。比如下面的都是畸形的JSON字符串：
{test: 1} （ test 没有包围双引号）
{'test': 1} （使用了单引号而不是双引号）
另外，如果你什么都不传入，或者一个空字符串、null或undefined，parseJSON都会返回 null 。
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );   //解析一个JSON字符串

函数操作

$.noop 一个空函数

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

var obj = {
name: "John",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// 以下代码跟上面那句是等价的:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

// 可以与单独执行下面这句做个比较。
// $("#test").click( obj.test );

测试操作

$.contains(container, contained)

一个DOM节点是否包含另一个DOM节点,container 作为容器，可以包含其他元素,contained 可能被其他元素所包含
检测一个元素是否包含另一个元素
$.contains(document.documentElement, document.body);   // true
$.contains(document.body, document.documentElement);   // false

$.isArray(obj) 用于测试对象是否为数组

$.isFunction(obj) 用于测试对象是否为函数

$.isEmptyObject(obj) 测试是否为空对

$.isEmptyObject({}) // true
$.isEmptyObject({ foo: "bar" }) // false

$.isPlainObject(obj) 用于测试是否为纯粹的对象

$.isPlainObject({}) // true
$.isPlainObject("test") // false

字符串操作
$.trim(str)

去掉字符串起始和结尾的空格。
$.trim(" hello, how are you? ");       //"hello, how are you?"

URL

$.param(obj, [traditional])

将表单元素数组或者对象序列化。是.serialize()的核心方法。
obj   数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化。
traditional  是否使用传统的方式浅层序列化。

var params = { width:1680, height:1050 };
var str = $.param(params);      //按照key/value对序列化普通对象。
$("#results").text(str);       //width=1680&height=1050

对比两种序列化方式
var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);  //a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
alert(recursiveDecoded);  //a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=

var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);   //a=%5Bobject+Object%5D&b=1&b=2&b=3
alert(shallowDecoded);   //a=[object+Object]&b=1&b=2&b=3

插件编写

$.error(message)

接受一个字符串，并且直接抛出一个包含这个字符串的异常。
$.error = console.error;     //重载jQuery.error，以便可以在Firebug里显示