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协议来声…

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

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

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]); …

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

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

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…

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

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

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

Redis安装和使用指南

From: http://mwt198668.blog.163.com/blog/static/48803692201132141755962/ Redis安装指南 作者&#xff1a;Red_Ant 时间&#xff1a;2011-04-20 简 介 redis是一个key-value存储系统。和Memcached类似&#xff0c;它支持存储的value类型相对更多&#xff0c;包括string…

员工打卡课后小项目

public class Fm{//员工类public string Id { get; set; }public string Name { get; set; }public int Age { get; set; }public string Gender { get; set; }} public class SI{//打卡类public string Name { get; set; }public DateTime Begin { get; set; }public DateTime…

通过后端接口,预览文件流图片;预览和下载文件流

后端接口返回的是文件流 1.如果是pdf等文件&#xff0c;通过iframe结合文件流&#xff0c;做到文件的下载和预览 // 预览文件openPdf1 () {// 后端下载文件流的地址接口let url G_CGI_PHP.group.documentDownload ?id this.paymentImage1const newWindow window.open()ne…

DatePicker动态设置picker-options 中的disabledDate属性操作;

一、场景&#xff1a; 有两个时间选择器A和B。A的时间任意选&#xff0c;B的时间必须选择A之后的时间。此时就需要给B设置可选时间区间&#xff0c;而且是动态的值&#xff0c;既动态设置picker-options 中的disabledDate。 二、代码片段 html&#xff1a; <el-col :span&…

[转]序列化悍将Protobuf-Net,入门动手实录

最近在研究web api 2&#xff0c;看了一篇文章&#xff0c;讲解如何提升性能的&#xff0c; 在序列化速度的跑分中&#xff0c;Protobuf一骑绝尘&#xff0c;序列化速度快&#xff0c;性能强&#xff0c;体积小&#xff0c;所以打算了解下这个利器 1&#xff1a;安装篇 谷歌官方…

Linux 内核打印级别

printk的打印级别 #define KERN_EMERG "<0>" /* system is unusable */ #define KERN_ALERT "<1>" /* action must be taken immediately */ #define KERN_CRIT "<2>" /* critical conditions */ #define KERN_ERR "…

C# 文件操作详解(三)---------Directory类

前面两篇介绍了File类和FileInfo类&#xff0c;对于文件的操作基本够用&#xff0c;但是后面还会补充一下FileStream相关的操作&#xff0c;例如StreamReader和StreamWriter的内容。本文主要介绍Directory类的使用&#xff0c;让我们一起看一下Directory类为我们提供了哪些操作…

Libusb开发教程一 安装

1. 从官网下载需要使用的离线资源包&#xff1a; 进入 libusb.info 的 Download 页 下载 libusb-1.0.9.tar.bz2 下载 libusb-compat-0.1.4.tar.bz2 2. 实验平台 OS: Ubuntu16.04 Kernel: 4.4.0 3. 安装过程 <1> 拷贝步骤一中的离线包到 Linux 系统目录&#xff0c;一般…

WIN10解包分区和磁盘分区教程

From: https://thinkpad.bbs.taobao.com/detail.html?postId5390151 新机到手第一件事情就是要系统解包和磁盘分区。建议在安装和卸载软件之前&#xff0c;进行磁盘分区&#xff0c;不然有可能只能分出原空间的50%&#xff0c;想要分更多空间&#xff0c;只能还原系统了。 一、…

element自定义图标;element自定义icon;element-ui自定义tab栏图标;

一、场景&#xff1a;element-ui本身提供了图标&#xff0c;但是不全面或者开发时候需要使用自定义图标展示。此时可以用到elemenUi的自定义图标。参考链接 二、html使用&#xff0c;和正常的element的 图标 i 标签使用一样&#xff0c;使用设置的类名class即可&#xff1a; &…

canvas文字居中;canvas画布文字右对齐;canvas画布文字左对齐;canvas文字自动换行;canvas设置行间距;

canvas参考手册 场景&#xff1a;画布绘制文本&#xff0c;使用 context.fillText(text,x,y,maxWidth)。文本对其也就是设置xy坐标问题。 以下的画布设定宽度假设都是width&#xff1a;500 一、canvas文本左对齐&#xff1a; 就是x轴设置为0即可。 var cdocument.getElementBy…