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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
微信小程序排坑指南详解
May 23 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
删除重复数据的算法
2006/11/23 Javascript
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
理解JS事件循环
2016/01/07 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
Node.js log4js日志管理详解
2018/07/31 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
python redis存入字典序列化存储教程
2020/07/16 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
新闻报道策划方案
2014/06/11 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS