当前位置:  编程技术>WEB前端

jquery基础教程之数组使用详解

    来源: 互联网  发布时间:2014-08-25

    本文导语:  1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函...

1. $.each(array, [callback]) 遍历[常用]

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

each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大。在数组中,它可以轻松的攻取数组索引及对应的值。例:

代码如下:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; //本文所用到的数组, 下同 
$.each(_mozi,function(key,val){ 
    //回调函数有两个参数,第一个是元素索引,第二个为当前值 
    alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val); 
});

相对于原生的for..in,each更强壮一点。for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取。

2. $.grep(array, callback, [invert])过滤数组[常用]

解释: 使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回true以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串。

代码如下:

$.grep(_mozi,function(val,key){ 
    //过滤函数有两个参数,第一个为当前元素,第二个为元素索引 
    if(val=='墨子'){ 
        alert('数组值为 墨子 的下标是: '+key); 
    } 
}); 

var _moziGt1=$.grep(_mozi,function(val,key){ 
    return key>1; 
}); 
alert('_mozi数组中索引值大于1的元素为: '+_moziGt1); 

var _moziLt1=$.grep(_mozi,function(val,key){ 
    return key>1; 
},true); 
//此处传入了第三个可靠参数,对过滤函数中的返回值取反 
alert('_mozi数组中索引值小于等于1的元素为: '+_moziLt1);

3. $.map(array,[callback])按给定条件转换数组 [一般]

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

这个是个很强大的方法,但并不常用. 它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素。

代码如下:

var _mapArrA=$.map(_mozi,function(val){ 
    return val+'[新加]'; 
}); 
var _mapArrB=$.map(_mozi,function(val){ 
    return val=='墨子' ? '[只给墨子加]'+val : val; 
}); 
var _mapArrC=$.map(_mozi,function(val){ 
    //为数组元素扩展一个新元素 
    return [val,(val+'[扩展]')]; 
}); 
alert('在每个元素后面加'[新加]'字符后的数组为: '+ _mapArrA); 
alert('只给元素 墨子 添加字符后的数组为: '+ _mapArrB); 
alert('为原数组中每个元素,扩展一个添加字符'[新加]'的元素,返回的数组为 '+_mapArrC);

4 .$.inArray(val,array)判断值是否存在于数组中[常用]

解释: 确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回-1)。

记得indexOf()方法了吗? indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0 的值,若未找到则返回-1.现在, 知道怎么用了吧. 有了它, 判断某个值是否存在于数组中,就变得轻而易举了。

代码如下:

var _exist=$.inArray('墨子',_mozi); 
var _inexistence=$.inArray('卫鞅',_mozi) 
if(_exist>=0){ 
    alert('墨子 存在于数组_mozi中,其在数组中索引值是: '+_exist); 

if(_inexistence

    
 
 

您可能感兴趣的文章:

  • jquery进行数组遍历如何跳出当前的each循环
  • jquery数组过滤筛选方法grep()简介
  • JQuery index方法获取Jquery对象数组下标
  • jquery数组之存放checkbox全选值示例代码
  • jquery如何把数组变为字符串传到服务端并处理
  • jquery遍历筛选数组与遍历解析json对象
  • jquery数组处理的经典例子
  • jquery中each遍历对象和数组示例
  • Jquery操作js数组及对象示例代码
  • jquery数组封装使用方法分享(jquery数组遍历)
  • Jquery调用Webservice传递Json数组
  • jquery遍历筛选数组、遍历解析json对象的方法
  • jquery遍历筛选数组的几种方法和遍历解析json对象
  • jQuery - css() 方法示例详解
  • jquery EasyUI导入js顺序详解
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • jQuery focus和blur事件的应用详解
  • jquery操作select详解(取值,设置选中)
  • Jquery中"$(document).ready(function(){ })"函数的使用详解
  • Jquery性能优化详解
  • jQuery插件开发的两种方法及$.fn.extend的详解
  • Jquery遍历修改url请求参数的代码详解
  • jquery选择器之内容过滤选择器详解
  • JQuery动画animate的stop方法使用详解
  • jquery判断浏览器类型实例详解
  • jquery操作css样式表文件的方法详解
  • Jquery中$命名冲突问题详解
  • 详解jquery的substring,substr,split的用法
  • jquery中each的用法详解
  • jQuery.extend 函数的用法详解
  • jQuery之ajax删除详解
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery中的正则表达式分析 正则基础
  • JQuery 基础过滤选择器的例子
  • jquery基础教程之deferred对象使用方法
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • jquery选择器之内容过滤选择器详解 iis7站长之家
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3