从零开始学习jQuery之必知的工具函数

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.我们经常要使用脚本处理各种业务逻辑, 最常见的就是数组和对象的操作. jQuery工具函数为我们操作对象和数组提供了便利条件。大部分人仅仅使用jQuery的选择器选择对象, 或者实现页面动画效果. 在处理业务逻辑时常常自己编写很多算法. 本文提醒各位jQuery也能提高我们操作对象和数组的效率. 并且可以将一些常用算法扩充到jQuery工具函数中, 实现脚本函数的复用.

推荐专题：jQuery从入门到精通

一.什么是工具函数

工具函数是指在jQuery对象(即变量"$")上定义的函数. 这些函数都是工具类函数.比如C#中最常用的trim()函数:

 
 
 
 
  
  
  
  
$.trim("  text   "); 
 
 
 

在原始javascript中并没有提供同时去除前后空格的trim函数. 所以这一类常用的工具函数统称为 "Utilities" 函数.对应jQuery官方文档:

http://docs.jquery.com/Utilities

"$"其实是"window"对象的属性, 所以下面几句话是等价的:

二. 工具函数分类

工具函数主要分为下面几类:

◆ 浏览器及特性检测

◆ 数组和对象操作

◆ 测试操作

◆ 字符串操作

◆ Url操作

区别于前几章的讲解方式, 本文不在列举函数列表. 大家在应用中, 比如遇到想操作一个字符串, 可以首先从在"API文档/Utilities/字符串操作"中查找是否已经提供了快捷的工具函数. 如果没有再考虑自己开发.

下面使用实例具体的每个分类下常用的工具函数.

三.浏览器及特性检测

jQuery的优秀就在于其跨浏览器的特性, 通常我们不用再针对不同浏览器书写不同的代码. 但是如果是jQuery开发人员或者插件开发人员就要自行处理浏览器差异, 以便为用户提供跨浏览器的特性.

jQuery提供了下列属性用于获取浏览器特性:

在1.3版本中已经废除了三个属性, 这里不再讲解. 让我们将注意力放在 jQuery.support 函数上.

jQuery.support

返回值: Object

说明:

jQuery 1.3 新增。一组用于展示不同浏览器各自特性和bug的属性集合。

jQuery提供了一系列属性，你也可以自由增加你自己的属性。其中许多属性是很低级的，所以很难说他们能否在日新月异的发展中一直保持有效，但这这些主要用于插件和内核开发者。

所有这些支持的属性值都通过特性检测来实现，而不是用任何浏览器检测。以下有一些非常棒的资源用于解释这些特性检测是如何工作的：

http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting

http://yura.thinkweb2.com/cft/

http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

jQuery.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。

讲解:

针对上面众多的浏览器特性属性, 本文只讲解两个特性.

1.盒式模型 boxModel

下图是W3C标准中的盒式模型图:

假设如下元素:

 
 
 
 
  
  
  
  
  
  
  
  
  
.boxModel  
  
  
  
  
{  
  
  
  
  
    width:200px;  
  
  
  
  
    height:50px;  
  
  
  
  
    padding:10px;  
  
  
  
  
    border:solid 5px #FF0000;  
  
  
  
  
    background-color:#acacac;  
  
  
  
  
}  
  
  
  
  
  
  
  
  
  
 
 
 
 

显示效果如图:

[[32231]]

在CSS中设定元素宽度为200px, 下面以此元素为例讲解盒式模式.

W3C 盒式模型:

元素的宽度和高度为盒式模型图中的Context部分, 不包括padding, border和margin部分.

目前除了IE所有的浏览器都仅支持W3C盒式模型. 在W3C盒式模型中, 示例中包含红框在内的区域内容宽度为200+2*10+2*5=230px, 高度为50+2*10+2*5=80px.

IE 盒式模型:

设置的宽度包括padding,border. 实际内容宽度content Width = width - padding – border

在IE5.5及更早的版本中, 使用了此模型. 在更高的IE版本上如果由于某些原因让浏览器运行在怪异模式下则也会使用此盒式模式.所以需要在页面上声明正确的DOCTYPE. 有关DOCTYPE请参考此文:

http://www.cnblogs.com/zhangziqiu/archive/2009/01/15/doctype.html

下面是两种盒式模式的对比:

我们可以使用 jQuery.support.boxModel 属性来获取浏览器是否使用了W3C盒式模型. true表示使用W3C boxModel.

2.浮动样式

通过javascript脚本设置元素的float样式时, IE和FireFox存在不同, IE使用style.styleFloat, FireFox使用style.cssFloat:

 
 
 
 
  
  
  
  
div.style.styleFloat = "left"; //IE  
  
  
  
  
div.stlye.cssFloat = "left"; //FF 
 
 
 

jQuery.support.cssFloat 属性返回true则表示可以使用cssFloat来设置float样式. IE中返回false;

注意, 我们可以通过CSS()方法设置float样式, jQuery内部会自动帮我们判断是使用styleFloat还是cssFloat:

 
 
 
 
  
  
  
  
$("#divResult").css("float","left"); //兼容IE和FF 
 
 
 

#p#

四. 数组和对象操作

实现UI我们常常操作DOM对象或者jQuery包装集, 但是实现算法或者业务逻辑时往往操作的是数组和对象.

下面讲解最常用的数组和对象相关的工具函数.

1.迭代

jQuery.each( object, callback )

返回值:Object

说明:

通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：***个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

讲解:

