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 相关文章推荐
table insertRow、deleteRow定义和用法总结
May 14 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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中的float类型使用说明
2010/07/27 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
详解Python中的Cookie模块使用
2015/07/06 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python实现门限回归方式
2020/02/29 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
python实现学生管理系统开发
2020/07/24 Python
师范生的个人求职信范文
2014/01/04 职场文书
结对共建工作方案
2014/06/02 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
离婚民事起诉状
2015/08/03 职场文书
乡镇团代会开幕词
2016/03/04 职场文书