<html>

<head>

    <title> New Document </title>

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        /* 测试一

        $(function () {

            var tbody = "";

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

        });

        */

        /*测试二

        $(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);

        });

        */

        /*测试三

        $(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);

        });

        */

        $(function () {

            var arr = [12, 23, 5, 3, 25, 98, 76, 54, 56, 76];

            alert(arr.join("_")); //返回字符串，将数组的每一个元素值用separator连接在一起。

            var slideArray =

            [

                { "imgsrc": "a.jpg", "url": "", "alt": "这是a图片" },

                { "imgsrc": "b.jpg", "url": "", "alt": "这是b图片" },

                { "imgsrc": "c.jpg", "url": "", "alt": "这是c图片" },

                { "imgsrc": "d.jpg", "url": "", "alt": "这是d图片" },

                { "imgsrc": "e.jpg", "url": "", "alt": "这是e图片" }

            ];

            slideArray.push({ "imgsrc": "f.jpg", "url": "", "alt": "这是f图片" }); //添加对象

            //slideArray.splice(3, 1); //删除d 删除从指定位置开始的指定数量的元素，返回数组形式

            slideArray.splice(3, 1, { "imgsrc": "g.jpg", "url": "", "alt": "这是g图片" }); //对应位置删除d且插入新数据

            $("#btnArray").data("mydata", slideArray);  //data存储数据

            var mydata = $("#btnArray").data("mydata"); //获取数据

            for (var i = 0; i < mydata.length; i++) {

                alert(mydata[i].imgsrc);

            }

        });

        $(function () {

            var a = $.buildHTML("a", "我是由模版生成的", {

                id: "myLink",

                href: "http://www.baidu.com"

            });

            $('#wrap1').append(a);

            var input = $.buildHTML("input", { //可自用定制属性输出

                id: "myInput",

                type: "text",

                class: "myclass",

                value: "我也是由模版生成的~~"

            });

            $('#wrap2').append(input);

        });

        $.buildHTML = function (tag, htmltxt, attrs) {

            // you can skip html param

            if (typeof (htmltxt) != 'string') {

                attrs = htmltxt;

                htmltxt = null;

            }

            var h = '<' + tag;

            for (attr in attrs) {

                if (attrs[attr] === false) continue;

                h += ' ' + attr + '="' + attrs[attr] + '"';

            }

            return h += htmltxt ? ">" + htmltxt + "</" + tag + ">" : "/>";

        }

    </script>

</head>

<body>

    <input type="button" id="btnArray" value="存储数组" /><br />

    <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>

    <div id="wrap1"></div>

    <div id="wrap2"></div>

</body>

</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. 安装JDK详细步骤，以及环境变量配置

    1.JDK 1)下载:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 点击同意, ...

  2. kickstart部署及使用

    Linux运维:kickstart : 矮哥linux运维群:93324526 1.环境检查 [root@m01 ~]# cat /etc/redhat-release CentOS release ...

  3. tkinter第一章1

    tk1 ------------------------------------------------------------------------------------------ impor ...

  4. 【Alpha阶段】第六次scrum meeting

    一.会议照片 二.会议内容 姓名 学号 负责模块 昨日任务完成度 今日任务 杨爱清 099 界面设计和交互功能 完成 设计界面 杨立鑫 100 数据库搭建和其他 完成 将数据库与其他模块连接 林 钊 ...

  5. 201521123061 《Java程序设计》第九周学习总结

    201521123061 <Java程序设计>第九周学习总结 1. 本周学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1 ...

  6. 201521123062《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 多态定义:同种形态不同定义 类注释格式 继承,共同行为及属性 在instanceof检查过后 ...

  7. 201521123017 《Java程序设计》第13周学习总结

    1. 本周学习总结 2. 书面作业 Q1.网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 te ...

  8. 201521123045 <java程序设计>第11周学习总结

    201521123045 <java程序设计>第11周学习总结 1. 本周学习总结 2. 书面作业 2. 书面作业 Q1.1.互斥访问与同步访问完成题集4-4(互斥访问)与4-5(同步访问 ...

  9. sed命令基础

    sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern space ...

  10. Java-byte[]与16进制字符串互转

    转自: http://www.cnblogs.com/freeliver54/archive/2012/07/30/2615149.html Java中byte用二进制表示占用8位,而我们知道16进制 ...