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); // => 2jQuery.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);    //3jQuery.inArray(4, arr);     //0jQuery.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=3alert(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=3alert(shallowDecoded);   //a=[object+Object]&b=1&b=2&b=3

插件编写

$.error(message)

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