萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery遍歷篩選數組的幾種方法

jquery遍歷篩選數組的幾種方法

 本文為大家介紹下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('');}//分離
copyright © 萬盛學電腦網 all rights reserved