jQuery遍历对象、数组、集合实例


Posted in Javascript onNovember 08, 2014

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>
Javascript 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
用vue写一个日历
Nov 02 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 #Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 #Javascript
JavaScript中判断整数的多种方法总结
Nov 08 #Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 #Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 #Javascript
JavaScript函数模式详解
Nov 07 #Javascript
JavaScript代码复用模式详解
Nov 07 #Javascript
You might like
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
js实现旋转木马效果
2017/03/17 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
Python实现线程池代码分享
2015/06/21 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python遍历小写英文字母的方法
2019/01/02 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python判断变量是否为列表的方法
2020/09/17 Python
家具厂厂长岗位职责
2014/01/01 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
买卖协议书范本
2014/04/21 职场文书
活动宣传策划方案
2014/05/23 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
班主任寄语2015
2015/02/26 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis