JS遍历对象或者数组

From: http://keshion.iteye.com/blog/728122

一.纯js实现

Js代码  收藏代码
  1. <script>  
  2.   var obj = {"player_id":"GS001","event_id":"1","destroy":"97%"};  
  3.   var props = "";  
  4.   for(var p in obj){  
  5.       if(typeof(obj[p])=="function"){  
  6.             obj[p]();  
  7.       }else{  
  8.             props+= p + "=" + obj[p] + " ";  
  9.          }  
  10.   }  
  11.   alert(props);  
  12. </script>  

 

二.jquery实现

 

1.遍历对象

Js代码  收藏代码
  1. $(function(){  
  2.        var tbody = "";      
  3.     //------------遍历对象 .each的使用-------------  
  4.       //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object)。本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)  
  5.     var obj =[{"name":"admin","password":"123456"}];  
  6.     $("#result").html("------------遍历对象 .each的使用-------------");  
  7.       alert(obj);//是个object元素  
  8.     //下面使用each进行遍历  
  9.     $.each(obj,function(n,value) {   
  10.            alert(n+' '+value);  
  11.            var trs = "";  
  12.              trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";  
  13.              tbody += trs;         
  14.            });  
  15.   
  16.          $("#project").append(tbody);  
  17.        
  18.   });  
 

2.遍历数组

Js代码  收藏代码
  1. $(function(){  
  2.    var tbody = "";  
  3.    //------------遍历数组 .each的使用-------------  
  4.    var anArray = ['one','two','three'];  
  5.    $("#result").html("------------遍历数组 .each的使用-------------");  
  6.          $.each(anArray,function(n,value) {  
  7.            alert(n+' '+value);  
  8.            var trs = "";  
  9.            trs += "<tr><td>" +value+"</td></tr>";  
  10.            tbody += trs;  
  11.          });  
  12.         $("#project").append(tbody);  
  13.      
  14. });  

 

3.遍历List集合

Js代码  收藏代码
  1. $(function(){  
  2.   var tbody = "";  
  3.   //------------遍历List集合 .each的使用-------------  
  4.   var obj =[{"name":"zhangsan","password":"123456"},{"name":"lisi","password":"333333"}];  
  5.   $("#result").html("遍历List集合 .each的使用");  
  6.   alert(obj);//是个object元素  
  7.   //下面使用each进行遍历  
  8.   $.each(obj,function(n,value) {   
  9.      alert(n+' '+value);  
  10.      var trs = "";  
  11.      trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";  
  12.      tbody += trs;         
  13.   });  
  14.   $("#project").append(tbody);  
  15. });  
 

 

 

一个完整的例子,向一个select添加元素

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <script type="text/javascript" src="../js/jquery-1.6.js"></script>  
  6. </head>  
  7.   
  8. <body>  
  9. <script type="text/javascript">  
  10.     var cities = new Array({"id":1,"name":"nanjing"},{"id":2,"name":"shanghai"});  
  11.     function add(){  
  12.         var added = "";  
  13.         $.each(cities,function(n, value){  
  14.             //n表示下标  
  15.             var str = "";  
  16.             str = '<option id=' + value.id + ' value='+ '"' + value.name +  '">' + value.name + '</option>' + '<br/>';  
  17.             added += str;  
  18.         });  
  19.         //alert(added);  
  20.         $("#selector").append(added);  
  21.     }  
  22.   
  23.     function add2(){  
  24.         var added = '';  
  25.         for(var i = 0; i < cities.length; i++ ){  
  26.             var data = "";  
  27.             for(var k in cities[i]){  
  28.               if(typeof(cities[i][k])=="function"){    
  29.                  cities[i][k]();    
  30.               }else{    
  31.                 data +=  k + "=" +  cities[i][k] + ' ';    
  32.                }   
  33.             }  
  34.             added += data;  
  35.         }  
  36.         var select = document.getElementById("test");  
  37.         select.innerHTML = added;  
  38.     }  
  39.     $(function(){  
  40.         $("#add").click(function(){  
  41.             add();  
  42.         });  
  43.     });  
  44. </script>  
  45.     <button id="add">显示select</button><br/><br/>  
  46.     <select id="selector">  
  47.     </select>  
  48.     <div id="test">  
  49.     </div>  
  50.   
  51. </body>  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入了解SEO

