公告

日历

不同于例遍 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.extend( [deep], target, object1, [objectN] )	用一个或多个其他对象来扩展一个对象，返回被扩展的对象。如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。为定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。	合并 settings 和 options，修改并返回 settings: `var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options);` 结果: `settings == { validate: true, limit: 5, name: "bar" }`
jQuery.makeArray( obj )	将类数组对象转换为数组对象。类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。	将DOM对象集合转换为数组: `var arr = jQuery.makeArray(document.getElementsByTagName("div"));`
jQuery.inArray( value, array )	确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。	查看对应元素的位置: `var arr = [ 4, "Pete", 8, "John" ];jQuery.inArray("John", arr); //3jQuery.inArray(4, arr); //0jQuery.inArray("David", arr); //-1`
jQuery.merge( first, second )	合并两个数组返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()	合并两个数组到第一个数组上: `$.merge( [0,1,2], [2,3,4] )` 结果: `[0,1,2,2,3,4]`
jQuery.unique( array )	删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。	删除重复 div 标签: `$.unique(document.getElementsByTagName("div"));` `[<div>, <div>, ...]`

讲解:

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

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

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>jQuery Utilities - jQuery.merge</title>    <script src="../scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>    <script type="text/javascript">        $(function()        {            $("#go").click(function(event)            {                $("#divResult").html("");                var first = [1, 3, 5];                $("#divResult").append("<span>first:[" + first.join(",") + "]</span>").append("<br/>");                var second = [2, 4, 6];                $("#divResult").append("<span>second:[" + second.join(",") + "]</span>").append("<br/>");                var result = $.merge(first, second);                $("#divResult").append("<span>result:[" + result.join(",") + "]</span>").append("<br/>");                $("#divResult").append("<span>first after merged:[" + first.join(",") + "]</span><br/>");                $("#divResult").append("<span>second after merged:[" + second.join(",") + "]</span><br/>");            });        });                      </script></head><body>    <button id="go">        合并数组</button>    <br />    <div id="divResult">    </div></body></html>

结果如图:

另外不能因为有了jQuery就忘记我们的原始javascript. 比merge更常用的其实是join和split函数.

merge函数会改变第一个合并的数组, 如果是我设计我就不会这么做. 因为返回值已经是合并后的数组了.如此设计让函数产生歧义.

列表中的那么多函数不再一一讲解. 先用先查. 除了 jQuery.extend 这个不得不提的函数. 下面单提一个小结讲解.

5. jQuery.extend

在开发插件的时候最常用此函数函数来处理options.

下面是fancybox插件获取options的代码:

settings = $.extend({}, $.fn.fancybox.defaults, settings);

上面的代码target是一个空对象, 将默认设置defaults作为第一个对象, 将用户传入的设置setting合并到default上, setting上有的属性以setting为准. setting没有传入的属性则使用default的默认值. 然后将合并的结果复制给target并作为函数返回值返回.

看一个完整的示例:

var empty = {}var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(empty, defaults, options);

结果:

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

target参数要传递一个空对象是因为target的值最后将被改变.比如:

var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(defaults, options);

上面的代码将defaults作为target参数, 虽然最后settings的结果一样, 但是defaults的值被改变了! 而插件中的默认值应该都是固定! 所以使用时请注意target参数的用法.

下面是我的完整示例和结果:

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>jQuery Utilities - jQuery.extend</title>    <script src="../scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>    <script type="text/javascript">        $.toObjectString = function (obj)        {            var result = "{";            var counter = 0;            $.each(obj, function(i, n)            {                if (counter > 0) { result += ","; }                result += i.toString() + ":" + n.toString();                counter++;             });            result += "}";            return result;        }        $(function()        {            $("#go1").click(function(event)            {                $("#divResult").html("");                var empty = {}                var defaults = { validate: false, limit: 5, name: "foo" };                var options = { validate: true, name: "bar" };                $("#divResult").append("<span>empty:" + $.toObjectString(empty) + "</span>").append("<br/>");                $("#divResult").append("<span>defaults:" + $.toObjectString(defaults) + "</span>").append("<br/>");                $("#divResult").append("<span>options:" + $.toObjectString(options) + "</span>").append("<br/>");                                                var settings = jQuery.extend(empty, defaults, options);                $("#divResult").append("<span>settings after extend:" + $.toObjectString(settings) + "</span>").append("<br/>");                $("#divResult").append("<span>defaults after extend:" + $.toObjectString(defaults) + "</span>").append("<br/>");                $("#divResult").append("<span>options after extend:" + $.toObjectString(options) + "</span>").append("<br/>");            });            $("#go2").click(function(event)            {                $("#divResult").html("");                 var defaults = { validate: false, limit: 5, name: "foo" };                var options = { validate: true, name: "bar" };                $("#divResult").append("<span>defaults:" + $.toObjectString(defaults) + "</span>").append("<br/>");                $("#divResult").append("<span>options:" + $.toObjectString(options) + "</span>").append("<br/>");                                var settings = jQuery.extend(defaults, options);                $("#divResult").append("<span>settings after extend:" + $.toObjectString(settings) + "</span>").append("<br/>");                $("#divResult").append("<span>defaults after extend:" + $.toObjectString(defaults) + "</span>").append("<br/>");                $("#divResult").append("<span>options after extend:" + $.toObjectString(options) + "</span>").append("<br/>");            });        });                      </script></head><body>    <button id="go1" style="height:40px;width:400px;">        jQuery.extend(empty, defaults, options)</button>    <button id="go2"  style="height:40px;width:400px;">        jQuery.extend(defaults, options)</button>    <br />    <div id="divResult">    </div></body></html>

