DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery數組處理代碼詳解(含實例演示)
jQuery數組處理代碼詳解(含實例演示)
編輯: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);
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved