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 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
javascript实现数独解法
Mar 14 Javascript
理解Javascript图片预加载
Feb 23 Javascript
Bootstrap布局方式详解
May 27 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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
数字转英文
2006/12/06 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python写日志封装类实例
2015/06/28 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
中职生求职信
2014/07/01 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
使用CSS连接数据库的方式
2022/02/28 HTML / CSS