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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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编写的导航条程序
2006/10/09 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
基于JS判断对象是否是数组
2020/01/10 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
对python中return与yield的区别详解
2020/03/12 Python
linux面试题参考答案(9)
2016/01/29 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
2015年端午节活动方案
2015/05/05 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python