1. <html>
  2. <head>
  3.     <title> New Document </title>
  4.     <script src="~/Scripts/jquery-1.10.2.js"></script>
  5.     <script type="text/javascript">
  6.         /* 测试一
  7.         $(function () {
  8.             var tbody = "";
  9.             var obj = [{ "name": "张三", "password": "123456" }];
  10.             $("#result").html("------------遍历对象 .each的使用-------------");
  11.             alert(obj);//是个object元素
  12.             //下面使用each进行遍历
  13.             $.each(obj, function (n, value) {
  14.                 alert(n + ' ' + value);
  15.                 var trs = "";
  16.                 trs += "<tr><td>" + value.name + "</td> <td>" + value.password + "</td></tr>";
  17.                 tbody += trs;
  18.             });
  19.             $("#project").append(tbody);
  20.         });
  21.         */
  22.  
  23.         /*测试二
  24.         $(function () {
  25.             var tbody = "";
  26.             //------------遍历数组 .each的使用-------------
  27.             var anArray = ['one', 'two', 'three'];
  28.             $("#result").html("------------遍历数组 .each的使用-------------");
  29.             $.each(anArray, function (n, value) {
  30.                 alert(n + ' ' + value);
  31.                 var trs = "";
  32.                 trs += "<tr><td>" + value + "</td></tr>";
  33.                 tbody += trs;
  34.             });
  35.             $("#project").append(tbody);
  36.         });
  37.         */
  38.  
  39.         /*测试三
  40.         $(function () {
  41.             var tbody = "";
  42.             //------------遍历List集合 .each的使用-------------
  43.             var obj = [{ "name": "麦迪", "password": "123456" }, { "name": "科比", "password": "333333" }];
  44.             $("#result").html("遍历List集合 .each的使用");
  45.             alert(obj);//是个object元素
  46.             //下面使用each进行遍历
  47.             $.each(obj, function (n, value) {
  48.                 alert(n + ' ' + value);
  49.                 var trs = "";
  50.                 trs += "<tr><td>" + value.name + "</td> <td>" + value.password + "</td></tr>";
  51.                 tbody += trs;
  52.             });
  53.             $("#project").append(tbody);
  54.         });
  55.         */
  56.  
  57.         $(function () {
  58.             var arr = [12, 23, 5, 3, 25, 98, 76, 54, 56, 76];
  59.             alert(arr.join("_")); //返回字符串，将数组的每一个元素值用separator连接在一起。
  60.  
  61.             var slideArray =
  62.             [
  63.                 { "imgsrc": "a.jpg", "url": "", "alt": "这是a图片" },
  64.                 { "imgsrc": "b.jpg", "url": "", "alt": "这是b图片" },
  65.                 { "imgsrc": "c.jpg", "url": "", "alt": "这是c图片" },
  66.                 { "imgsrc": "d.jpg", "url": "", "alt": "这是d图片" },
  67.                 { "imgsrc": "e.jpg", "url": "", "alt": "这是e图片" }
  68.             ];
  69.             slideArray.push({ "imgsrc": "f.jpg", "url": "", "alt": "这是f图片" }); //添加对象
  70.             //slideArray.splice(3, 1); //删除d 删除从指定位置开始的指定数量的元素，返回数组形式
  71.             slideArray.splice(3, 1, { "imgsrc": "g.jpg", "url": "", "alt": "这是g图片" }); //对应位置删除d且插入新数据
  72.             $("#btnArray").data("mydata", slideArray);  //data存储数据
  73.             var mydata = $("#btnArray").data("mydata"); //获取数据
  74.             for (var i = 0; i < mydata.length; i++) {
  75.                 alert(mydata[i].imgsrc);
  76.             }
  77.         });
  78.  
  79.         $(function () {
  80.             var a = $.buildHTML("a", "我是由模版生成的", {
  81.                 id: "myLink",
  82.                 href: "http://www.baidu.com"
  83.             });
  84.             $('#wrap1').append(a);
  85.             var input = $.buildHTML("input", { //可自用定制属性输出
  86.                 id: "myInput",
  87.                 type: "text",
  88.                 class: "myclass",
  89.                 value: "我也是由模版生成的~~"
  90.             });
  91.             $('#wrap2').append(input);
  92.         });
  93.  
  94.         $.buildHTML = function (tag, htmltxt, attrs) {
  95.             // you can skip html param
  96.             if (typeof (htmltxt) != 'string') {
  97.                 attrs = htmltxt;
  98.                 htmltxt = null;
  99.             }
  100.             var h = '<' + tag;
  101.             for (attr in attrs) {
  102.                 if (attrs[attr] === false) continue;
  103.                 h += ' ' + attr + '="' + attrs[attr] + '"';
  104.             }
  105.             return h += htmltxt ? ">" + htmltxt + "</" + tag + ">" : "/>";
  106.         }
  107.     </script>
  108. </head>
  109.  
  110. <body>
  111.     <input type="button" id="btnArray" value="存储数组" /><br />
  112.     <div id="result" style="font-size:16px;color:red;"></div>
  113.     <table cellpadding=5 cellspacing=1 width=620 id="project" border="1">
  114.         <tr>
  115.             <th>用户名</th>
  116.             <th>密码</th>
  117.         </tr>
  118.     </table>
  119.  
  120.     <div id="wrap1"></div>
  121.     <div id="wrap2"></div>
  122. </body>
  123. </html>

