<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. 关于JS正则——你知道多少?

    正则表达式 1. 使用正则 创建正则表达式有两种方式,一种是以字面量方式创建,另一种是使用RegExp构造函数来创建. var expression = / pattern / flags; var ...

  2. 聊一聊我们都熟知的 “ Java分层 ”

    一.为什么要分层. 以前的我们,写代码的时候,都在main()方法中,出现了错误,就慢慢调试,这样浪费了我们很长的时间,而我们程序员的时间是非常宝贵的 但是当我们使用分层架构的时候,就可以清晰明确的知 ...

  3. 201521123082 《Java程序设计》第9周学习总结

    201521123082 <Java程序设计>第9周学习总结 标签(空格分隔):java 1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 ...

  4. 第1周-java作业总结与建议

    1. 本周作业简评与建议 存在的问题: 这周的作业普遍存在一个格式混乱的问题.请认真学习Markdown,我们后面的作业都要使用Markdown.Markdown学习请参考http://group.c ...

  5. 201521123064 《Java程序设计》第12周学习总结

    本次作业参考文件 正则表达式参考资料 1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. ① 标准输入输出流(字节流):标准输入流 System.in,标准输出流 ...

  6. 201521123098 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1. finally 题目4-2 1.1 截图你的提交结果( ...

  7. 201521123056 《Java程序设计》第14周学习总结

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

  8. 201521123104《JAVA程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出 ...

  9. 201521123101 《Java程序设计》第11周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...

  10. 201521123014 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 异常(Exception)处理 异常(Exception)的概念:在程序运行的时候可能出错,Java中把程序出现的错 ...