您的位置:知识库 » Web前端

从零开始学习jQuery (九) jQuery工具函数

作者: ziqiu.zhang  来源: 博客园  发布时间: 2009-05-19 10:16  阅读: 15571 次  推荐: 1   原文链接   [收藏]  
摘要:我们经常要使用脚本处理各种业务逻辑, 最常见的就是数组和对象的操作, jQuery工具函数为我们操作对象和数组提供了便利条件。
[1] 从零开始学习jQuery (九) jQuery工具函数
[2] 从零开始学习jQuery (九) jQuery工具函数
[3] 从零开始学习jQuery (九) jQuery工具函数
[4] 从零开始学习jQuery (九) jQuery工具函数
[5] 从零开始学习jQuery (九) jQuery工具函数

系列文章导航:

从零开始学习jQuery (一) 开天辟地入门篇

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) AJAX快餐

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件


六.数组和对象操作

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

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

1.迭代

jQuery.each( object, callback )

返回值:Object

说明:

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

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

讲解:

 

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

 

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

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

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

 

Code
$.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表示当前属性的值:

Code
$("#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 的元素:

 

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

返回的结果是[1,2]

1
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