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的获取标签名的代码
Jul 16 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
vue构建单页面应用实战
Apr 10 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JS+CSS实现过渡特效
Jan 02 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实现弹出消息提示框的两种方法
2013/12/17 PHP
PHP循环结构实例讲解
2014/02/10 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php session_decode函数用法讲解
2019/05/26 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
慰问信范文
2015/02/14 职场文书
与死神共舞观后感
2015/06/15 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
Java 多线程协作作业之信号同步
2022/05/11 Java/Android