JQuery对数组的一些操作总结
来源:互联网 发布:淘宝发布宝贝图片 编辑:程序博客网 时间:2024/06/10 19:29
JQuery对数组的处理非常便捷并且功能强大齐全,一步到位的封装了很多原生js数组不能企及的功能。下面来看看JQuery数组的强大之处在哪。
$.each(array, [callback]) 遍历
不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略.
each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例:
使用方法如下:
1
var
arr = [
'javascript'
,
'php'
,
'java'
,
'c++'
,
'c#'
,
'perl'
,
'vb'
,
'html'
,
'css'
,
'objective-c'
];
2
$.each(arr,
function
(key, val) {
3
// firebug console
4
console.log(
'index in arr:'
+ key +
", corresponding value:"
+ val);
5
// 如果想退出循环
6
// return false;
7
});
再来个测试程序:
01
var
fruit = [
'苹果'
,
'香蕉'
,
'橙子'
,
'哈密瓜'
,
'芒果'
];
02
//用原生getElementsByTagName获取h2元素的对象集合
03
var
h2obj=document.getElementsByTagName(
'h2'
);
04
05
//$.each()遍历数组
06
$(
'input#js_each'
).click(
function
(){
07
$.each(fruit,
function
(key,val){
08
//回调函数有两个参数,第一个是元素索引,第二个为当前值
09
alert(
'fruit数组中,索引:'
+key+
'对应的值为:'
+val);
10
});
11
});
相对于原生的for..in,each更强壮一点. for..in也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取;
$.grep(array, callback, [invert])过滤
使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大): 待过滤数组和过滤函数. 过滤函数必须返回 true 以保留元素或 false 以删除元素. 另外,过滤函数还可以是可设置为一个字条串(个人不推荐,欲了解自行查阅);
1
var
temp = [];
2
temp = $.grep(arr,
function
(val, key) {
3
if
(val.indexOf(
'c'
) != -1)
4
return
true
;
5
// 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素
6
// 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素
7
},
false
);
8
console.dir(temp);
再来个测试程序:
01
//$.grep()过滤数组
02
$(
'input#js_grep'
).click(
function
(){
03
$.grep(fruit,
function
(val,key){
04
//过滤函数有两个参数,第一个为当前元素,第二个为元素索引
05
if
(val==
'芒果'
){
06
alert(
'数组值为 芒果 的下标是: '
+key);
07
}
08
});
09
10
var
_moziGt1=$.grep(fruit,
function
(val,key){
11
return
key>1;
12
});
13
alert(
'fruit数组中索引值大于1的元素为: '
+_moziGt1);
14
15
var
_moziLt1=$.grep(fruit,
function
(val,key){
16
return
key>1;
17
},
true
);
18
//此处传入了第三个可靠参数,对过滤函数中的返回值取反
19
alert(
'fruit数组中索引值小于等于1的元素为: '
+_moziLt1);
20
});
$.map(array,[callback])按给定条件转换数组
作为参数的转换函数会为每个数组元素调用, 而且会给这个转换函数传递一个表示被转换的元素作为参数. 转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组, 并扩展至原始数组中.这个是个很强大的方法,但并不常用. 它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素.
01
//1.6之前的版本只支持数组
02
temp = $.map(arr,
function
(val, key) {
03
//返回null,返回的数组长度减1
04
if
(val ===
'vb'
)
return
null
;
05
return
val;
06
});
07
console.dir(temp);
08
//1.6开始支持json格式的object
09
var
obj = {key1:
'val1'
, key2:
'val2'
, key3:
'val3'
};
10
temp = $.map(obj,
function
(val, key) {
11
return
val;
12
});
13
console.dir(temp);
再来个测试程序:
01
//$.map()按给定条件转换数组
02
$(
'input#js_map'
).click(
function
(){
03
var
_mapArrA=$.map(fruit,
function
(val){
04
return
val+
'[新加]'
;
05
});
06
var
_mapArrB=$.map(fruit,
function
(val){
07
return
val==
'苹果'
?
'[只给苹果加]'
+val : val;
08
});
09
var
_mapArrC=$.map(fruit,
function
(val){
10
//为数组元素扩展一个新元素
11
return
[val,(val+
'[扩展]'
)];
12
});
13
alert(
'在每个元素后面加\'[新加]\'字符后的数组为: '
+ _mapArrA);
14
alert(
'只给元素 苹果 添加字符后的数组为: '
+ _mapArrB);
15
alert(
'为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为 '
+_mapArrC);
16
});
$.inArray(val,array)判断值是否存在于数组中
确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 ).记得indexOf()方法了吗? indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1.现在, 知道怎么用了吧. 有了它, 判断某个值是否存在于数组中,就变得轻而易举了.
1
//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素
2
console.log($.inArray(
'javascript'
, arr));
测试程序:
01
//$.inArray判断值是否在数组中,不存在返回-1,存在则返回对应索引值
02
$(
'input#js_inarray'
).click(
function
(){
03
var
_exist=$.inArray(
'芒果'
,fruit);
04
var
_inexistence=$.inArray(
'榴莲'
,fruit)
05
if
(_exist>=0){
06
alert(
'芒果 存在于数组fruit中,其在数组中索引值是: '
+_exist);
07
}
08
if
(_inexistence< 0){
09
alert(
'榴莲 不存在于数组fruit中!,返回值为: '
+_inexistence+
'!'
);
10
}
11
});
$.merge(first,second)合并两个数组
返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素.这个方法是用jQuery的方法替代原生concat()方法, 但功能并没有concat()强大, concat()可以同时合并多个数组.
1
var
frontEnd = [
'javascript'
,
'css'
,
'html'
],
2
backEnd = [
'java'
,
'php'
,
'c++'
];
3
// 这种方式会修改第一个参数, 即frontEnd数组
4
temp = $.merge(frontEnd, backEnd);
5
console.dir(temp);
6
console.dir(frontEnd);
7
// 可以用下面的方式来避免对原数组的影响
8
// $.merge($.merge([], frontEnd), backEnd);
测试程序
1
//$.merge()合并两个数组
2
$(
'input#js_merge'
).click(
function
(){
3
//原生concat()可能比它还简洁点
4
fruitNew=$.merge(fruit,[
'水蜜桃'
,
'火龙果'
,
'西瓜'
,
'杨桃'
,
'荔枝'
,
'龙眼'
])
5
alert(
'合并后新数组长度为: '
+fruitNew.length+
'. 其值为: '
+fruitNew);
6
});
$.unique(array)过滤数组中重复元素
删除数组中重复元素. 只处理删除DOM元素数组,而不能处理字符串或者数字数组.第一次看到这个方法,觉得这是个很便捷的方法, 可以过滤重复, 哈, 多完美, 但仔细一看, 仅限处理DOM元素. 功能8折了.所以, 我给它定义成了一个不常用的元素, 至少, 我用jQuery以来没用到过它.
01
<div>blahblahblah....</div>
02
<div></div>
03
<div class=
"dup"
></div>
04
<div class=
"dup"
></div>
05
<div class=
"dup"
></div>
06
<div></div>
07
08
// $.unique只支持DOM元素数组,去除重复DOM元素,不支持其他类型数组(String或者Number)
09
// 获得原始的DOM数组,而不是jQuery封装的
10
var
divs = $(
'div'
).get();
11
// 增加几个class为dup的div
12
divs = divs.concat($(
'div.dup'
).get());
13
console.log(
"before unique:"
+ divs.length);
14
divs = $.unique(divs);
15
console.log(
"after unique:"
+ divs.length);
测试程序:
01
//$.unique()过滤数组中重复元素(仅限DOM元素数组)
02
$(
'input#js_unique'
).click(
function
(){
03
var
_h2Arr=$.makeArray(h2obj);
04
//将数组_h2Arr重复一次
05
_h2Arr=$.merge(_h2Arr,_h2Arr);
06
var
_curLen=_h2Arr.length;
07
_h2Arr=$.unique(_h2Arr);
08
var
_newLen=_h2Arr.length;
09
alert(
'数组_h2Arr原长度值为: '
+_curLen+
' ,过滤后为: '
+_newLen+
' .共过滤 '
+(_curLen-_newLen)+
'个重复元素'
);
10
});
$.makeArray(obj) 将类数组对象转换为数组
将类数组对象转换为数组对象, 类数组对象有 length 属性,其成员索引为0至 length-1.这是个多余的方法, 无所不能的$本来就包含了这个功能. jQuery官网上解释的非常模糊. 其实, 它就是将某个类数组对象(比如用getElementsByTagName获取的元素对象集合)转换成数组对象.
首先什么是类数组对象?jQuery官网上用divs = getElementsByTag('div')来做例子,这个divs有类似数组的一些方法比如length,通过[index]方式获取元素等,然后通过$.makeArray(divs)使它转为数组,就可以用数组的其他功能,比如reverse(), pop()等。
1
//$.makeArr()类数组转换
2
$(
'input#js_makearray'
).click(
function
(){
3
var
_makeArr=$.makeArray(h2obj);
4
alert(
'h2元素对象集合的数据类型转换为: '
+_makeArr.constructor.name);
5
});
$(dom).toArray()将所有DOM元素恢复成数组
把jQuery集合中所有DOM元素恢复成一个数组;并不常用的方法, 个人甚至觉得它和$.makeArray一样多余.
1
//$(dom).toArray()将所有DOM元素恢复成数组
2
$(
'input#js_toarray'
).click(
function
(){
3
var
_toArr=$(
'h2'
).toArray();
4
alert(
'h2元素集合恢复后的数据类型是: '
+_toArr.constructor.name);
5
});
- JQuery对数组的一些操作总结
- JQuery对数组的一些操作总结
- JQuery对数组的一些操作总结
- JQuery对数组的一些操作总结
- JQuery对数组的一些操作总结
- JQuery对数组的一些操作总结
- JQuery对数组的一些操作总结
- 对数组的一些操作
- Jquery对表单的一些操作
- JQuery 对一些常见元素的操作
- JQuery对CheckBox的一些相关操作
- JQuery对CheckBox的一些相关操作
- JQuery对CheckBox的一些相关操作
- Jquery对表单的一些操作
- JQuery对CheckBox的一些相关操作
- JQuery对CheckBox的一些相关操作
- jquery中对select的一些操作
- JQuery对CheckBox的一些相关操作
- 在64位机下运行debug和masm等程序总结
- QT中PRO文件写法的详细介绍
- JS设置所有表格斑马显示
- 第六章——uboot for tiny4412中MMU虚拟地址设置
- 移动开发那些事
- JQuery对数组的一些操作总结
- secureCRT ssh连接自动断开问题--解决备注
- 文件上传
- 为什么那么多的职位发布都在广州
- 大陆这边怎么去香港鉴定性别/费用的多少/准吗?
- tomcat关闭后线程无法终止
- R语言时间序列基础库zoo
- js中拼凑的jsp页面的鼠标进入事件
- 对象持久化技术举例