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 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
javascript中闭包closure的深入讲解
Mar 03 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/12/06 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
python之import机制详解
2014/07/03 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python统计单词出现的次数
2018/04/04 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python 实现try重新执行
2019/12/21 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
python绘制趋势图的示例
2020/09/17 Python
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
简历自我评价优缺点
2015/03/11 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书