jquery 遍历

来源:互联网 发布:wps数据有效性设置取消 编辑:程序博客网 时间:2024/06/14 02:39
  • 1.jquery 遍历对象  
  •   
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  • <HTML>  
  •  <HEAD>  
  •   <TITLE> New Document </TITLE>  
  •   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  •   <script  type="text/javascript">  
  •      $(function(){  
  •   
  •        var tbody = "";      
  •     //------------遍历对象 .each的使用-------------  
  •       //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object)。本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)  
  •     var obj =[{"name":"项海军","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);  
  •        
  •   });  
  •   </script>  
  •  </HEAD>  
  •    
  •  <BODY>  
  •      <div id="result" style="font-size:16px;color:red;"></div>  
  •     <table cellpadding=5 cellspacing=1 width=620 id="project" border="1" >  
  •             <tr>  
  •                 <th>用户名</th>  
  •                 <th>密码</th>                
  •             </tr>               
  •      </table>  
  •  </BODY>  
  • </HTML>  
  •   
  •   
  • 2.jQuery遍历数组  
  •   
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  • <HTML>  
  •  <HEAD>  
  •   <TITLE> New Document </TITLE>  
  •   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  •   <script  type="text/javascript">  
  •      $(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);  
  •        
  •   });  
  •   </script>  
  •  </HEAD>  
  •    
  •  <BODY>  
  •     ------------此部分同1中的body部分--------------------  
  •   
  •  </BODY>  
  • </HTML>  
  •   
  •   
  • 3.jQuery 遍历List集合(其实与遍历一个对象没有太大区别,只是格式上的问题)  
  •   
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  • <HTML>  
  •  <HEAD>  
  •   <TITLE> New Document </TITLE>  
  •   <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
  •   <script  type="text/javascript">  
  •      $(function(){  
  •   
  •        var tbody = "";  
  •       
  •      //------------遍历List集合 .each的使用-------------  
  •       var obj =[{"name":"项海军","password":"123456"},{"name":"科比","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);  
  •        
  •   });  
  •   </script>  
  •  </HEAD>  
  •    
  •  <BODY>  
  •        ------------此部分同1中的body部分--------------------  
  •   
  •  </BODY>  
  • </HTML>  
  • 0 0