zoukankan      html  css  js  c++  java
  • jquery遍历对象,数组,集合

    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);

     //------------遍历数组 .grep的使用-------------
    grep()方法用于数组元素过滤筛选 
    grep(array,callback,invert)
    array:待过滤数组;
    callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值。此函数应返回一个布尔值。另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形式?),其中 a 代表数组元素,i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
    invert:布尔型可选项,默认值false,值为true或false, 如果 “invert” 为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当”invert” 为 true,则返回过滤函数中返回 false 的元素集
    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]);
            }
        }
    //------------遍历数组 .map的使用-------------
    map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
    由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
    .map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单

     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]);
            }
        } });
    </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>
  • 相关阅读:
    数据库02
    MySQL1
    GIL 死锁 递归锁 event 信号量 线程Queue
    小脚本 暴力删除文件 刷屏
    常见web攻击 及基础 回顾(杂记)
    接口中的简单异步 async
    python协程 示例
    python 利用jinja2模板生成html
    python 调用webservices 接口
    python 进程 进程池 进程间通信
  • 原文地址:https://www.cnblogs.com/tingbogiu/p/5826323.html
Copyright © 2011-2022 走看看