本文為大家介紹下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 filterarray){ alert(filterarray[key]); } } ); jquery each()篩選遍歷數組 代碼如下: $().ready( function(){ var anObject = {one:1,two:2,three:3};//對json數組each $.each(anObject,function(name,value) { alert(name); alert(value); }); var anArray = ['one','two','three']; $.each(anArray,function(n,value){ alert(n); alert(value); } ); } ); jquery inArray()篩選遍歷數組 代碼如下: $().ready( function(){ var anArray = ['one','two','three']; var index = $.inArray(‘two',anArray); alert(index);//返回該值在數組中的鍵值，返回1 alert(anArray[index]);//value is two } ); jquery map()篩選遍歷數組 代碼如下: $().ready( function(){ var strings = ['0','1','2','3','4','S','6']; var values = $.map(strings,function(value){ var result = new Number(value); return isNaN(result) ? null:result;//isNaN:is Not a Number的縮寫 } ); for (key in values) { alert(values[key]); } } ); js遍歷解析json對象1 代碼如下: var json = [{dd:'SB',AA:'東東',re1:123},{cccc:'dd',lk:'1qw'}]; for(var i=0,l=json.length;i<l;i++){ for(var key in json[i]){ alert(key+':'+json[i][key]); } } js遍歷解析json對象2 有如下 json對象： var obj ={”name”:”馮娟”,”password”:”123456″,”department”:”技術部”,”sex”:” 女”,”old”:30}; 遍歷方法： 代碼如下: for(var p in obj){ str = str+obj[p]+','; return str; } 下面通過例子來說明下具體實現方法 JQuery拿取對象的方式 $(‘#id') ：通過元素的id $(‘tagName') : 通過元素的標簽名 $(‘tagName tagName') : 通過元素的標簽名,eg: $(‘ul li') $(‘tagName#id): 通過元素的id和標簽名 $(‘:checkbox'):拿取input的 type為checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="imperial"/> $('span[price] input[type=text]') ：拿取下面的input元素 <span price="3"> <input type="text" name="imperial.quantity" disabled="disabled" value="1"/> </span> $('div',$(this).parents('div:first'))：拿取該div的上（至少都是父節點）的第一個div節點 $('~ span:first',this)： locates the first sibling of this that's a <span> element. 延遲加載js文件： $.getScript 例子： Html文件: 代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>$.getScript Example</title> <link rel="stylesheet" type="text/css" href="../common.css"> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script> <script type="text/javascript"> $(function(){ $('#loadButton').click(function(){ $.getScript(//在Firefox/3.0.1中會出現一個錯誤(語法錯誤,定義的變量不起作用,ff2沒問題) 'new.stuff.js'//,function(){$('#inspectButton').click()} ); }); $('#inspectButton').click(function(){ someFunction(someVariable); test() }); }); </script> </head> <body> <button type="button" id="loadButton">Load</button> <button type="button" id="inspectButton">Inspect</button> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>$.getScript Example</title> <link rel="stylesheet" type="text/css" href="../common.css"> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script> <script type="text/javascript"> $(function(){ $('#loadButton').click(function(){ $.getScript(//在Firefox/3.0.1中會出現一個錯誤(語法錯誤,定義的變量不起作用,ff2沒問題) 'new.stuff.js'//,function(){$('#inspectButton').click()} ); }); $('#inspectButton').click(function(){ someFunction(someVariable); test() }); }); </script> </head> <body> <button type="button" id="loadButton">Load</button> <button type="button" id="inspectButton">Inspect</button> </body> </html> Js文件: 代碼如下: alert("I'm inline!"); var someVariable = 'Value of someVariable'; function someFunction(value) { alert(value); } function test() { alert('test'); } alert("I'm inline!"); var someVariable = 'Value of someVariable'; function someFunction(value) { alert(value); } function test() { alert('test'); } jquery數組處理： 代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Hi!</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> var $ = 'Hi!'; jQuery(function(){ alert('$ = '+ $);//這裡的 $ 為 Hi!,把它變回jquery的符號:jQuery(function($){...}/這樣就可以了 //alert(jQuery) }); jQuery(function($){ //------------遍歷數組 .each的使用------------- var anArray = ['one','two','three']; $.each(anArray,function(n,value) { //do something here //alert(n+' '+value); }); var anObject = {one:1, two:2, three:3}; $.each(anObject,function(name,value) { //do something here //alert(name+' '+value); }); //-----------過濾數組 .grep的使用------------ var originalArray =[99,101,103]; var bigNumbers = $.grep(originalArray,'a>100');//第2種寫法,還可以用正則表達式來過濾 $.each(bigNumbers,function(n,value) { //do something here //alert(n+' '+value); }); //------------轉換數組 .map的使用------------ var strings = ['1','2','3','4','S','K','6']; var values = $.map(strings,function(value){ var result = new Number(value); return isNaN(result) ? null : result;//如果result不是數字則 返回null（返回null在這裡相當於不返回） }); $.each(values,function(n,value) { //do something here //alert(value); }); var characters = $.map( ['this','that','other thing'], function(value){return value.split('');}//分離字符串用返回給characters ); //alert(characters.length); //------------.inArray(value,array)的使用------------返回value在array下標的位置，如果value不在array中則返回-1 var index = $.inArray(2,[1,2,3,4,5]); //alert(index); //------------makeArray(obj)的使用------------將類數組對象轉換為數組對象。 var arr = jQuery.makeArray(document.getElementsByTagName_r("div")); //arr.reverse(); // 使用數組翻轉函數 $.each(arr,function(n,value) { //do something here //alert(n+' '+value); //alert(value.html()); }); var arr2 =$.unique(document.getElementsByTagName_r("div")); //獲得唯一的對象，看API,說得很模 糊,http://docs.jquery.com/Utilities/jQuery.unique alert(); $.each(arr2,function(n,value) { //do something here alert(n+' '+value); }); }); </script> </head> <body> <div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Hi!</title> <script type="text/javascript" src="../scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> var $ = 'Hi!'; jQuery(function(){ alert('$ = '+ $);//這裡的 $ 為 Hi!,把它變回jquery的符號:jQuery(function($){...}/這樣就可以了 //alert(jQuery) }); jQuery(function($){ //------------遍歷數組 .each的使用------------- var anArray = ['one','two','three']; $.each(anArray,function(n,value) { //do something here //alert(n+' '+value); }); var anObject = {one:1, two:2, three:3}; $.each(anObject,function(name,value) { //do something here //alert(name+' '+value); }); //-----------過濾數組 .grep的使用------------ var originalArray =[99,101,103]; var bigNumbers = $.grep(originalArray,'a>100');//第2種寫法,還可以用正則表達式來過濾 $.each(bigNumbers,function(n,value) { //do something here //alert(n+' '+value); }); //------------轉換數組 .map的使用------------ var strings = ['1','2','3','4','S','K','6']; var values = $.map(strings,function(value){ var result = new Number(value); return isNaN(result) ? null : result;//如果result不是數字則 返回null（返回null在這裡相當於不返回） }); $.each(values,function(n,value) { //do something here //alert(value); }); var characters = $.map( ['this','that','other thing'], function(value){return value.split('');}//分離字符串用返回給characters ); //alert(characters.length); //------------.inArray(value,array)的使用------------返回value在array下標的位置，如果value不在array中則返回 -1 var index = $.inArray(2,[1,2,3,4,5]); //alert(index); //------------makeArray(obj)的使用------------將類數組對象轉換為數組對象。 var arr = jQuery.makeArray(document.getElementsByTagName_r("div")); //arr.reverse(); // 使用數組翻轉函數 $.each(arr,function(n,value) { //do something here //alert(n+' '+value); //alert(value.html()); }); var arr2 =$.unique(document.getElementsByTagName_r("div")); //獲得唯一的對象，看API,說得很模 糊,http://docs.jquery.com/Utilities/jQuery.unique alert(); $.each(arr2,function(n,value) { //do something here alert(n+' '+value); }); }); </script> </head> <body> <div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div> </body> </html>