文档章节

Javascript/Jquery操作数组,增删改查以及动态创建HTML元素

深圳大道
 深圳大道
发布于 2016/12/29 15:37
字数 556
阅读 7
收藏 0
<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>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/51820497

共有 人打赏支持
深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
2018/07/31
0
0
DOM对象和js对象以及jQuery对象的区别

DOM对象和js对象以及jQuery对象的区别 一、DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修...

奋斗的雲
2018/09/17
0
0
来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang
2018/05/24
0
0
Javascript的DOM操作 - 你真的了解吗?

前言 在前端开发的过程中,javascript极为重要的一个功能就是对DOM对象的操作,无论增删改查在前端页面操作这一范围内都是比较消耗性能的.如何高效率的,便捷的操作DOM,这就是本文要讲述的.希望...

顽Shi
2014/02/12
0
11
【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋

【基础】数组基本操作 数组的常见基本操作分为:赋值,查长度,添加push,删除delete,遍历for-in等。简单数组是一维的,但是实际工作中,数组总是与对象结合使用,叫:数组对象。 类型操作分...

柴高八斗之父
2017/08/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

dockerfile 镜像构建(1)

通用dockerfile 利用已经编译好的.jar 来构建镜像。要构建的目录如下: [root@iZuf61quxhnlk9m2tkx16cZ demo_jar]# docker build -t demo:1 . 运行镜像: [root@iZuf61quxhnlk9m2tkx16cZ de...

Canaan_
30分钟前
1
0
Redis radix tree源码解析

Redis实现了不定长压缩前缀的radix tree,用在集群模式下存储slot对应的的所有key信息。本文将详述在Redis中如何实现radix tree。 核心数据结构 raxNode是radix tree的核心数据结构,其结构体...

阿里云云栖社区
32分钟前
7
0
vue import 传入变量

在做动态添加component的时候,传入变量就会报错,出现以下错误信息: vue-router.esm.js?fe87:1921 Error: Cannot find module '@/components/index'. at eval (eval at ./src/components ......

朝如青丝暮成雪
34分钟前
1
0
Flutter开发 Dio拦截器实现token验证过期的功能

前言: 之前分享过在Android中使用Retrofit实现token失效刷新的处理方案,现在Flutter项目也有“token验证过期”的需求,所以接下来我简单总结一下在Flutter项目中如何实现自动刷新token并重...

EmilyWu
35分钟前
7
0
final Map可以修改内容,final 常量不能修改

1.final Map 可以put元素,但是不可以重新赋值 如: final Map map = new HashMap(); map = new HashMap();//不可以 因为栈中变量map引用地址不能修改 2.final str = “aa”; str = "bb";/......

qimh
39分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部