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

演示所用数组

代码如下:

var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤'];

1. $.each遍历示例[常用]

代码如下:

$.each(_mozi,function(key,val){
//回调函数有两个参数,第一个是元素索引,第二个为当前值
alert('_mozi数组中 ,索引 : '+key+' 对应的值为: '+val);
});

2. $.grep()过滤数组[常用]

代码如下:

$.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()按给定条件转换数组[一般]

代码如下:

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()判断值是否存在于数组中[常用]
 


代码如下:

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

5. $.merge()合并两个数组[一般]

代码如下:

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

6. $.unique()过滤数组中重复元素[不常用]

代码如下:

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()类数组对象转换为数组[不常用]

代码如下:

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

8. $.toArray()将所有DOM元素恢复成数组[不常用]

代码如下:

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

赞 (0)

相关推荐

  • jQuery使用数组编写图片无缝向左滚动

    jQuery编程实现一组由8幅图组成的图片,进入网页初始时显示前面4张,然后自动向左滚动,直到屏幕显示的是后4张时停止滚动. 下面是jQuery代码: 复制代码 代码如下: $(document).ready(function() { var $images = $('#images img'); var imgs = $images.length; var next_img; for(var i=0;i<imgs;i++) { next_img=$images.eq(i); scroll(ne

  • Jquery 数组操作大全个人总结

    jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的介绍,顺便对jQuery数组做个总结.温故,知新. 强烈建议你打开DEMO演示后再看下面的详解: 点此查看DEMO 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~

  • jQuery教程 $()包装函数来实现数组元素分页效果

    jQuery教程 $()包装函数来实现数组元素分页效果

    最近一周在做中文站搜索礼品widget的需求,这个需求中有一个分页的功能:具体demo可以参见下图: 对应的js应用文件是同一个,页面中后面的offer数据已经埋好了,只是启用了css display:none样式把后面的offer元素隐藏了.现在要求对已存在的页面元素实现上下分页效果,也就是页面元素总集可以通过$(.class)获得,然后来实现分页功能. 按照传统的一般做法,用jQuery可写成如下: 复制代码 代码如下: var total=$(.class).length; //取得需要分

  • jquery数组封装使用方法分享(jquery数组遍历)

    $.each(array, [callback]) 遍历 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 使用方法如下: 复制代码 代码如

  • jquery数组之存放checkbox全选值示例代码

    复制代码 代码如下: <input type="checkbox" id="checkAll" value="1">全选/全部不选 <input type="checkbox" name="items" value="1">1 <input type="checkbox" name="items" value=&quo

  • js/jquery解析json和数组格式的方法详解

    在解析之前,我们必须弄清楚几个概念:数组,关联数组以及json之间有哪些区别和联系点? 一.概念介绍1.数组 语法: ECMAScript v3规定了数组直接量的语法,JavaScript 1.2和JScript 3.0实现了它.可以把-个用逗号分隔的表达式列表放在方括号中,创建并初始化-个数组.这些表达式的值将成为数组元素.例如: var a = [1, true, 'abc']; 具体操作查看API. ps:必须方括号隔开. 2.关联数组 1.语法:var myhash= {"key1″:&

  • js jquery数组介绍

    1.数组的创建 var arr=new Array(); 2.查找数组中的元素 复制代码 代码如下: for(var i=0;i<arr.length;i++) if(arr[i]==temp) return true; 3.下面比较一下Array和Object的特性: Array: 新建:var ary = new Array(); 或 var ary = []; 增加:ary.push(value); 删除:delete ary[n]; 遍历:for ( var i=0 ; i < ary

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

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象.回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函数返回false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代码 代码如下: var _mozi=

  • jquery遍历数组与筛选数组的方法

    grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值.此函数应返回一个布尔值.另外,此函数可设置为一个字符串,当设置为字符串时,将视为"lambda-form"(缩写形式?),其中 a 代表数组元素,i 代表元素索引值.如"a > 0"代表"f

  • jquery如何把参数列严格转换成数组实现思路

    如果某参数的列只有一个参数,那么each是失败,请看下面的例子 Java代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <style> p { margin: 8px; font-size:16px; } .selected { color:red; } .highlight { background:yellow; } </style> <script src="http://code.

  • jQuery中json对象的复制方式介绍(数组及对象)

    1.jQuery自带的$.map方式 复制代码 代码如下: $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢失了,后来发现了第二种方法. 2.深复制与浅复制 复制代码 代码如下: // 浅层复制(只复制顶层的非 object 元素) var newObject = jQuery.extend({}, oldObject); // 深层复制(一层一层往下复制直到最底层) var newO

  • Jquery post传递数组方法实现思路及代码

    以批量删除数据为例 做批量删除会需要传递要删除的数据ID数组 复制代码 代码如下: function RemoveLog(){ var postModel=[]; //遍历复选框获取要删除的数据ID 存放到数组中  $("[name='lid']").each(function () { if ($(this).attr("checked") == "checked") postModel.push({ name: 'ids', value:$(

  • 基于jQuery中对数组进行操作的方法

    jQuery中提供了两个函数 : 1.$.map(array,callback(element,index)); 对于array中的每个元素,调用callback()函数,最终返回一个新的数组,原数组不变 例如: $(function () {            var arrInt = [1, 3, 5, 79];            var b = $.map(arrInt, function (value, key, a) {//map返回来的是一个新数组              

  • jquery ajax 向后台传递数组参数示例

    需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放任何类型(对象.基本类型),但是如果数组中放的是对象类型,传递到后台是显示的只能是对象字符串--[object Object],原因如下: 在后台接收的时候,只能用request来接收,request.getParameterValues()方法返回的是一个String[],所以,应该是在前台传输的时候调用了对象的toString()方法,那么如果依然想传递对象怎么办?凉拌! 但是可以使用JSON字符串来实现,在后台把JSO

  • jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera

  • jquerydom对象的事件隐藏显示和对象数组示例

    1.事件处理 1.1.事件绑订 bind(type,fn); 例子: 复制代码 代码如下: $(function(){ //正式的写法 $('#d1').bind('click',function(){ $(this).css('font-size','80px'); }); //简写形式 $('#d1').click(function(){ $(this).css('font-size','80px'); }); }); 1.2.绑订方式的简写形式 复制代码 代码如下: click(funct

  • JavaScript1.6数组新特性介绍以及JQuery的几个工具方法

    JavaScript 1.6 引入了几个新的Array 方法,具体的介绍见:New in JavaScript 1.6 .这些方法已经被写进了ECMA262 V5.现代浏览器(IE9/Firefox/Safari/Chrome/Opera)都已经支持,但IE6/7/8不支持.jquery的工具方法中提供了类似的功能. 1.Array.forEach()和jquery的$().each().在数组中的每个项上运行一个函数.类似java5 增强的for循环. 复制代码 代码如下: var ary =

  • jquery post方式传递多个参数值后台以数组的方式进行接收

    在用jquery的post方式传递多个值时,在后台页面可以用数组形式接收 如下所示 复制代码 代码如下: <script type="text/javascript"> $(function () { timestamp = 0; $("#chatform").submit(function () { var message = $("#msg").val(); var name = $("#author").va

随机推荐