<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. 媒体查询media参数以及其兼容性问题

    一.设置meta标签 在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定. <!--设置缩放和绘制--> <meta name="viewp ...

  2. IT经典书籍——Head First系列【推荐】

    Head First 系列书籍是由 O'Relly 出版社发行的一系列教育书籍,中文一般翻译为"深入浅出",它强调以特殊的方式排版,由大量的图片和有趣的内容组合构成,而达到非疲劳的 ...

  3. Socket通信中AF_INET 和 AF_UNIX域的区别

    转载:http://blog.csdn.net/sandware/article/details/40923491 1.  AF_INET域socket通信过程 典型的TCP/IP四层模型的通信过程. ...

  4. 关于SVM数学细节逻辑的个人理解（一）

    网上,书上有很多的关于SVM的资料,但是我觉得一些细节的地方并没有讲的太清楚,下面是我对SVM的整个数学原理的推导过程,其中我理解的地方力求每一步都是有理有据,希望和大家讨论分享. 首先说明,目前我的 ...

  5. less和scss

    一.less基础语法 1.声明变量:@变量名:变量值:      使用变量:@变量名; 2.混合(Mixins) 1)无参混合 声明: .class{} 调用:在选择器中,使用.class;直接调用 ...

  6. 【Alpha】第二次Daily Scrum Meeting

    GIT 一.今日站立式会议照片 二.会议内容 1.统计,收集整理礼物的资料与详情 2.确定网页的实现方式 三.燃尽图

  7. 201521123061 《Java程序设计》第十一周学习总结

    201521123061 <Java程序设计>第十一周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 本周学习的是如何解决多线程访问中的互斥 ...

  8. 201521123023《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4 ...

  9. Java中 == 和 equals()详解

    java中的数据类型分为两种: 一 .基本数据类型: byte.short.int.long.float.double.char.boolean 比较它们需要用  ==  ,比较的是它们的值是否相等 ...

  10. 201521123104《java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...