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技术-屏蔽类
Aug 15 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
React Native登录之指纹登录篇的示例代码
Nov 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
香妃
2021/03/03 冲泡冲煮
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python中查看变量内存地址的方法
2015/05/05 Python
python中星号变量的几种特殊用法
2016/09/07 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
详解Django中间件执行顺序
2018/07/16 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Python实现上下文管理器的方法
2020/08/07 Python
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
毕业生物理教师求职信
2013/10/17 职场文书
教研处工作方案
2014/05/26 职场文书
HR求职自荐信范文
2014/06/21 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
幼儿园感谢信
2015/01/21 职场文书
教师工作能力自我评价
2015/03/04 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
深入理解go slice结构
2021/09/15 Golang
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技