正则表达式
概述
又称为规则表达式
作用
按照某种规则匹配符合条件的字符串
主要模块
1.正则匹配：可以测试字符串的内容是否与正则相匹配。
2.替换文本：根据模式匹配字符串的特定内容进行替换和删除。
创建正则表达式
1.通过字面量定义 eg:var reg = /abc/i;(包含abc的)
注意一般情况下正则表达式不要出现空格，除非匹配空格
2.通过new的方式 eg:var reg = new RegExp(“a”,”i”);
正则方法test()
检索字符串指定的值，返回true或false
<script>
function test1(){
var sname = document.getElementById("sname");
var username = document.getElementsByName("username")[0].value;
// 编写正则表达式
var reg = /abc/;
// 验证规则
var flag = reg.test(username);
if(flag){
sname.innerHTML = "<strong style='color:green'>验证通过</strong>";
} else{
sname.innerHTML = "<strong style='color:red'>验证失败</strong>";
}
}
</script>
</head>
<body>
<input type="text" name="username" value="" /><span id="sname"></span>
<input type="button" value="提交" onclick="test1();"/>
</body>
注意onsubmit只有等于true的时候才提交表单
全选
<script>
// 网页加载事件
window.onload = function(){
// 得到全部复选框
var items = document.getElementsByName("items") ;
// 全选和全不选
document.getElementById("all").onchange = function(){
//var all = document.getElementById("all");
/*for (var i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}*/
items.forEach(function(element){
element.checked = !element.checked;
});
}
// 全选
document.getElementById("checkedAll").onclick = function(){
for (var i = 0; i < items.length; i++) {
items[i].checked = true;
//items[i].setAttribute("checked","checked");
}
}
// 全不选
document.getElementById("checkedNo").onclick = function(){
for (var i = 0; i < items.length; i++) {
items[i].checked = false;
}
}
// 反选
document.getElementById("checkRev").onclick = function(){
for (var i = 0; i < items.length; i++) {
/*if(items[i].checked){
items[i].checked = false;
} else{
items[i].checked = true;
}*/
items[i].checked = !items[i].checked;
}
}
// 提交
document.getElementById("submit").onclick = function(){
// 用来存储选中的信息
var result = "";
for (var i = 0; i < items.length; i++) {
if(items[i].checked){
result += items[i].value + "\n";
}
}
alert(result);
}
}
</script>
</head>
<body>
<form action="/" method="post">
<div class="container">
<label>你爱好的运动是？</label><input type="checkbox" name="name" id="all" />全选/反选
<p>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="排球" />排球
<input type="checkbox" name="items" value="台球" />台球
</p>
<p>
<input type="button" id="checkedAll" value="全选"/>
<input type="button" id="checkedNo" value="全不选" />
<input type="button" id="checkRev" value="反选" />
<input type="button" id="submit" value="提交" />
</p>
</div>
</form>
</body>
Json
简介
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
1.JSON 语法规则
1) 数据在名称/值对中
2) 数据由逗号分隔
3)大括号保存对象
4)中括号保存数组
2.JSON 名称/值对
JSON 数据的书写格式是：名称/值对。
例:"name":"tom" 等价于 name="tom"
3.JSON 值
JSON 值可以是：数字、字符串、逻辑值、数组、对象、null
Json对象
注意对象不能用for循环遍历
<!--
1.对象语法
实例:{ "name":"zhangsan", "age":20, "sex":"男" }
JSON 对象使用在大括号({})中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号(:)分割。
每个 key/value 对使用逗号(,)分割。
2.访问对象值
①可以使用点号（.）来访问对象的值
②也可以使用中括号（[]）来访问对象的值
3.循环对象
可以使用 for-in 来循环对象的属性
4.嵌套 JSON 对象
JSON 对象中可以包含另外一个 JSON 对象
5.json 对象和 json 字符串的区别：
json 对象:var str1 = { "name": "zhangsan", "sex": "man" };
json字符串:var str2 = '{ "name": "wangwu", "sex": "man" }';
-->
<script>
//访问对象值
var obj = {"name":"张三","age":20};
document.write(obj.name + "<br/>");
document.write(obj["age"] + "<br/>");
//循环遍历对象
var car = {"name":"audi","color":"red","speed":300};
// c-->key
// car[c]-->value
for(c in car){
document.write(c + "<br/>");
}
//嵌套JSON对象
var user = {
"name":"eric",
"age":20,
"marry":true,
"account":{
"taobao":"tb1",
"baidu":"bd1",
"jingdong":"jd1"
},
"city":"beijing"
};
document.write(user.account.taobao + "<br/>");
for(u in user){
document.write(user[u] + "<br/>");
}
for(u in user.account){
document.write(user.account[u] + "<br/>");
}
</script>
jason数组
<!--
json数组
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
1.数组作为 JSON 对象
实例：[ "Google", "Tengxun", "Taobao" ]
2.JSON 对象中的数组
{
"name":"zhangsan",
"age":20,
"hobby":[ "swimming", "running", "playgame" ]
}
我们可以使用索引值来访问数组：
x = myObj.hobby[0];
可以使用for循环或者 for-in 来访问数组
-->
<script>
//数组作为json对象
var site = ["baidu","tengxun","alibaba","jingdong"];
document.write(site[0] + "<br/>");
//json对象中的数组
var user = {
"name":"tom",
"age":20,
"hobby":["swim","running","sing"]
};
document.write(user.hobby[0] + "<br/>");
//使用for遍历循环数组
for (var i = 0; i < user.hobby.length; i++) {
document.write(user.hobby[i]+"<br/>");
}
//修改数组值
user.hobby[2] = "playgame";
//删除数组元素
delete user.hobby[0];
//使用for in 遍历循环数组
for (i in user.hobby) {
document.write(user.hobby[i]+"<br/>");
}
</script>
将数据转化为js对象
<!--
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法：JSON.parse(text[, reviver])
参数说明：text:必需， 一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
-->
<script>
//JSON解析实例
var str = '{"name":"zhangsan","age":20}';
var obj = JSON.parse(str);
document.write(obj.name);
</script>
eval
<!--
把 JSON 文本转换为 JavaScript 对象
JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。
必须把文本包围在括号中
例：var obj = eval ("(" + txt + ")");
var txt='{"user":['+
'{"account":"admin","pwd":"admin"},'+
'{"account":"user","pwd":"user"}]}';
-->
<script>
var txt='{"user":['+
'{"account":"admin","pwd":"admin"},'+
'{"account":"user","pwd":"user"}]}';
var obj = eval("("+txt+")");
document.write(obj.user[0].account);
</script>
json实例
<!--
为什么使用 JSON？
对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用
-->
<script>
// 从服务器接受的数据
var json = {
"name":"搜狐",
"url":"http://www.sohu.com"
};
function reload(){
// 实现数据绑定
document.getElementById("name").innerText = json.name;
document.getElementById("url").innerText = json.url;
}
</script>
</head>
<body onload="reload();">
<p>
网站名称: <span id="name"></span><br />
网站地址: <span id="url"></span><br />
</p>