结果:

七.测试工具函数

测试工具函数主要用于判断对象是否是某一种类型, 返回的都是Boolean值:

jQuery.isArray( obj )

jQuery.isFunction( obj )

同时别忘记了javascript中自带的isNaN和isFinite:

var test = "123";alert(isNaN(test));alert(isFinite(test));

isNaN函数判断参数是否是非数字. 如果是数字则返回false.

isFinite函数检查其参数是否是无穷大.如果参数是 NaN（非数字）,或者是正、负无穷大的数,则返回 false.否则返回true.

八.字符处操作工具函数

目前核心类库中只有一个字符串工具函数:

jQuery.trim( str )

返回值: string

说明:去掉字符串起始和结尾的空格。

举例:

去掉字符串起始和结尾的空格:

$.trim("  hello, how are you?  ");

结果:

"hello, how are you?"

九.Url操作工具函数

jQuery.param( obj )

返回值:string

说明:

将表单元素数组或者对象序列化。是.serialize()的核心方法。

数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化

举例:

    var params = { width:1680, height:1050 };    var str = jQuery.param(params);    $("#results").text(str);

结果:

width=1680&height=1050

jQuery将其归为Urls分类, 因为此方法通常用于发送GET请求时将对象作为urls参数传递给服务端.

十. 扩展工具函数与jQuery包装集函数

扩展工具函数只需要对jQuery(即"$")进行扩展. 通常开发工具函数或者插件的人希望在开发时使用"$", 但因为"$"有可能和其他脚本库冲突, 所以通常我们使用下面的语法开发工具函数:

        (function($)        {            $.myExtendMethod = function(o)            {                alert(0);            };                    })(jQuery);

在函数体内的"$"能保证是代表jQuery对象.

然后使用这种方式开发不能享受到智能感知的便利. 一般我们将扩展工具函数和扩展jQuery包装集函数都放在一个单独的文件中.

下面这个示例演示如何添加自定义的jQuery工具方法和jQuery包装集方法:

/// <reference path="jquery-1.3.2-vsdoc2.js" />jQuery.myExtendMethod = function(o){    ///    <summary>    ///        扩展方法注释.    ///    </summary>    ///    <param name="o" type="String">参数提示文字</param>    ///    <returns type="string" >返回值提示文字</returns>    alert(0);};jQuery.fn.myExtendMethod = function(o){    ///    <summary>    ///        扩展方法注释.    ///    </summary>    ///    <param name="o" type="String">参数提示文字</param>    ///    <returns type="string" >返回值提示文字</returns>    alert(0);};

通过第一行reference, 我们可以在此js文件中继续使用jQuery脚本智能感知.

jQuery.myExtendMethod方法扩展的工具函数.

jQuery.fn.myExtendMethod方法扩展的是jQuery包装集函数, 即为使用$()获取到的对象添加了方法.

同理使用XML注释, 比如<summary> 还可以为自定义方法添加智能感知提示.脚本中的XML注释和.NET中的一样, 有关.NET中的XML注释可以参考我的另外一篇文章:

使用.NET中的XML注释(一) -- XML注释标签讲解

出处：http://www.cnblogs.com/zhangziqiu/

posted on 2010-11-17 16:49 幸福佑儿阅读(672) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

三.什么是工具函数

四.工具函数分类

五.浏览器及特性检测

jQuery.support

1.盒式模型 boxModel

W3C 盒式模型:

IE 盒式模型:

2.浮动样式

六.数组和对象操作

1.迭代

2.筛选

3.转换

4.合并

5. jQuery.extend

七.测试工具函数

八.字符处操作工具函数

九.Url操作工具函数

十. 扩展工具函数与jQuery包装集函数


Copyright © 2024 幸福佑儿 Powered by .NET 9.0 on Kubernetes 博客园