<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. 汇编指令-str存储指令(4)

    str -(Store Register)存储指令 格式:str{条件}  源寄存器,<存储器地址>将源寄存器中数据存到存储器地址中. 实例1: str   r1,[r2]        ...

  2. pip install python 如何快速安装模块

    之前python安装模块要在网络上下载,从python2.7.9之后,以及python3,python就自带pip 这个命令,能够快速的安装模块 1,  首先打开python的主文件夹 2.在主文件夹 ...

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

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  4. 解决liblzo2.so缺失

    系统:CentOS5.8 提示错误: error while loading shared libraries: liblzo2.so.2: cannot open shared object fil ...

  5. 【化繁为简】非前端开发者的福音---CSS的预处理语言 Less&Sass

    写在前面:        众所周知CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),在前期的界面样式设计时,需要书写大量看似没有逻辑的代码,不方便维护及扩展,也不利于重复调用,尤其对于 ...

  6. linux各类压缩解压命令大全

    01-.tar格式解包:[*******]$ tar xvf FileName.tar 打包:[*******]$ tar cvf FileName.tar DirName(注:tar是打包,不是压缩 ...

  7. Tomcat【介绍Tomcat、结构目录、虚拟目录、临时域名、虚拟主机、体系结构】

    什么是Tomcat Tomcat简单的说就是一个运行JAVA的网络服务器,底层是Socket的一个程序,它也是JSP和Serlvet的一个容器. 为什么我们需要用到Tomcat 如果你学过html,c ...

  8. JSP页面格式化数字或时间 基于struts的

    jsp日期格式化 转自: http://blog.csdn.net/chj225500/article/details/7251552 在直接<s:textfield中也要日期格式化,平时使用日 ...

  9. 框架应用：Mybatis(二) - 动态SQL

    MybatisUtil工具类 在实际开发中,我们可以编写一个MybatisUtil辅助类来进行对进行操作. 1)在静态初始化块中加载mybatis配置文件和StudentMapper.xml文件一次 ...

  10. 如何定制 Calico 的 IP 池？- 每天5分钟玩转 Docker 容器技术（71）

    在前面的小节中,我们没有特别配置,calico 会为自动为网络分配 subnet,当然我们也可以定制. 首先定义一个 IP Pool,比如: cat << EOF | calicoctl ...