为什么要SEO&#xff0c;SEO的作用是什么&#xff1f;SEO&#xff08;Search Engine Optimization&#xff09;是为了让自己的IT产品优先能被搜索引擎找到&#xff0c;通过搜索引擎搜索推荐给网民浏览&#xff08;特点就是精准找到用户群体&#xff09;。正所谓&#xff0c;有用…

el-table表格fixed=“right“后表格错乱;Safari浏览器el-table表格错乱;Safari浏览器样式需改无效;

场景&#xff1a;el-table表格操作列右固定fixed“right”&#xff0c;导致表格错乱。其实是由于某行的字体太多&#xff0c;所导致操作列高度错乱。 至于Safari浏览器样式修改无效的问题&#xff1a;每次修改代码后&#xff0c;Safari浏览器项目刷新无变化&#xff0c;必须每次…

从零开始学习Node.js例子七 发送HTTP客户端请求并显示响应结果

From: http://www.cnblogs.com/EricaMIN1987_IT/p/3654233.html wget.js&#xff1a;发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求。 data事件在数据到达时被触发&#xff0c;error事件在发生错误时被触发。 HTTP请求中的数据格式通过MIME协议来声…

2---多线程文件读写

//最简单的创建多线程实例 #include <stdio.h> #include <windows.h> //子线程函数 1 DWORD WINAPI ThreadFun1(LPVOID pM) { while (1) { printf("子线程的线程1 "); return 0; } } //子线程函数 2 int i0;DWORD WINAPI ThreadFun2…

el-select 结合 el-checkBox 实现下拉全选+多选功能;el-select下拉框全选功能;

原文链接 el-select选择框也有多选功能&#xff0c;但是没有全选。故需要改造一下&#xff0c;el-select 结合 el-checkBox 实现下拉全选多选功能。 代码如下&#xff0c;可直接复制使用&#xff1a; <!--* Description: el-select 结合 el-checkBox 实现下拉全选多选功能 …

TCPDUMP/LIBPCAP 3-PCAP 中文手册(1)

SYNOPSIS #include <pcap/pcap.h> DESCRIPTION PCAP提供为抓包系统提供高级接口。网络上的所有数据包&#xff0c;即使是发往其他主机的数据包&#xff0c;都可以通过这种机制访问。它还支持将捕获的数据包保存到“savefile”&#xff0c;和从“savefile”中读取数据包…

扑克牌的研究

1. 扑克牌的设计 扑克牌设计的一个中心原则是尽可能做到关于原点&#xff08;图案中心&#xff09;对称&#xff0c;也即具有某种奇函数的特性&#xff1b; JQK&#xff1a;都能做到完美的上下对称&#xff0c;大小王不对称&#xff1b;1-9 的数字牌都是能做到完美的左右对称&a…

JS类似Java String.format的函数

From: http://chenzenghua.iteye.com/blog/1770791Js代码 String.prototype.format String.prototype.f function () { var s this, i arguments.length; while (i--) { s s.replace(new RegExp(\\{ i \\}, gm), arguments[i]); …

C#面向对象基础(六) 继承

