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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
js中arguments对象的深入理解
May 14 Javascript
vue实现表单录入小案例
Sep 27 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实现QQ登录实例代码
2016/01/14 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
JavaScript Prototype对象
2009/01/07 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
详解webpack babel的配置
2018/01/09 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
Python数据集切分实例
2018/12/08 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python测试线程应用程序过程解析
2019/12/31 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
flask开启多线程的具体方法
2020/08/02 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
架构师岗位职责
2013/11/18 职场文书
车间统计员岗位职责
2014/01/05 职场文书
党员活动日总结
2014/05/05 职场文书
法定代表人授权委托书
2014/09/19 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书