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

$each(array,

[callback])

遍历

不同于例遍

jQuery

对象的

$each()

方法，此方法可用于例遍任何对象(不仅仅是数组哦~)

回调函数拥有两个参数：第一个为对象的成员或数组的索引，

第二个为对应变量或内容

如果需要退出

each

循环可使回调函数返回

false，

其它返回值将被忽略

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

使用方法如下：

复制代码

代码如下:

var

arr

=

['javascript',

'php',

'java',

'c++',

'c#',

'perl',

'vb',

'html',

'css',

'objective-c'];

$each(arr,

function(key,

val)

{

//

firebug

console

consolelog('index

in

arr:'

+

key

+

",

corresponding

value:"

+

val);

//

如果想退出循环

//

return

false;

});

再来个测试程序：

[/code]

var

fruit

=

['苹果','香蕉','橙子','哈密瓜','芒果'];

//用原生getElementsByTagName获取h2元素的对象集合

var

h2obj=documentgetElementsByTagName('h2');

//$each()遍历数组

$('input#js_each')click(function(){

$each(fruit,function(key,val){

//回调函数有两个参数,第一个是元素索引,第二个为当前值

alert('fruit数组中，索引：'+key+'对应的值为：'+val);

});

});

[/code]

相对于原生的forin,each更强壮一点

forin也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取;

$grep(array,

callback,

[invert])过滤

使用过滤函数过滤数组元素此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大):

待过滤数组和过滤函数

过滤函数必须返回

true

以保留元素或

false

以删除元素

另外,过滤函数还可以是可设置为一个字条串(个人不推荐,欲了解自行查阅);

复制代码

代码如下:

v[code]ar

temp

=

[];

temp

=

$grep(arr,

function(val,

key)

{

if(valindexOf('c')

!=

-1)

return

true;

//

如果[invert]参数不给或为false,

$grep只收集回调函数返回true的数组元素

//

反之[invert]参数为true,

$grep收集回调函数返回false的数组元素

},

false);

consoledir(temp);

再来个测试程序：

复制代码

代码如下:

//$grep()过滤数组

