<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. 2017 ACM-ICPC（乌鲁木齐赛区）网络赛 H.Skiing 拓扑排序＋最长路

    H.Skiing In this winter holiday, Bob has a plan for skiing at the mountain resort. This ski resort h ...

  2. 【DDD】领域驱动设计实践 —— 限界上下文识别

    本文从战略层面街上DDD中关于限界上下文的相关知识,并以ECO系统为例子,介绍如何识别上下文.限界上下文(Bounded Context)定义了每个模型的应用范围,在每个Bounded Context ...

  3. python爬虫-抓取acg12动漫壁纸排行设置为桌面壁纸

    ACG-wallpaper 初学python,之前想抓取P站的一些图片来着,然后发现acg12这里有专门的壁纸榜单,就写了个抓取壁纸作为mac桌面壁纸玩玩. 功能:抓取acg12壁纸榜单的动漫壁纸,并 ...

  4. 【Beta】阶段 第二次Daily Scrum Meeting

    每日任务 1.本次会议为第二次 Meeting会议: 2.本次会议在周二上午9:40,课间休息时间在禹州楼召开,召开本次会议为10分钟. 一.今日站立式会议照片 二.每个人的工作 (有work ite ...

  5. Git和Github使用

    什么是Git? Git 是一个快速.可扩展的分布式版本控制系统,它具有极为丰富的命令集,对内部系统提供了高级操作和完全访问. 版本控制 简单地说,就是将在本地开发的代码,定时推送到服务器.每一次修改, ...

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

    201521123061 <Java程序设计>第十三周学习总结 1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jm ...

  7. 201521123032 《Java程序设计》第1周学习总结

    #1. 本周学习总结 下载熟悉eclipse,了解java的入门.用notepad++和eclipse编写Java程序.复习到了十进制转化为二进制,八进制与十六进制. #2. 书面作业 ##2.1为什 ...

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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 1.线程间的互斥访问(线程竞争):一些同时运行的线程需要访问共享数据,互斥访问是保证共享资源完整性的手段.实现方式 ...

  9. 201521123019 《java程序设计》 第14周学习总结

    1. 本章学习总结 2. 书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) ...

  10. 201521123070 《JAVA程序设计》第13周学习总结

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