Javascript/Jquery操作数组，增删改查以及动态创建HTML元素的更多相关文章

  1. 使用python操作XML增删改查

    使用python操作XML增删改查 什么是XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输 ...

  2. js操作indexedDB增删改查示例

    js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var r ...

  3. MySQL数据分析（16）— 数据操作之增删改查

    前面我们说学习MySQL要从三个层面,四大逻辑来学,三个层面就是库层面,表层面和数据层面对吧,数据库里放数据表,表里放数据是吧,大家可以回忆PPT中jacky的这图,我们已经学完了库层面和表层面,从本 ...

  4. Redis简单的数据操作（增删改查）

    #Redis简单的数据操作(增删改查): 字符串类型 string 1. 存储: set key value 127.0.0.1:6379> set username zhangsan OK 2 ...

  5. 仿联想商城laravel实战---5、无刷新的增删改查（动态页面更新的三种方式（html））

    仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...

  6. 超详细的DOM操作（增删改查）

    操作DOM的核心就是增删改查 原文地址:https://jianshu.com/p/b0aa846f4dcc 目录 一.节点创建型API 1.1 createElement 1.2 createTex ...

  7. JavaScript之DOM的增删改查

    JavaScript的组成: 1. ECMAScript-语法规范 2. Web APIs(浏览器提供的工具) (1).BOM (浏览器对象模型) (2).DOM (文档对象模型) 今天就来讲讲DOM ...

  8. MongoDB基础入门002--基本操作，增删改查

    一.这里只是演示最基本的操作,更多的信息可以去官网.https://docs.mongodb.com/manual 打开一个cmd,输入mongo命令打开shell,其实这个shell就是mongod ...

  9. 2. MongoDB基本操作 —— 用Mongo.exe操作数据库增删改查

    一.开篇 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(collection).文档对象 ...

随机推荐

  1. 第1阶段——u-boot分析之make 100ask24x0_config指令(1)

    本文学习目标:         掌握"make 100ask24x0_config"指令在Makefile和mkconfig文件中是怎么实现配置芯片选型 1.执行make 100a ...

  2. 深度神经网络在量化交易里的应用 之二 -- 用深度网络(LSTM)预测5日收盘价格

        距离上一篇文章,正好两个星期. 这边文章9月15日 16:30 开始写. 可能几个小时后就写完了.用一句粗俗的话说, "当你怀孕的时候,别人都知道你怀孕了, 但不知道你被日了多少回 ...

  3. 团队作业8——第二次项目冲刺（Beta阶段）5.20

    1.当天站立式会议照片 会议内容: 本次会议为第二次会议 本次会议在陆大楼2楼召开,本次会议内容: ①:检查第一次任务完成情况 ②:做第二次任务的详细分工 ③:规定完成时间是在第三次任务之前 ④:遇到 ...

  4. C语言数据在内存分配

    一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 程序运行时由编译器自动分配,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.程序结束时由编译器自动释放 ...

  5. 201521123014 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 Q1 ArrayList代码分析 1.1 解释ArrayList的contains源代码 先看看contains的源代码: public boolean conta ...

  6. 201521123101 《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  7. 201521123062《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现 ...

  8. oracle客户端plsql设置字符集

    感谢一个新朋友的到来,我帮他的过程中有好些东西都不怎么想的起来了,所以从现在起我需要记录下每一点一滴, 因为我觉得写下来的东西才不会丢,而且欢迎以后的朋友到来. 使用plsql查数据的时候有时候中文会 ...

  9. Struts2配置文件复用代码【web.xml、struts.xml、常量配置】

    web.xml的分发器代码: <!-- 引入struts核心过滤器 --> <filter> <filter-name>struts2</filter-nam ...

  10. 短视频图像处理 OpenGL ES 实践

    2017年,短视频正以其丰富的内容表现力和时间碎片化的特点,快速崛起,而短视频最具可玩性之处就在支持人脸识别的动态贴图和各种不同效果的美颜.滤镜等.那短视频动态贴纸.滤镜.美颜等功能究竟是如何实现的呢 ...