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 相关文章推荐
10个新的最有前途的JavaScript框架
Mar 12 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
javascript将非数值转换为数值
Sep 13 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
uniapp实现横向滚动选择日期
Oct 21 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图片处理之图片背景、画布操作
2014/11/19 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python实现的归并排序算法示例
2017/11/21 Python
python实现SOM算法
2018/02/23 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
优秀毕业生推荐信
2013/11/02 职场文书
购房意向书范本
2014/04/01 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
雷锋之歌观后感
2015/06/10 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL