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 相关文章推荐
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
学习vue.js条件渲染
Dec 03 Javascript
js实现密码强度检验
Jan 15 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
原生JS中应该禁止出现的写法
May 05 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中设置index.php文件为只读的方法
2013/02/06 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP的拦截器实例分析
2014/11/03 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
JS获取后台Cookies值的小例子
2013/03/04 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
vue基于element的区间选择组件
2018/09/07 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Python中bisect的用法
2014/09/23 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Django的models模型的具体使用
2019/07/15 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
法人委托书范本
2014/04/04 职场文书
C++程序员求职信范文
2014/04/14 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
初中作文评语
2014/12/25 职场文书
北京英语导游词
2015/02/12 职场文书
通用员工手册范本
2015/05/14 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技