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 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
javascript事件处理模型实例说明
May 31 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
详解JavaScript的this指向和绑定
Sep 08 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
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
Javascript缓存API
2016/06/14 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python+Opencv识别两张相似图片
2020/03/23 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
.NET现在共支持多少种语言
2014/02/26 面试题
幼师自我鉴定范文
2013/10/01 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
小学班主任培训心得体会
2016/01/07 职场文书