$('input#js_grep')click(function(){

$grep(fruit,function(val,key){

//过滤函数有两个参数,第一个为当前元素,第二个为元素索引

if(val=='芒果'){

alert('数组值为

芒果

的下标是:

'+key);

}

});

var

_moziGt1=$grep(fruit,function(val,key){

return

key>1;

});

alert('fruit数组中索引值大于1的元素为:

'+_moziGt1);

var

_moziLt1=$grep(fruit,function(val,key){

return

key>1;

},true);

//此处传入了第三个可靠参数,对过滤函数中的返回值取反

alert('fruit数组中索引值小于等于1的元素为:

'+_moziLt1);

});

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

作为参数的转换函数会为每个数组元素调用,

而且会给这个转换函数传递一个表示被转换的元素作为参数

转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,

并扩展至原始数组中这个是个很强大的方法,但并不常用

它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素

复制代码

代码如下:

//16之前的版本只支持数组

temp

=

$map(arr,

function(val,

key)

{

//返回null,返回的数组长度减1

if(val

===

'vb')

return

null;

return

val;

});

consoledir(temp);

//16开始支持json格式的object

var

obj

=

{key1:

'val1',

key2:

'val2',

key3:

'val3'};

temp

=

$map(obj,

function(val,

key)

{

return

val;

});

consoledir(temp);

再来个测试程序：

复制代码

代码如下:

//$map()按给定条件转换数组

$('input#js_map')click(function(){

var

_mapArrA=$map(fruit,function(val){

return

val+'[新加]';

});

var

_mapArrB=$map(fruit,function(val){

return

val=='苹果'

'[只给苹果加]'+val

:

val;

});

var

_mapArrC=$map(fruit,function(val){

//为数组元素扩展一个新元素

return

[val,(val+'[扩展]')];

});

alert('在每个元素后面加\'[新加]\'字符后的数组为:

'+

_mapArrA);

alert('只给元素

苹果

添加字符后的数组为:

'+

_mapArrB);

alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为

'+_mapArrC);

});

$inArray(val,array)判断值是否存在于数组中

确定第一个参数在数组中的位置,

从0开始计数(如果没有找到则返回

-1

)记得indexOf()方法了吗

indexOf()返回字符串的首次出现位置,而$inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1现在,

知道怎么用了吧

有了它,

判断某个值是否存在于数组中,就变得轻而易举了

复制代码

代码如下:

//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素

consolelog($inArray('javascript',

arr));

测试程序：

[code]

//$inArray判断值是否在数组中,不存在返回-1,存在则返回对应索引值

$('input#js_inarray')click(function(){

var

_exist=$inArray('芒果',fruit);

var

_inexistence=$inArray('榴莲',fruit)

if(_exist>=0){

alert('芒果

存在于数组fruit中,其在数组中索引值是:

'+_exist);

}

if(_inexistence<

0){

alert('榴莲

不存在于数组fruit中!,返回值为:

'+_inexistence+'!');

}

});

以某个结点依次进行访问，如此循环下去。

1、依次对树中每个结点均做一次且仅做一次访问，访问结点所做的 *** 作依赖于具体的应用问题。

2、按访问结点的先后次序将结点排列起来，就可分别得到树中所有结点的前序列表、中序列表和后序列表。相应的结点次序分别称为结点的前序、中序和后序。

3、深度优先遍历从某个顶点出发，首先访问这个顶点，然后找出刚访问这个结点的第一个未被访问的邻结点，然后再以此邻结点为顶点，继续找它的下一个新的顶点进行访问。

4、广度优先遍历从某个顶点出发，首先访问这个顶点，然后找出这个结点的所有未被访问的邻接点，访问完后再访问这些结点中第一个邻接点的所有结点，重复此方法，直到所有结点都被访问完为止。

1、JQuery的核心的一些方法

each(callback) '就像循环

$("Element")length; ‘元素的个数，是个属性

$("Element")size(); '也是元素的个数，不过带括号是个方法

$("Element")get(); ‘某个元素在页面中的集合，以数组的形式存储

$("Element")get(index); '功能和上面的相同，index表示第几个元素，数组的下标

$("Element")get()reverse(); ‘把得到的数组方向

$("Element1")index($("Element2")); '元素2在元素1中的索引值是。

2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)

$("") ‘表示获取所有对象 但是我至今没这样用过

$("#XXX") '获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用

$("input[name='username']") 获得input标签中name='userName'的元素对象 常用

$("abc") ' 获得样式class的名字是abc的元素对象 常用

$("div") ' 标签选择器 选择所有的div元素 常用

$("#a,b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素

$("#a b p") 'ID号是a的并且使用了 b样式的 所有的p元素

3、层级元素获取

$("Element1 Element2 Element3 ") '前面父级 后面是子集

$("div > p") '获取div下面的所有的 p元素

$("div + p") 'div元素后面的第一个 p元素

$("div ~ p") 'div后面的所有的 p元素

4、简单对象获取

$("Element:first") 'HTML页面中某类元素的第一个元素

$("Element:last") 'HTML页面中某类元素的最后一个元素

$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框

$("Element:even") '获得偶数行

$("Element:odd“）'获得奇数行

$("Element:eq(index)") '取得一个给定的索引值

$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素

$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素

5、内容对象的获取和对象可见性

$("Element:contains(text)") '元素中是否包含text文本内容

$('Element:empty") '获得元素不包含子元素或文本的

$("Element:partnt") '获得元素包含子元素或文本的

$("Element:has(selector)") ‘是否包含某个元素， 如：$("p:has(span)")表示所有包含span元素的p元素

$("Element:hidden") '选择所有可见元素

$("Element:visible") '选择所有不可见元素

6、其他对象获取方法

$("Element[id]") '所有带有ID属性的元素

$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素

$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素

$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素

$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素

$("Element[attribute = youlika ]" '获得所有某个属性包含youlika的开头的元素

$("Element[selector1][selector2][]") '符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。

7、子元素的获取

$("Element:nth-child(index)") '选择父级下面的第n个元素

$("Element:nth-child(even)") '选择父级下面的偶数

$("Element:nth-child(odd)") '选择父级下面的奇数

$("Element:nth-child(3n+1)") '表达式

$("Element:first-child") '选择父级下面的第一个子元素

$("Element:last-child") '选择父级下面的最后一个子元素

$("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt

8、表单对象获取

$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。

$(:text)//匹配所有的单行文本框

$(:password)//匹配所有的密码框

$(:radio)//匹配所有的单选按钮

$(:checkbox)//匹配所有的复选框

$(:submit)//匹配所有的提交按钮

$(:image)//匹配所有的图像域，例如

$(:reset)//匹配所有的重置按钮

$(:button)//匹配所有的按钮

$(:file)//匹配所有的文件上传域

$(:hidden)//匹配所有的不可见元素或者type为hidden的元素

$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮

$(:disabled)//匹配所有的不可用input元素，作用与上相反

$(:checked)//匹配所有选中的复选框元素

$(:selected)//匹配所有的下拉列表

9、元素属性的设置与移除

$("Element")attr(name) '取得第一个匹配的属性值，比如$("img")attr("src")

$("Element"attr(key,value)") '某一个元素设置属性

$("Element"attr({key:value,key1:value,})) ‘为某个元素一次性设置多个属性

$("Element")attr(key,function) '为所有匹配的元素设置一个计算的属性值。

$("Element")removeAttr(name)//移除某一个属性

数组Tds : 是一些jquery对象的集合

2   Td = Tdseq(i)：当然就是其中的某个jquery对象；

3   Tds[i]：此时就是原始的dom对象；

4   Tds[i]className：调用原始dom对象的属性className；

5   Tdseq(i)：返回的是jquery对象，当然没有原始dom属性className

Jquery 常用方法经典总结

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），

 不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

 普通的dom对象一般可以通过$()转换成jquery对象。

 如：$(documentgetElementById("msg"))则为jquery对象，可以使用jquery的方法。

 $("#msg")html();

 $("#msg")[0]innerHTML;

 $("#msg")eq(0)[0]innerHTML;

 $("#msg")get(0)innerHTML;

3、获取jQuery集合的某一项

 获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，

 要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。

 $("div")eq(2)html(); //调用jquery对象的方法

 $("div")get(2)innerHTML; //调用dom的方法属性

首先就你本身写的这个东西，应该是没法匹配到正确的结果的。

理由：#id 已经是唯一指定了。怎么还会有eq(0）

其次eq(n)是指匹配到的同类之后的滴n-1个元素

比如

<div class="bb">a</div>

<div class="bb">b</div>

<div class="bb">c</div>

<div class="bb">d</div>

$("bb:eq")匹配的结果就是上面所有的DIV。

而

$("bb:eq(1)")表示第二个DIV（数组的下标是从0开始的）

以上就是关于jquery数组封装使用方法分享(jquery数组遍历)全部的内容，包括:jquery数组封装使用方法分享(jquery数组遍历)、jquery 如何遍历循环数组、怎么通过JQuery 获取 该对象 的 所有 属性和值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！