一.纯js实现

Js代码  

1. <script>   
2.   var obj = {"player_id":"GS001","event_id":"1","destroy":"97%"};   
3.   var props = "";   
4.   for(var p in obj){   
5.       if(typeof(obj[p])=="function"){   
6.             obj[p]();   
7.       }else{   
8.             props+= p + "=" + obj[p] + " ";   
9.          }   
10.   }   
11.   alert(props);   
12. </script>  

<script>  var obj = {"player_id":"GS001","event_id":"1","destroy":"97%"};  var props = "";  for(var p in obj){      if(typeof(obj[p])=="function"){            obj[p]();      }else{            props+= p + "=" + obj[p] + " ";         }  }  alert(props);</script>

二.jquery实现

1.遍历对象

Js代码  

1. $(function(){   
2.        var tbody = "";       
3.     //------------遍历对象 .each的使用-------------   
4.       //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们将直接自定义对象)   
5.     var obj =[{"name":"admin","password":"123456"}];   
6.     $("#result").html("------------遍历对象 .each的使用-------------");   
7.       alert(obj);//是个object元素   
8.     //下面使用each进行遍历   
9.     $.each(obj,function(n,value) {    
10.            alert(n+‘ ‘+value);   
11.            var trs = "";   
12.              trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";   
13.              tbody += trs;          
14.            });   
15.   
16.          $("#project").append(tbody);   
17.         
18.   });  

$(function(){       var tbody = "";        //------------遍历对象 .each的使用-------------      //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们将直接自定义对象)    var obj =[{"name":"admin","password":"123456"}];    $("#result").html("------------遍历对象 .each的使用-------------");      alert(obj);//是个object元素    //下面使用each进行遍历    $.each(obj,function(n,value) {            alert(n+‘ ‘+value);           var trs = "";             trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";             tbody += trs;                  });         $("#project").append(tbody);       });

2.遍历数组

Js代码  

1. $(function(){   
2.    var tbody = "";   
3.    //------------遍历数组 .each的使用-------------   
4.    var anArray = [‘one‘,‘two‘,‘three‘];   
5.    $("#result").html("------------遍历数组 .each的使用-------------");   
6.          $.each(anArray,function(n,value) {   
7.            alert(n+‘ ‘+value);   
8.            var trs = "";   
9.            trs += "<tr><td>" +value+"</td></tr>";   
10.            tbody += trs;   
11.          });   
12.         $("#project").append(tbody);   
13.       
14. });  

  $(function(){     var tbody = "";     //------------遍历数组 .each的使用-------------     var anArray = [‘one‘,‘two‘,‘three‘];     $("#result").html("------------遍历数组 .each的使用-------------");           $.each(anArray,function(n,value) {             alert(n+‘ ‘+value);             var trs = "";             trs += "<tr><td>" +value+"</td></tr>";             tbody += trs;           });          $("#project").append(tbody);       });

3.遍历List集合

Js代码  

1. $(function(){   
2.   var tbody = "";   
3.   //------------遍历List集合 .each的使用-------------   
4.   var obj =[{"name":"zhangsan","password":"123456"},{"name":"lisi","password":"333333"}];   
5.   $("#result").html("遍历List集合 .each的使用");   
6.   alert(obj);//是个object元素   
7.   //下面使用each进行遍历   
8.   $.each(obj,function(n,value) {    
9.      alert(n+‘ ‘+value);   
10.      var trs = "";   
11.      trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";   
12.      tbody += trs;          
13.   });   
14.   $("#project").append(tbody);   
15. });  

  $(function(){    var tbody = "";    //------------遍历List集合 .each的使用-------------    var obj =[{"name":"zhangsan","password":"123456"},{"name":"lisi","password":"333333"}];    $("#result").html("遍历List集合 .each的使用");    alert(obj);//是个object元素    //下面使用each进行遍历    $.each(obj,function(n,value) {        alert(n+‘ ‘+value);       var trs = "";       trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";       tbody += trs;           });    $("#project").append(tbody);  });

一个完整的例子,向一个select添加元素

Html代码  

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5.     <script type="text/javascript" src=http://www.mamicode.com/"../js/jquery-1.6.js"></script>  
6. </head>  
7.   
8. <body>  
9. <script type="text/javascript">  
10.     var cities = new Array({"id":1,"name":"nanjing"},{"id":2,"name":"shanghai"});   
11.     function add(){   
12.         var added = "";   
13.         $.each(cities,function(n, value){   
14.             //n表示下标   
15.             var str = "";   
16.             str = ‘<option id=‘ + value.id + ‘ value=http://www.mamicode.com/‘+ ‘"‘ + value.name +  ‘">‘ + value.name + ‘</option>‘ + ‘<br/>‘;   
17.             added += str;   
18.         });   
19.         //alert(added);   
20.         $("#selector").append(added);   
21.     }   
22.   
23.     function add2(){   
24.         var added = ‘‘;   
25.         for(var i = 0; i < cities.length; i++ ){   
26.             var data = "";   
27.             for(var k in cities[i]){   
28.               if(typeof(cities[i][k])=="function"){     
29.                  cities[i][k]();     
30.               }else{     
31.                 data +=  k + "=" +  cities[i][k] + ‘ ‘;     
32.                }    
33.             }   
34.             added += data;   
35.         }   
36.         var select = document.getElementById("test");   
37.         select.innerHTML = added;   
38.     }   
39.     $(function(){   
40.         $("#add").click(function(){   
41.             add();   
42.         });   
43.     });   
44. </script>  
45.     <button id="add">显示select</button><br/><br/>  
46.     <select id="selector">  
47.     </select>  
48.     <div id="test">  
49.     </div>  
50.   
51. </body>  

JS遍历对象或者数组