jquery数组

Mr.Think

专注WEB前端技术,热爱PHP,崇尚简单生活的凡夫俗子.

Home CSS+XHTML JavaScript jQuery UE+SEO 记录 摄影 关于

RSS Feed

jQuery数组处理详解(含实例演示)

Posted by Mr.Think on 11/26/2010 分类于@ jQuery

jQuery 的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生 js 数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看  jQuery 中文文档 中对数组的介绍,顺便对jQuery数组做个总结.温故,知新.
强烈建议你打开DEMO演示后再看下面的详解:  点此查看DEMO
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 < 0 ){
     alert ( ' 卫鞅 不存在于数组_mozi中!,返回值为:  ' + _inexistence + ' ! ' ) ;
}

5 .$.merge(first,second)合并两个数组 [一般]
解释:  返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素.
这个方法是用jQuery的方法替代原生concat()方法, 但功能并没有concat()强大, concat()可以同时合并多个数组.

//原生concat()可能比它还简洁点
_moziNew =$. merge ( _mozi , [ ' 鬼谷子 ' , ' 商鞅 ' , ' 孙膑 ' , ' 庞涓 ' , ' 苏秦 ' , ' 张仪 ' ])
alert ( ' 合并后新数组长度为:  ' + _moziNew . length + ' . 其值为:  ' + _moziNew ) ;

6 .$.unique(array)过滤数组中重复元素 [不常用]
解释:  删除数组中重复元素. 只处理删除DOM元素数组,而不能处理字符串或者数字数组.
第一次看到这个方法,觉得这是个很便捷的方法, 可以过滤重复, 哈, 多完美, 但仔细一看, 仅限处理DOM元素. 功能8折了.所以, 我给它定义成了一个不常用的元素, 至少, 我用jQuery以来没用到过它.

var   _h2Arr =$. makeArray ( h2obj ) ;
//将数组_h2Arr重复一次
_h2Arr =$. merge ( _h2Arr , _h2Arr ) ;
var   _curLen = _h2Arr . length ;
_h2Arr =$. unique ( _h2Arr ) ;
var   _newLen = _h2Arr . length ;
alert ( ' 数组_h2Arr原长度值为:  ' + _curLen + '  ,过滤后为:  ' + _newLen
      + '  .共过滤  ' + ( _curLen - _newLen ) + ' 个重复元素 ' )

7. $.makeArray(obj) 将类数组对象转换为数组 [不常用]
解释:  将类数组对象转换为数组对象, 类数组对象有 length 属性,其成员索引为0至 length-1.
这是个多余的方法, 无所不能的$本来就包含了这个功能. jQuery官网上解释的非常模糊. 其实, 它就是将某个类数组对象(比如用getElementsByTagName获取的元素对象集合)转换成数组对象.

var   _makeArr =$. makeArray ( h2obj ) ;
alert ( ' h2元素对象集合的数据类型转换为:  ' + _makeArr . constructor . name ) ; //输出Array

8. $(dom).toArray()将所有DOM元素恢复成数组 [不常用]
解释:  把jQuery集合中所有DOM元素恢复成一个数组;
并不常用的方法, 个人甚至觉得它和$.makeArray一样多余.

var   _toArr =$ ( ' h2 ' ) . toArray () ;
alert ( ' h2元素集合恢复后的数据类型是:  ' + _toArr . constructor . name ) ;

@热门文章

Ubuntu系统下onkeyup/onkeydown对中文输入失效bug 用dl模拟实现可自定义样式的SELECT下拉列表(已封装) 招募兼职web前端开发人员1~2名[暂已募齐] jQuery实现同一点击,两个不同链接,指向两个不同的iframe 最大限度的分离table的样式与结构

each遍历 ,  grep ,  inArray ,  jQuery Array ,  jQuery 数组操作 ,  jQuery 数组详解 ,  jQuery数组

共有 1 条评论.

99  Views

Jankerli   11/29/2010于17:08

坐个沙发，又进一步学习了jQuery数组了···呵呵···

[ 回复 ]

发表评论[无需注册]

  您的昵称 (必填)

  您的邮箱 (必填,会为您保密)

  您的网站 (可填可不填)

NOTICE:  You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!

 

分类 CSS+XHTML  (7) JavaScript  (16) jQuery  (16) UE+SEO  (4) 记录  (7)

功能 登录 关于我 摄影     i-Flickr   联系我? Sitemap

热门文章 基于jQuery淡入淡出可自动切换的幻灯插件 基于jQuery的控制左右滚动及自动滚动效果 基于jQuery的上下无缝滚动应用(单行或多行) 影像记录 简易的点击展开/关闭效果(原生JS版和JQ版) WEB前端开发规范文档 document.getElementById的简写方式 前端开发中一些常用技巧总结 一款比较实用齐全的jQuery表单验证插件 两个基于jQuery的渐隐渐显图片轮换幻灯片

最新文章 jQuery数组处理详解(含实例演示) 点击文本域清除默认值效果,可绑定回车提交(已封装) 选择标签至文本域效果,可多选/可过滤重复/可限制个数(已封装) 招募兼职PHP开发人员1~2名(暂已募齐) 用dl模拟实现可自定义样式的SELECT下拉列表(已封装) 招募兼职web前端开发人员1~2名[暂已募齐] 区分中英文字符的两种方法: 正则和charCodeAt()方法 CSS技巧之圆角背景与三角形 WEB前端开发规范文档 利用sort()和Math.random()实现元素的随机排列 别了,PR值~ 加载xml文档的函数(原生JavaScript版及jQuery版) 限制字符输入数功能(jQ版和原生JS版) Ubuntu系统下onkeyup/onkeydown对中文输入失效bug 一些常用且实用的原生JavaScript函数

存档 2010年十一月 2010年十月 2010年九月 2010年八月 2010年七月 2010年六月 2010年五月 2010年四月

最新评论 坐个沙发，又进一步学习了jQuery数组了···呵呵··... 很好很强大，说到了很多需要总结的地方了... @芒果, 完全可以! 最近也在看些YUI的资料.... 哈哈，很好，前几天正要去实现这个效果，我决定把... @youzi_friend, 嗯. 最近比较繁忙... @y, 哦, 感谢指正, 这个应该是非负整数值,包含0,已修... Hi Mr.Think,demo验证中第6个有错如果输入：0123123也可以... Think先生最近一定好忙啊，好多天没来了... @ammir, 查看DEMO, CTRL+S... 呵呵 不错不错 但是源码怎么下载...

链接 蓝色理想   Google code   博客园   子鼠   崔凯的博客   Dangbao's Blog   小志的博客   愚人码头   CssRain   web前端寒风   ITfeed   ZeroZ   芒果  

? 

Copyright ?  Mr.Think的博客   | Powered by  WordPress   | Theme  zSofa  | 本站原创遵循  GPL许可   | 沪ICP备07510935号

Δ Top

查看更多关于jquery数组的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did43573