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 相关文章推荐
JavaScript学习笔记之Function对象
Jan 22 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
微信小程序 教程之引用
Oct 18 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 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入门源程序
2006/10/09 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
PHP 裁剪图片
2021/03/09 PHP
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
分享python数据统计的一些小技巧
2016/07/21 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python实现图片文件批量重命名
2020/03/23 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
银行职员思想汇报
2013/12/31 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
劳资员岗位职责
2015/02/13 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