对于jQuery包装集我们可以使用each(callback)方法迭代包装集中的每一个元素. callback是一个会函数, 接受一个参数表示当前访问对象的索引.

 
 
 
 
  
  
  
  
$("img").each(function(i){  
  
  
  
  
   this.src = "test" + i + ".jpg";  
  
  
  
  
 }); 
 
 
 

对于数组我们可以使用 jQuery.each( object, callback ) 来遍历, 这等同于使用for循环.

注意传入的***个参数可以是数组或者对象.如果数组,则遍历数组中的每一个对象. ***个参数表示索引,第二个参数表示值, this表示当前遍历的元素, 可以通过返回false终止迭代, 比如下面的示例遍历到第二个元素后会终止:

 
 
 
 
  
  
  
  
$.each(["a", "b", "c"], function(i, n)  
  
  
  
  
{  
  
  
  
  
    alert("Item #" + i + ": " + n);//可以获取到i值  
  
  
  
  
    if (i >= 1)  
  
  
  
  
    {  
  
  
  
  
        return false;  
  
  
  
  
    }  
  
  
  
  
});  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
$("#iterateArray").click(function(event)  
  
  
  
  
{  
  
  
  
  
var array = $.each(["a", "b", "c"], function(i, n)  
  
  
  
  
{  
  
  
  
  
    alert("Item #" + i + ": " + n ); //***个参数i表示索引, this表示当前遍历的对象  
  
  
  
  
    if (i >= 1)  
  
  
  
  
    {  
  
  
  
  
        return false;  
  
  
  
  
    }  
  
  
  
  
});  
  
  
  
  
});  
  
  
  
  
 
 
 
 

如果传递的是对象, 则遍历对象的每一个属性, 即使函数返回false也依然会遍历完所有的属性, ***个参数表示属性key(属性名称,是obejct类型),第二个参数表示值,,this表示当前属性的值:

 
 
 
 
  
  
  
  
$("#iterateObject").click(function(event)  
  
  
  
  
{  
  
  
  
  
    $.each({ name: "ziqiu.zhang", sex: "male", status: "single" }, function(i, n)  
  
  
  
  
    {  
  
  
  
  
        alert("Item #" + i.toString() + ": " + n ); //***个参数i表示属性的key(object), this表示属性值  
  
  
  
  
        if (i >= 1)  
  
  
  
  
        {  
  
  
  
  
            return false;  
  
  
  
  
        }  
  
  
  
  
    });  
  
  
  
  
}); 
 
 
 

each将是我们最常使用的函数, 特别注意each虽然迭代每一个元素或属性, 但是在迭代函数中并不会改变当前元素的值, 也就是无法改变返回后的对象.如果需要改变数组中的每一个元素并且将结果返回, 因使用jQuery.map( array, callback )函数.

2.筛选

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

返回值: Array

说明:

使用过滤函数过滤数组元素。

此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

讲解:

默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.

下面的示例演示如何过滤数组中索引小于 0 的元素:

 
 
 
 
  
  
  
  
$.grep( [0,1,2], function(n,i){  
  
  
  
  
  return n > 0;  
  
  
  
  
}); 
 
 
 

返回的结果是[1,2]

3.转换

jQuery.map( array, callback )

返回值:Array

说明:

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组，并扩展至原始数组中。

讲解:

1.3.2版本中此函数和each函数已经几乎相同(以前稍有不同), 现在唯一的区别就是回调函数可以改变当前元素.返回null则删除当前元素.

下面是几个例子:

 
 
 
 
  
  
  
  
var arr = [ "a", "b", "c", "d", "e" ]  
  
  
  
  
$("div").text(arr.join(", "));  
  
  
  
  
 
  
  
  
  
arr = jQuery.map(arr, function(n, i){  
  
  
  
  
  return (n.toUpperCase() + i);  
  
  
  
  
});  
  
  
  
  
$("p").text(arr.join(", "));  
  
  
  
  
 
  
  
  
  
arr = jQuery.map(arr, function (a) { return a + a; });  
  
  
  
  
$("span").text(arr.join(", ")); 
 
 
 

4.合并

合并对象是我们常常编写的功能, 通常使用臃肿的for循环来进行.jQuery为我们提供了很多功能的合并函数:

讲解:

上面的函数看着有些混乱. 看看我们以后会常用的.

首先是jQuery.merge( first, second ), 将两个数组合并. 下面这个示例说明如何使用此函数:

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
  
 
  
  
  
  
      
  
  
  
  
 
  
  
  
  
      
  
  
  
  
        $(function()  
  
  
  
  
        {  
  
  
  
  
            $("#go").click(function(event)  
  
  
  
  
            {  
  
  
  
  
                $("#divResult").html("");  
  
  
  
  
                var first = [1, 3, 5];  
  
  
  
  
                $("#divResult").append("first:[" + first.join(",") + "]").append("
");  
  
  
  
  
                var second = [2, 4, 6];  
  
  
  
  
                $("#divResult").append("second:[" + second.join(",") + "]").append("
");  
  
  
  
  
                var result = $.merge(first, second);  
  
  
  
  
                $("#divResult").append("result:[" + result.join(",") + "]").append("
");  
  
  
  
  
                $("#divResult").append("first after merged:[" + first.join(",") + "]
");  
  
  
  
  
                $("#divResult").append("second after merged:[" + second.join(",") + "]
");  
  
  
  
  
 
  
  
  
  
            });  
  
  
  
  
        });         
  
  
  
  
             
  
  
  
  
      
  
  
  
  
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
  
        合并数组