正則表達式
概述
又稱爲規則表達式
作用
按照某種規則匹配符合條件的字符串
主要模塊
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>