继承描述的是is a kind of 的关系.比如:Animal类 wolf类. Wolf类是Animal类的子类,Animal类是父类.Wolf类从Animal类派生,Wolf类继承了Animal类Wolf是一种Animal.失败的设计:1publicclassWolf2{3publicstringname;4publicintage;5publicboolishungry;6privateintweight;7public…

pointer-events: none;属性。pointer-events: none;看得见摸不着,点击穿透。

pointer-events: none;理解&#xff1a;你可以看的到某个元素&#xff0c;但是你无法摸的着&#xff0c;点击不到&#xff0c;点击会穿透触发到下层的元素 display&#xff1a;none; 是你摸不着&#xff0c;但是你也看不见。 最简单的使用场景是&#xff1a;给某个box1盒子设置…

PHP常用正则表达式汇总

1. 平时做网站经常要用正则表达式&#xff0c;下面是一些讲解和例子&#xff0c;仅供大家参考和修改使用&#xff1a; 2. "^\d$"  //非负整数&#xff08;正整数 0&#xff09; 3. "^[0-9]*[1-9][0-9]*$"  //正整数 4. "^((-\d)|(0)…

USB基础与重点梳理—关于USB的问题

Q1. USB的传输线结构是如何的呢&#xff1f; A1: 一条USB的传输线分别由地线、电源线、D、D-四条线构成&#xff0c;D和D-是差分输入线&#xff0c;它使用的是3.3V的电压&#xff08;注意哦&#xff0c;与CMOS的5V电平不同&#xff09;&#xff0c;而电源线和地线可向设备提供…

python文件头--文件编码指定

From: http://blog.csdn.net/chenggong2dm/article/details/7677028 #codingutf-8 #-*- coding: utf-8 -*- 一直搞不清楚这俩头什么区别。直觉上一样。今天特意查了一下&#xff0c;大致明白了&#xff1a; 对于python解释器来说&#xff0c;这两种写法一样。但是对于编辑器…

axios上传文件;el-upload上传图片和post接口上传file文件;前端给后端接口上传file文件。通过formData给接口传递file文件

本文使用element-ui的el-upload图片上传功能。上传链接 接口参数&#xff1a; <el-uploadaction"https://jsonplaceholder.typicode.com/posts/"list-type"picture-card":on-success"handleAvatarSuccess":on-preview"handlePictureCar…

硬件通讯协议的数据传输方式

硬件协议数据传输的包含要素主要为&#xff1a;物理介质&#xff0c;编码方式&#xff0c;通讯协议&#xff0c;传输特点。 下面就对常见的硬件通讯协议进行简单总结。 1. UART LSB First 2. USB LSB First&#xff0c;小端传输 3. SPI MSB First 4. IIC MSB First 5. 网络 大…

2、Eternal框架-svn_有更新!

2019独角兽企业重金招聘Python工程师标准>>> 我在code.google.com上建立了eternal项目。 下载地址为&#xff1a;http://code.google.com/p/eternal-mvc/downloads/list 包含了示例war包和源代码。 转载于:https://my.oschina.net/eternal/blog/100233

redis memcache 性能比较

From: http://blog.51yip.com/cache/1318.html redis和memcache非常像的&#xff0c;都是key,value的方式&#xff0c;将数据存放内存中。最近在学习redis&#xff0c;在网上看了一些这方面的资料&#xff0c;有三种观点&#xff1a; 1,redis读写内存比memcache快 2,memcache读…

SQL性能优化案例分析

这段时间做一个SQL性能优化的案例分析&#xff0c; 整理了一下过往的案例&#xff0c;发现一个比较有意思的&#xff0c;拿出来给大家分享。 这个项目是我在项目开展2期的时候才加入的&#xff0c; 之前一期是个金融内部信息门户&#xff0c; 里面有个功能是收集各个上市公司的…

前端下载图片、pdf、excel、world文件;前端下载图片和pdf文件;前端a标签下载图片和pdf文件;下载文件名称不生效原因。

参考文章1 参考文章2 以下的下载是&#xff0c;拿到了后端给的下载图片的接口地址url > 方法1&#xff1a;将文本或者JS字符串通过 Blob 转换成二进制下载 优点&#xff1a;可以下载&#xff0c;也可以保存名称。 //文件流参数和图片名称 function downloadTxt(str, filenam…

JavaBean规范

&#xff08;1&#xff09;JavaBean 类必须是一个公共类&#xff0c;并将其访问属性设置为 public &#xff0c;如&#xff1a; public class user{......}&#xff08;2&#xff09;JavaBean 类必须有一个空的构造函数&#xff1a;类中必须有一个不带参数的公用构造器 &#…