正則表達式3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 創建一個正則表達式檢查一個字符串中是否含有aaa
*/
/*
* 量詞
* - 通過量詞可以設置一個內容出現的次數
* - 量詞只對它前邊的一個內容起作用
* - {n} 正好出現n次
* - {m,n} 出現m-n次
* - {m,} m次以上
* - + 至少一個，相當於{1,}
* - * 0個或多個，相當於{0,}
* - ? 0個或1個，相當於{0,1}
*/
var reg = /a{3}/;
//ababab
reg = /(ab){3}/;
reg = /b{3}/;
reg = /ab{1,3}c/;
reg = /ab{3,}c/;
reg = /ab+c/;
reg = /ab*c/;
reg = /ab?c/;
//console.log(reg.test("abbc"));
/*
* 檢查一個字符串中是否以a開頭
* ^ 表示開頭
* $ 表示結尾
*/
reg = /^a/; //匹配開頭的a
reg = /a$/; //匹配結尾的a
//console.log(reg.test("abcabca"));
/*
* 如果在正則表達式中同時使用^ $則要求字符串必須完全符合正則表達式
*/
reg = /^a$/;
//console.log(reg.test("bbca"));
/*
* 創建一個正則表達式，用來檢查一個字符串是否是一個合法手機號
*
* 手機號的規則：
* 1 3 567890123 （11位）
*
* 1. 以1開頭
* 2. 第二位3-9任意數字
* 3. 三位以後任意數字9個
*
* ^1 [3-9] [0-9]{9}$
*
*/
var phoneStr = "13067890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));
</script>
</head>
<body>
</body>
</html>
正則表達式4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 檢查一個字符串中是否含有 .
* . 表示任意字符
* 在正則表達式中使用\作爲轉義字符
* \. 來表示.
* \\ 表示\
*
* 注意：使用構造函數時，由於它的參數是一個字符串，而\是字符串中轉義字符，
* 如果要使用\則需要使用\\來代替
*/
var reg = /\./;
reg = /\\/;
reg = new RegExp("\\.");
reg = new RegExp("\\\\");
/*
* \w
* - 任意字母、數字、_ [A-z0-9_]
* \W
* - 除了字母、數字、_ [^A-z0-9_]
* \d
* - 任意的數字 [0-9]
* \D
* - 除了數字 [^0-9]
* \s
* - 空格
* \S
* - 除了空格
* \b
* - 單詞邊界
* \B
* - 除了單詞邊界
*/
reg = /\w/;
reg = /\W/;
reg = /\d/;
reg = /\D/;
reg = /\s/;
reg = /\S/;
/*
* 創建一個正則表達式檢查一個字符串中是否含有單詞child
*/
reg = /\bchild\b/;
//console.log(reg.test("hello child "));
//接收一個用戶的輸入
//var str = prompt("請輸入你的用戶名:");
var str = " he llo ";
//去除掉字符串中的前後的空格
//去除空格就是使用""來替換空格
console.log(str);
//str = str.replace(/\s/g , "");
//去除開頭的空格
//str = str.replace(/^\s*/, "");
//去除結尾的空格
//str = str.replace(/\s*$/, "");
// /^\s*|\s*$/g 匹配開頭和結尾的空格
str = str.replace(/^\s*|\s*$/g,"");
console.log(str);
</script>
</head>
<body>
</body>
</html>
練習——郵件的正則
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 電子郵件
* hello .nihao @ abc .com.cn
*
* 任意字母數字下劃線 .任意字母數字下劃線 @ 任意字母數字 .任意字母（2-5位） .任意字母（2-5位）
*
* \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
*/
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "[email protected]";
console.log(emailReg.test(email));
</script>
</head>
<body>
</body>
</html>
DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">我是一個按鈕</button>
<script type="text/javascript">
/*
* 瀏覽器已經爲我們提供 文檔節點 對象這個對象是window屬性
* 可以在頁面中直接使用，文檔節點代表的是整個網頁
*/
//console.log(document);
//獲取到button對象
var btn = document.getElementById("btn");
//修改按鈕的文字
btn.innerHTML = "I'm Button";
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
我們可以在事件對應的屬性中設置一些js代碼，
這樣當事件被觸發時，這些代碼將會執行
這種寫法我們稱爲結構和行爲耦合，不方便維護，不推薦使用
-->
<!--<button id="btn" οnmοusemοve="alert('討厭，你點我幹嘛！');">我是一個按鈕</button>-->
<button id="btn">我是一個按鈕</button>
<script type="text/javascript">
/*
* 事件，就是用戶和瀏覽器之間的交互行爲，
* 比如：點擊按鈕，鼠標移動、關閉窗口。。。
*/
//獲取按鈕對象
var btn = document.getElementById("btn");
/*
* 可以爲按鈕的對應事件綁定處理函數的形式來響應事件
* 這樣當事件被觸發時，其對應的函數將會被調用
*/
//綁定一個單擊事件
//像這種爲單擊事件綁定的函數，我們稱爲單擊響應函數
btn.onclick = function(){
alert("你還點~~~");
};
</script>
</body>
</html>
文檔的加載
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 瀏覽器在加載一個頁面時，是按照自上向下的順序加載的，
* 讀取到一行就運行一行,如果將script標籤寫到頁面的上邊，
* 在代碼執行時，頁面還沒有加載，頁面沒有加載DOM對象也沒有加載
* 會導致無法獲取到DOM對象
*/
/*
* onload事件會在整個頁面加載完成之後才觸發
* 爲window綁定一個onload事件
* 該事件對應的響應函數將會在頁面加載完成之後執行，
* 這樣可以確保我們的代碼執行時所有的DOM對象已經加載完畢了
*
*/
window.onload = function(){
//獲取id爲btn的按鈕
var btn = document.getElementById("btn");
//爲按鈕綁定一個單擊響應函數
btn.onclick = function(){
alert("hello");
};
};
</script>
</head>
<body>
<button id="btn">點我一下</button>
<!--<script type="text/javascript">
/*
* 將js代碼編寫到頁面的下部就是爲了，可以在頁面加載完畢以後再執行js代碼
*/
//獲取id爲btn的按鈕
var btn = document.getElementById("btn");
//爲按鈕綁定一個單擊響應函數
btn.onclick = function(){
alert("hello");
};
</script>-->
</body>
</html>
DOM查詢
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
/*
* 定義一個函數，專門用來爲指定元素綁定單擊響應函數
* 參數：
* idStr 要綁定單擊響應函數的對象的id屬性值
* fun 事件的回調函數，當單擊元素時，該函數將會被觸發
*/
function myClick(idStr , fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
//爲id爲btn01的按鈕綁定一個單擊響應函數
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj節點
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通過這個屬性可以獲取到元素內部的html代碼
alert(bj.innerHTML);
};
//爲id爲btn02的按鈕綁定一個單擊響應函數
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li節點
//getElementsByTagName()可以根據標籤名來獲取一組元素節點對象
//這個方法會給我們返回一個類數組對象，所有查詢到的元素都會封裝到對象中
//即使查詢到的元素只有一個，也會封裝到數組中返回
var lis = document.getElementsByTagName("li");
//打印lis
//alert(lis.length);
//變量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//爲id爲btn03的按鈕綁定一個單擊響應函數
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有節點
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用於獲取元素內部的HTML代碼的
* 對於自結束標籤，這個屬性沒有意義
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要讀取元素節點屬性，
* 直接使用 元素.屬性名
* 例子：元素.id 元素.name 元素.value
* 注意：class屬性不能採用這種方式，
* 讀取class屬性時需要使用 元素.className
*/
alert(inputs[i].className);
}
};
//爲id爲btn04的按鈕綁定一個單擊響應函數
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//獲取id爲city的元素
var city = document.getElementById("city");
//查找#city下所有li節點
var lis = city.getElementsByTagName("li");
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//爲id爲btn05的按鈕綁定一個單擊響應函數
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
//獲取id爲city的節點
var city = document.getElementById("city");
//返回#city的所有子節點
/*
* childNodes屬性會獲取包括文本節點在的所有節點
* 根據DOM標籤標籤間空白也會當成文本節點
* 注意：在IE8及以下的瀏覽器中，不會將空白文本當成子節點，
* 所以該屬性在IE8中會返回4個子元素而其他瀏覽器是9個
*/
var cns = city.childNodes;
//alert(cns.length);
/*for(var i=0 ; i<cns.length ; i++){
alert(cns[i]);
}*/
/*
* children屬性可以獲取當前元素的所有子元素
*/
var cns2 = city.children;
alert(cns2.length);
};
//爲id爲btn06的按鈕綁定一個單擊響應函數
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
//獲取id爲phone的元素
var phone = document.getElementById("phone");
//返回#phone的第一個子節點
//phone.childNodes[0];
//firstChild可以獲取到當前元素的第一個子節點（包括空白文本節點）
var fir = phone.firstChild;
//firstElementChild獲取當前元素的第一個子元素
/*
* firstElementChild不支持IE8及以下的瀏覽器，
* 如果需要兼容他們儘量不要使用
*/
//fir = phone.firstElementChild;
alert(fir);
};
//爲id爲btn07的按鈕綁定一個單擊響應函數
myClick("btn07",function(){
//獲取id爲bj的節點
var bj = document.getElementById("bj");
//返回#bj的父節點
var pn = bj.parentNode;
alert(pn.innerHTML);
/*
* innerText
* - 該屬性可以獲取到元素內部的文本內容
* - 它和innerHTML類似，不同的是它會自動將html去除
*/
//alert(pn.innerText);
});
//爲id爲btn08的按鈕綁定一個單擊響應函數
myClick("btn08",function(){
//獲取id爲android的元素
var and = document.getElementById("android");
//返回#android的前一個兄弟節點（也可能獲取到空白的文本）
var ps = and.previousSibling;
//previousElementSibling獲取前一個兄弟元素，IE8及以下不支持
//var pe = and.previousElementSibling;
alert(ps);
});
//讀取#username的value屬性值
myClick("btn09",function(){
//獲取id爲username的元素
var um = document.getElementById("username");
//讀取um的value屬性值
//文本框的value屬性值，就是文本框中填寫的內容
alert(um.value);
});
//設置#username的value屬性值
myClick("btn10",function(){
//獲取id爲username的元素
var um = document.getElementById("username");
um.value = "今天天氣真不錯~~~";
});
//返回#bj的文本值
myClick("btn11",function(){
//獲取id爲bj的元素
var bj = document.getElementById("bj");
//alert(bj.innerHTML);
//alert(bj.innerText);
//獲取bj中的文本節點
//文本節點的值需要用nodeValue獲取，而不是value獲取
/*var fc = bj.firstChild;
alert(fc.nodeValue);*/
alert(bj.firstChild.nodeValue);
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<br>
<br>
<p>
你喜歡哪款單機遊戲?
</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br />
<br />
<p>
你手機的操作系統是?
</p>
<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj節點</button></div>
<div><button id="btn02">查找所有li節點</button></div>
<div><button id="btn03">查找name=gender的所有節點</button></div>
<div><button id="btn04">查找#city下所有li節點</button></div>
<div><button id="btn05">返回#city的所有子節點</button></div>
<div><button id="btn06">返回#phone的第一個子節點</button></div>
<div><button id="btn07">返回#bj的父節點</button></div>
<div><button id="btn08">返回#android的前一個兄弟節點</button></div>
<div><button id="btn09">返回#username的value屬性值</button></div>
<div><button id="btn10">設置#username的value屬性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
DOM查詢的其它辦法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//獲取body標籤
//var body = document.getElementsByTagName("body")[0];
/*
* 在document中有一個屬性body，它保存的是body的引用
*/
var body = document.body;
/*
* document.documentElement保存的是html根標籤
*/
var html = document.documentElement;
//console.log(html);
/*
* document.all代表頁面中所有的元素
*/
var all = document.all;
//console.log(all.length);
/*for(var i=0 ; i<all.length ; i++){
console.log(all[i]);
}*/
//all = document.getElementsByTagName("*");
//console.log(all.length);
/*
* 根據元素的class屬性值查詢一組元素節點對象
* getElementsByClassName()可以根據class屬性值獲取一組元素節點對象，
* 但是該方法不支持IE8及以下的瀏覽器
*/
//var box1 = document.getElementsByClassName("box1");
//console.log(box1.length);
//獲取頁面中的所有的div
//var divs = document.getElementsByTagName("div");
//獲取class爲box1中的所有的div
//.box1 div
/*
* document.querySelector()
* - 需要一個選擇器的字符串作爲參數，可以根據一個CSS選擇器來查詢一個元素節點對象
* - 雖然IE8中沒有getElementsByClassName()但是可以使用querySelector()代替
* - 使用該方法總會返回唯一的一個元素，如果滿足條件的元素有多個，那麼它只會返回第一個
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")
//console.log(div.innerHTML);
//console.log(box1.innerHTML);
/*
* document.querySelectorAll()
* - 該方法和querySelector()用法類似，不同的是它會將符合條件的元素封裝到一個數組中返回
* - 即使符合條件的元素只有一個，它也會返回數組
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.log(box1);
};
</script>
</head>
<body>
<div id="box2"></div>
<div class="box1">
我是第一個box1
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div></div>
</body>
</html>
DOM增刪改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function() {
//創建一個"廣州"節點,添加到#city下
myClick("btn01",function(){
//創建廣州節點 <li>廣州</li>
//創建li元素節點
/*
* document.createElement()
* 可以用於創建一個元素節點對象，
* 它需要一個標籤名作爲參數，將會根據該標籤名創建元素節點對象，
* 並將創建好的對象作爲返回值返回
*/
var li = document.createElement("li");
//創建廣州文本節點
/*
* document.createTextNode()
* 可以用來創建一個文本節點對象
* 需要一個文本內容作爲參數，將會根據該內容創建文本節點，並將新的節點返回
*/
var gzText = document.createTextNode("廣州");
//將gzText設置li的子節點
/*
* appendChild()
* - 向一個父節點中添加一個新的子節點
* - 用法：父節點.appendChild(子節點);
*/
li.appendChild(gzText);
//獲取id爲city的節點
var city = document.getElementById("city");
//將廣州添加到city下
city.appendChild(li);
});
//將"廣州"節點插入到#bj前面
myClick("btn02",function(){
//創建一個廣州
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.appendChild(gzText);
//獲取id爲bj的節點
var bj = document.getElementById("bj");
//獲取city
var city = document.getElementById("city");
/*
* insertBefore()
* - 可以在指定的子節點前插入新的子節點
* - 語法：
* 父節點.insertBefore(新節點,舊節點);
*/
city.insertBefore(li , bj);
});
//使用"廣州"節點替換#bj節點
myClick("btn03",function(){
//創建一個廣州
var li = document.createElement("li");
var gzText = document.createTextNode("廣州");
li.appendChild(gzText);
//獲取id爲bj的節點
var bj = document.getElementById("bj");
//獲取city
var city = document.getElementById("city");
/*
* replaceChild()
* - 可以使用指定的子節點替換已有的子節點
* - 語法：父節點.replaceChild(新節點,舊節點);
*/
city.replaceChild(li , bj);
});
//刪除#bj節點
myClick("btn04",function(){
//獲取id爲bj的節點
var bj = document.getElementById("bj");
//獲取city
var city = document.getElementById("city");
/*
* removeChild()
* - 可以刪除一個子節點
* - 語法：父節點.removeChild(子節點);
*
* 子節點.parentNode.removeChild(子節點);
*/
//city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
//讀取#city內的HTML代碼
myClick("btn05",function(){
//獲取city
var city = document.getElementById("city");
alert(city.innerHTML);
});
//設置#bj內的HTML代碼
myClick("btn06" , function(){
//獲取bj
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
myClick("btn07",function(){
//向city中添加廣州
var city = document.getElementById("city");
/*
* 使用innerHTML也可以完成DOM的增刪改的相關操作
* 一般我們會兩種方式結合使用
*/
//city.innerHTML += "<li>廣州</li>";
//創建一個li
var li = document.createElement("li");
//向li中設置文本
li.innerHTML = "廣州";
//將li添加到city中
city.appendChild(li);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">創建一個"廣州"節點,添加到#city下</button></div>
<div><button id="btn02">將"廣州"節點插入到#bj前面</button></div>
<div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
<div><button id="btn04">刪除#bj節點</button></div>
<div><button id="btn05">讀取#city內的HTML代碼</button></div>
<div><button id="btn06">設置#bj內的HTML代碼</button></div>
<div><button id="btn07">創建一個"廣州"節點,添加到#city下</button></div>
</div>
</body>
</html>
練習
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加刪除記錄練習</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
window.onload = function(){
/*
* 點擊超鏈接以後，刪除一個員工的信息
*/
//獲取所有額超鏈接
var allA = document.getElementsByTagName("a");
//爲每個超鏈接都綁定一個單擊響應函數
for(var i=0 ; i < allA.length ; i++){
allA[i].onclick = function(){
//點擊超鏈接以後需要刪除超鏈接所在的那行
//這裏我們點擊那個超鏈接this就是誰
//獲取當前tr
var tr = this.parentNode.parentNode;
//獲取要刪除的員工的名字
//var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
//刪除之前彈出一個提示框
/*
* confirm()用於彈出一個帶有確認和取消按鈕的提示框
* 需要一個字符串作爲參數，該字符串將會作爲提示文字顯示出來
* 如果用戶點擊確認則會返回true，如果點擊取消則返回false
*/
var flag = confirm("確認刪除"+name+"嗎?");
//如果用戶點擊確認
if(flag){
//刪除tr
tr.parentNode.removeChild(tr);
}
/*
* 點擊超鏈接以後，超鏈接會跳轉頁面，這個是超鏈接的默認行爲，
* 但是此時我們不希望出現默認行爲，可以通過在響應函數的最後return false來取消默認行爲
*/
return false;
};
}
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新員工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
使用DOM操作CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 點擊按鈕以後，修改box1的大小
*/
//獲取box1
var box1 = document.getElementById("box1");
//爲按鈕綁定單擊響應函數
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//修改box1的寬度
/*
* 通過JS修改元素的樣式：
* 語法：元素.style.樣式名 = 樣式值
*
* 注意：如果CSS的樣式名中含有-，
* 這種名稱在JS中是不合法的比如background-color
* 需要將這種樣式名修改爲駝峯命名法，
* 去掉-，然後將-後的字母大寫
*
* 我們通過style屬性設置的樣式都是內聯樣式，
* 而內聯樣式有較高的優先級，所以通過JS修改的樣式往往會立即顯示
*
* 但是如果在樣式中寫了!important，則此時樣式會有最高的優先級，
* 即使通過JS也不能覆蓋該樣式，此時將會導致JS修改樣式失效
* 所以儘量不要爲樣式添加!important
*
*
*
*/
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "yellow";
};
//點擊按鈕2以後，讀取元素的樣式
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//讀取box1的樣式
/*
* 語法：元素.style.樣式名
*
* 通過style屬性設置和讀取的都是內聯樣式
* 無法讀取樣式表中的樣式
*/
//alert(box1.style.height);
alert(box1.style.width); //300px
};
};
</script>
</head>
<body>
<button id="btn01">點我一下</button>
<button id="btn02">點我一下2</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
讀取元素的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//點擊按鈕以後讀取box1的樣式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//讀取box1的寬度
//alert(box1.style.width);
/*
* 獲取元素的當前顯示的樣式
* 語法：元素.currentStyle.樣式名
* 它可以用來讀取當前元素正在顯示的樣式
* 如果當前元素沒有設置該樣式，則獲取它的默認值
*
* currentStyle只有IE瀏覽器支持，其他的瀏覽器都不支持
*/
//alert(box1.currentStyle.width);
//box1.currentStyle.width = "200px"; //不能用來設置元素樣式
//alert(box1.currentStyle.backgroundColor);
/*
* 在其他瀏覽器中可以使用
* getComputedStyle()這個方法來獲取元素當前的樣式
* 這個方法是window的方法，可以直接使用
* 需要兩個參數
* 第一個：要獲取樣式的元素
* 第二個：可以傳遞一個僞元素，一般都傳null
*
* 該方法會返回一個對象，對象中封裝了當前元素對應的樣式
* 可以通過對象.樣式名來讀取樣式
* 如果獲取的樣式沒有設置，則會獲取到真實的值，而不是默認值
* 比如：沒有設置width，它不會獲取到auto，而是一個長度
*
* 但是該方法不支持IE8及以下的瀏覽器
*
* 通過currentStyle和getComputedStyle()讀取到的樣式都是隻讀的，
* 不能修改，如果要修改必須通過style屬性
*/
//var obj = getComputedStyle(box1,null);
/*alert(getComputedStyle(box1,null).width);*/
//正常瀏覽器的方式
//alert(getComputedStyle(box1,null).backgroundColor);
//IE8的方式
//alert(box1.currentStyle.backgroundColor);
//alert(getStyle(box1,"width"));
var w = getStyle(box1,"width");
alert(w);
};
};
/*
* 定義一個函數，用來獲取指定元素的當前的樣式
* 參數：
* obj 要獲取樣式的元素
* name 要獲取的樣式名
*/
function getStyle(obj , name){
if(window.getComputedStyle){
//正常瀏覽器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，沒有getComputedStyle()方法
return obj.currentStyle[name];
}
//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}
</script>
</head>
<body>
<button id="btn01">點我一下</button>
<br /><br />
<div id="box1" ></div>
</body>
</html>
其他樣式操作的屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
#box2{
padding: 100px;
background-color: #bfa;
}
#box4{
width: 200px;
height: 300px;
background-color: #bfa;
overflow: auto;
}
#box5{
width: 450px;
height: 600px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var box4 = document.getElementById("box4");
btn01.onclick = function(){
/*
* clientWidth
* clientHeight
* - 這兩個屬性可以獲取元素的可見寬度和高度
* - 這些屬性都是不帶px的，返回都是一個數字，可以直接進行計算
* - 會獲取元素寬度和高度，包括內容區和內邊距
* - 這些屬性都是隻讀的，不能修改
*/
//alert(box1.clientWidth);
//alert(box1.clientHeight);
//box1.clientHeight = 300;
/*
* offsetWidth
* offsetHeight
* - 獲取元素的整個的寬度和高度，包括內容區、內邊距和邊框
*/
//alert(box1.offsetWidth);
/*
* offsetParent
* - 可以用來獲取當前元素的定位父元素
* - 會獲取到離當前元素最近的開啓了定位的祖先元素
* 如果所有的祖先元素都沒有開啓定位，則返回body
*/
var op = box1.offsetParent;
//alert(op.id);
/*
* offsetLeft
* - 當前元素相對於其定位父元素的水平偏移量
* offsetTop
* - 當前元素相對於其定位父元素的垂直偏移量
*/
//alert(box1.offsetLeft);
/*
* scrollWidth
* scrollHeight
* - 可以獲取元素整個滾動區域的寬度和高度
*/
//alert(box4.clientHeight);
//alert(box4.scrollWidth);
/*
* scrollLeft
* - 可以獲取水平滾動條滾動的距離
* scrollTop
* - 可以獲取垂直滾動條滾動的距離
*/
//alert(box4.scrollLeft);
//alert(box4.scrollTop);
//alert(box4.clientHeight); // 283
//當滿足scrollHeight - scrollTop == clientHeight
//說明垂直滾動條滾動到底了
//當滿足scrollWidth - scrollLeft == clientWidth
//說明水平滾動條滾動到底
//alert(box4.scrollHeight - box4.scrollTop); // 600
};
};
</script>
</head>
<body id="body">
<button id="btn01">點我一下</button>
<br /><br />
<div id="box4">
<div id="box5"></div>
</div>
<br /><br />
<div id="box3">
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</div>
</body>
</html>
練習——閱讀協議纔可註冊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#info{
width: 300px;
height: 500px;
background-color: #bfa;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 當垂直滾動條滾動到底時使表單項可用
* onscroll
* - 該事件會在元素的滾動條滾動時觸發
*/
//獲取id爲info的p元素
var info = document.getElementById("info");
//獲取兩個表單項
var inputs = document.getElementsByTagName("input");
console.log(inputs)
//爲info綁定一個滾動條滾動的事件
info.onscroll = function(){
console.log( Math.round(info.scrollHeight - info.scrollTop))
console.log(info.clientHeight)
//檢查垂直滾動條是否滾動到底
if(Math.round(info.scrollHeight - info.scrollTop) == info.clientHeight){
//滾動條滾動到底，使表單項可用
/*
* disabled屬性可以設置一個元素是否禁用，
* 如果設置爲true，則元素禁用
* 如果設置爲false，則元素可用
*/
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
};
</script>
</head>
<body>
<h3>歡迎親愛的用戶註冊</h3>
<p id="info">
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
親愛的用戶，請仔細閱讀以下協議，如果你不仔細閱讀你就別註冊
</p>
<!-- 如果爲表單項添加disabled="disabled" 則表單項將變成不可用的狀態 -->
<input type="checkbox" disabled="disabled" />我已仔細閱讀協議，一定遵守
<input type="submit" value="註冊" disabled="disabled" />
</body>
</html>
事件對象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 當鼠標在areaDiv中移動時，在showMsg中來顯示鼠標的座標
*/
//獲取兩個div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
* onmousemove
* - 該事件將會在鼠標在元素中移動時被觸發
*
* 事件對象
* - 當事件的響應函數被觸發時，瀏覽器每次都會將一個事件對象作爲實參傳遞進響應函數,
* 在事件對象中封裝了當前事件相關的一切信息，比如：鼠標的座標 鍵盤哪個按鍵被按下 鼠標滾輪滾動的方向。。。
*/
areaDiv.onmousemove = function(event){
/*
* 在IE8中，響應函數被觸發時，瀏覽器不會傳遞事件對象，
* 在IE8及以下的瀏覽器中，是將事件對象作爲window對象的屬性保存的
*/
/*if(!event){
event = window.event;
}*/
//解決事件對象的兼容性問題
event = event || window.event;
/*
* clientX可以獲取鼠標指針的水平座標
* cilentY可以獲取鼠標指針的垂直座標
*/
var x = event.clientX;
var y = event.clientY;
//alert("x = "+x + " , y = "+y);
//在showMsg中顯示鼠標的座標
showMsg.innerHTML = "x = "+x + " , y = "+y;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
練習——chrome認爲瀏覽器的滾動條是body的
火狐等瀏覽器認爲瀏覽器的滾動條是html的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 開啓box1的絕對定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 使div可以跟隨鼠標移動
*/
//獲取box1
var box1 = document.getElementById("box1");
//綁定鼠標移動事件
document.onmousemove = function(event){
//解決兼容問題
event = event || window.event;
//獲取滾動條滾動的距離
/*
* chrome認爲瀏覽器的滾動條是body的，可以通過body.scrollTop來獲取
* 火狐等瀏覽器認爲瀏覽器的滾動條是html的，
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//獲取到鼠標的座標
/*
* clientX和clientY
* 用於獲取鼠標在當前的可見窗口的座標
* div的偏移量，是相對於整個頁面的
*
* pageX和pageY可以獲取鼠標相對於當前頁面的座標
* 但是這個兩個屬性在IE8中不支持，所以如果需要兼容IE8，則不要使用
*/
var left = event.clientX;
var top = event.clientY;
//設置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
};
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box1"></div>
</body>
</html>
冒泡1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1{
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 事件的冒泡（Bubble）
* - 所謂的冒泡指的就是事件的向上傳導，當後代元素上的事件被觸發時，其祖先元素的相同事件也會被觸發
* - 在開發中大部分情況冒泡都是有用的,如果不希望發生事件冒泡可以通過事件對象來取消冒泡
*
*/
//爲s1綁定一個單擊響應函數
var s1 = document.getElementById("s1");
s1.onclick = function(event){
event = event || window.event;
alert("我是span的單擊響應函數");
//取消冒泡
//可以將事件對象的cancelBubble設置爲true，即可取消冒泡
event.cancelBubble = true;
};
//爲box1綁定一個單擊響應函數
var box1 = document.getElementById("box1");
box1.onclick = function(event){
event = event || window.event;
alert("我是div的單擊響應函數");
event.cancelBubble = true;
};
//爲body綁定一個單擊響應函數
document.body.onclick = function(){
alert("我是body的單擊響應函數");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
冒泡2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/*
* 開啓box1的絕對定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 使div可以跟隨鼠標移動
*/
//獲取box1
var box1 = document.getElementById("box1");
//綁定鼠標移動事件
document.onmousemove = function(event){
//解決兼容問題
event = event || window.event;
//獲取滾動條滾動的距離
/*
* chrome認爲瀏覽器的滾動條是body的，可以通過body.scrollTop來獲取
* 火狐等瀏覽器認爲瀏覽器的滾動條是html的，
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//var st = document.documentElement.scrollTop;
//獲取到鼠標的座標
/*
* clientX和clientY
* 用於獲取鼠標在當前的可見窗口的座標
* div的偏移量，是相對於整個頁面的
*
* pageX和pageY可以獲取鼠標相對於當前頁面的座標
* 但是這個兩個屬性在IE8中不支持，所以如果需要兼容IE8，則不要使用
*/
var left = event.clientX;
var top = event.clientY;
//設置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
var box2 = document.getElementById("box2");
box2.onmousemove = function(event){
event = event || window.event;
event.cancelBubble = true;
};
};
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
<div id="box1"></div>
</body>
</html>
事件的委派
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function(){
var u1 = document.getElementById("u1");
//點擊按鈕以後添加超鏈接
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//創建一個li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建的超鏈接</a>";
//將li添加到ul中
u1.appendChild(li);
};
/*
* 爲每一個超鏈接都綁定一個單擊響應函數
* 這裏我們爲每一個超鏈接都綁定了一個單擊響應函數，這種操作比較麻煩，
* 而且這些操作只能爲已有的超鏈接設置事件，而新添加的超鏈接必須重新綁定
*/
//獲取所有的a
var allA = document.getElementsByTagName("a");
//遍歷
/*for(var i=0 ; i<allA.length ; i++){
allA[i].onclick = function(){
alert("我是a的單擊響應函數！！！");
};
}*/
/*
* 我們希望，只綁定一次事件，即可應用到多個的元素上，即使元素是後添加的
* 我們可以嘗試將其綁定給元素的共同的祖先元素
*
* 事件的委派
* - 指將事件統一綁定給元素的共同的祖先元素，這樣當後代元素上的事件觸發時，會一直冒泡到祖先元素
* 從而通過祖先元素的響應函數來處理事件。
* - 事件委派是利用了冒泡，通過委派可以減少事件綁定的次數，提高程序的性能
*/
//爲ul綁定一個單擊響應函數
u1.onclick = function(event){
event = event || window.event;
/*
* target
* - event中的target表示的觸發事件的對象
*/
//alert(event.target);
//如果觸發事件的對象是我們期望的元素，則執行否則不執行
if(event.target.className == "link"){
alert("我是ul的單擊響應函數");
}
};
};
</script>
</head>
<body>
<button id="btn01">添加超鏈接</button>
<ul id="u1" style="background-color: #bfa;">
<li>
<p>我是p元素</p>
</li>
<li><a href="javascript:;" class="link">超鏈接一</a></li>
<li><a href="javascript:;" class="link">超鏈接二</a></li>
<li><a href="javascript:;" class="link">超鏈接三</a></li>
</ul>
</body>
</html>
事件的綁定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
/*
* 點擊按鈕以後彈出一個內容
*/
//獲取按鈕對象
var btn01 = document.getElementById("btn01");
/*
* 使用 對象.事件 = 函數 的形式綁定響應函數，
* 它只能同時爲一個元素的一個事件綁定一個響應函數，
* 不能綁定多個，如果綁定了多個，則後邊會覆蓋掉前邊的
*/
//爲btn01綁定一個單擊響應函數
/*btn01.onclick = function(){
alert(1);
};*/
//爲btn01綁定第二個響應函數
/*btn01.onclick = function(){
alert(2);
};*/
/*
* addEventListener()
* - 通過這個方法也可以爲元素綁定響應函數
* - 參數：
* 1.事件的字符串，不要on
* 2.回調函數，當事件觸發時該函數會被調用
* 3.是否在捕獲階段觸發事件，需要一個布爾值，一般都傳false
*
* 使用addEventListener()可以同時爲一個元素的相同事件同時綁定多個響應函數，
* 這樣當事件被觸發時，響應函數將會按照函數的綁定順序執行
*
* 這個方法不支持IE8及以下的瀏覽器
*/
/*btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false);
btn01.addEventListener("click",function(){
alert(3);
},false);*/
/*
* attachEvent()
* - 在IE8中可以使用attachEvent()來綁定事件
* - 參數：
* 1.事件的字符串，要on
* 2.回調函數
*
* - 這個方法也可以同時爲一個事件綁定多個處理函數，
* 不同的是它是後綁定先執行，執行順序和addEventListener()相反
*/
/*btn01.attachEvent("onclick",function(){
alert(1);
});
btn01.attachEvent("onclick",function(){
alert(2);
});
btn01.attachEvent("onclick",function(){
alert(3);
});*/
/*btn01.addEventListener("click",function(){
alert(this); //btn01
},false);*/
/*btn01.attachEvent("onclick",function(){
alert(this); //window
});*/
bind(btn01 , "click" , function(){
alert(this);
});
};
//定義一個函數，用來爲指定元素綁定響應函數
/*
* addEventListener()中的this，是綁定事件的對象
* attachEvent()中的this，是window
* 需要統一兩個方法this
*/
/*
* 參數：
* obj 要綁定事件的對象
* eventStr 事件的字符串(不要on)
* callback 回調函數
*/
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分瀏覽器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
/*
* this是誰由調用方式決定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函數中調用回調函數
callback.call(obj);
});
}
}
</script>
</head>
<body>
<button id="btn01">點我一下</button>
</body>
</html>
事件的傳播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#box2{
width: 200px;
height: 200px;
background-color: yellow;
}
#box3{
width: 150px;
height: 150px;
background-color: skyblue;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 分別爲三個div綁定單擊響應函數
*/
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
/*
* 事件的傳播
* - 關於事件的傳播網景公司和微軟公司有不同的理解
* - 微軟公司認爲事件應該是由內向外傳播，也就是當事件觸發時，應該先觸發當前元素上的事件，
* 然後再向當前元素的祖先元素上傳播，也就說事件應該在冒泡階段執行。
* - 網景公司認爲事件應該是由外向內傳播的，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件，
* 然後在向內傳播給後代元素
* - W3C綜合了兩個公司的方案，將事件傳播分成了三個階段
* 1.捕獲階段
* - 在捕獲階段時從最外層的祖先元素，向目標元素進行事件的捕獲，但是默認此時不會觸發事件
* 2.目標階段
* - 事件捕獲到目標元素，捕獲結束開始在目標元素上觸發事件
* 3.冒泡階段
* - 事件從目標元素向他的祖先元素傳遞，依次觸發祖先元素上的事件
*
* - 如果希望在捕獲階段就觸發事件，可以將addEventListener()的第三個參數設置爲true
* 一般情況下我們不會希望在捕獲階段觸發事件，所以這個參數一般都是false
*
* - IE8及以下的瀏覽器中沒有捕獲階段
*/
bind(box1,"click",function(){
alert("我是box1的響應函數")
});
bind(box2,"click",function(){
alert("我是box2的響應函數")
});
bind(box3,"click",function(){
alert("我是box3的響應函數")
});
};
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分瀏覽器兼容的方式
obj.addEventListener(eventStr , callback , true);
}else{
/*
* this是誰由調用方式決定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函數中調用回調函數
callback.call(obj);
});
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
拖拽1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 拖拽box1元素
* - 拖拽的流程
* 1.當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown
* 2.當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove
* 3.當鼠標鬆開時，被拖拽元素固定在當前位置 onmouseup
*/
//獲取box1
var box1 = document.getElementById("box1");
//爲box1綁定一個鼠標按下事件
//當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown
box1.onmousedown = function(event){
event = event || window.event;
//div的偏移量 鼠標.clentX - 元素.offsetLeft
//div的偏移量 鼠標.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//爲document綁定一個onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove
//獲取鼠標的座標
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};
//爲document綁定一個鼠標鬆開事件
document.onmouseup = function(){
//當鼠標鬆開時，被拖拽元素固定在當前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
拖拽2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 拖拽box1元素
* - 拖拽的流程
* 1.當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown
* 2.當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove
* 3.當鼠標鬆開時，被拖拽元素固定在當前位置 onmouseup
*/
//獲取box1
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
//爲box1綁定一個鼠標按下事件
//當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown
box1.onmousedown = function(event){
//設置box1捕獲所有鼠標按下的事件
/*
* setCapture()
* - 只有IE支持，但是在火狐中調用時不會報錯，
* 而如果使用chrome調用，會報錯
*/
/*if(box1.setCapture){
box1.setCapture();
}*/
box1.setCapture && box1.setCapture();
event = event || window.event;
//div的偏移量 鼠標.clentX - 元素.offsetLeft
//div的偏移量 鼠標.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//爲document綁定一個onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove
//獲取鼠標的座標
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};
//爲document綁定一個鼠標鬆開事件
document.onmouseup = function(){
//當鼠標鬆開時，被拖拽元素固定在當前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//當鼠標鬆開時，取消對事件的捕獲
box1.releaseCapture && box1.releaseCapture();
};
/*
* 當我們拖拽一個網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容，
* 此時會導致拖拽功能的異常，這個是瀏覽器提供的默認行爲，
* 如果不希望發生這個行爲，則可以通過return false來取消默認行爲
*
* 但是這招對IE8不起作用
*/
return false;
};
};
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
測試IE8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//分別爲兩個按鈕綁定單擊響應函數
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
btn01.onclick = function(){
alert(1);
};
btn02.onclick = function(){
alert(2);
};
//設置btn01對鼠標按下相關的事件進行捕獲
//當調用一個元素的setCapture()方法以後，這個元素將會把下一次所有的鼠標按下相關的事件捕獲到自身上
btn01.setCapture();
};
</script>
</head>
<body>
<button id="btn01">按鈕01</button>
<button id="btn02">按鈕02</button>
</body>
</html>
拖拽封裝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 拖拽box1元素
* - 拖拽的流程
* 1.當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown
* 2.當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove
* 3.當鼠標鬆開時，被拖拽元素固定在當前位置 onmouseup
*/
//獲取box1
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var img1 = document.getElementById("img1");
//開啓box1的拖拽
drag(box1);
//開啓box2的
drag(box2);
drag(img1);
};
/*
* 提取一個專門用來設置拖拽的函數
* 參數：開啓拖拽的元素
*/
function drag(obj){
//當鼠標在被拖拽元素上按下時，開始拖拽 onmousedown
obj.onmousedown = function(event){
//設置box1捕獲所有鼠標按下的事件
/*
* setCapture()
* - 只有IE支持，但是在火狐中調用時不會報錯，
* 而如果使用chrome調用，會報錯
*/
/*if(box1.setCapture){
box1.setCapture();
}*/
obj.setCapture && obj.setCapture();
event = event || window.event;
//div的偏移量 鼠標.clentX - 元素.offsetLeft
//div的偏移量 鼠標.clentY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
//爲document綁定一個onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//當鼠標移動時被拖拽元素跟隨鼠標移動 onmousemove
//獲取鼠標的座標
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
obj.style.left = left+"px";
obj.style.top = top+"px";
};
//爲document綁定一個鼠標鬆開事件
document.onmouseup = function(){
//當鼠標鬆開時，被拖拽元素固定在當前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//當鼠標鬆開時，取消對事件的捕獲
obj.releaseCapture && obj.releaseCapture();
};
/*
* 當我們拖拽一個網頁中的內容時，瀏覽器會默認去搜索引擎中搜索內容，
* 此時會導致拖拽功能的異常，這個是瀏覽器提供的默認行爲，
* 如果不希望發生這個行爲，則可以通過return false來取消默認行爲
*
* 但是這招對IE8不起作用
*/
return false;
};
}
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
<img src="img/an.jpg" id="img1" style="position: absolute;"/>
</body>
</html>
滾輪事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
//獲取id爲box1的div
var box1 = document.getElementById("box1");
//爲box1綁定一個鼠標滾輪滾動的事件
/*
* onmousewheel鼠標滾輪滾動的事件，會在滾輪滾動時觸發，
* 但是火狐不支持該屬性
*
* 在火狐中需要使用 DOMMouseScroll 來綁定滾動事件
* 注意該事件需要通過addEventListener()函數來綁定
*/
box1.onmousewheel = function(event){
event = event || window.event;
//event.wheelDelta 可以獲取鼠標滾輪滾動的方向
//向上滾 120 向下滾 -120
//wheelDelta這個值我們不看大小，只看正負
//alert(event.wheelDelta);
//wheelDelta這個屬性火狐中不支持
//在火狐中使用event.detail來獲取滾動的方向
//向上滾 -3 向下滾 3
//alert(event.detail);
/*
* 當鼠標滾輪向下滾動時，box1變長
* 當滾輪向上滾動時，box1變短
*/
//判斷鼠標滾輪滾動的方向
if(event.wheelDelta > 0 || event.detail < 0){
//向上滾，box1變短
box1.style.height = box1.clientHeight - 10 + "px";
}else{
//向下滾，box1變長
box1.style.height = box1.clientHeight + 10 + "px";
}
/*
* 使用addEventListener()方法綁定響應函數，取消默認行爲時不能使用return false
* 需要使用event來取消默認行爲event.preventDefault();
* 但是IE8不支持event.preventDefault();這個玩意，如果直接調用會報錯
*/
event.preventDefault && event.preventDefault();
/*
* 當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之滾動，
* 這是瀏覽器的默認行爲，如果不希望發生，則可以取消默認行爲
*/
return false;
};
//爲火狐綁定滾輪事件
bind(box1,"DOMMouseScroll",box1.onmousewheel);
};
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分瀏覽器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
/*
* this是誰由調用方式決定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函數中調用回調函數
callback.call(obj);
});
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>
鍵盤事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
/*
* 鍵盤事件：
* onkeydown
* - 按鍵被按下
* - 對於onkeydown來說如果一直按着某個按鍵不鬆手，則事件會一直觸發
* - 當onkeydown連續觸發時，第一次和第二次之間會間隔稍微長一點，其他的會非常的快
* 這種設計是爲了防止誤操作的發生。
* onkeyup
* - 按鍵被鬆開
*
* 鍵盤事件一般都會綁定給一些可以獲取到焦點的對象或者是document
*/
document.onkeydown = function(event){
event = event || window.event;
/*
* 可以通過keyCode來獲取按鍵的編碼
* 通過它可以判斷哪個按鍵被按下
* 除了keyCode，事件對象中還提供了幾個屬性
* altKey
* ctrlKey
* shiftKey
* - 這個三個用來判斷alt ctrl 和 shift是否被按下
* 如果按下則返回true，否則返回false
*/
console.log(event.keyCode);
//判斷一個y是否被按下
//判斷y和ctrl是否同時被按下
if(event.keyCode === 89 && event.ctrlKey){
console.log("ctrl和y都被按下了");
}
};
/*document.onkeyup = function(){
console.log("按鍵鬆開了");
};*/
//獲取input
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function(event){
event = event || window.event;
//console.log(event.keyCode);
//數字 48 - 57
//使文本框中不能輸入數字
if(event.keyCode >= 48 && event.keyCode <= 57){
//在文本框中輸入內容，屬於onkeydown的默認行爲
//如果在onkeydown中取消了默認行爲，則輸入的內容，不會出現在文本框中
return false;
}
};
};
</script>
</head>
<body>
<input type="text" />
</body>
</html>
練習——使div可以根據不同的方向鍵向不同的方向移動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
//使div可以根據不同的方向鍵向不同的方向移動
/*
* 按左鍵，div向左移
* 按右鍵，div向右移
* 。。。
*/
window.onload = function(){
//爲document綁定一個按鍵按下的事件
document.onkeydown = function(event){
event = event || window.event;
//定義一個變量，來表示移動的速度
var speed = 10;
//當用戶按了ctrl以後，速度加快
if(event.ctrlKey){
speed = 500;
}
/*
* 37 左
* 38 上
* 39 右
* 40 下
*/
switch(event.keyCode){
case 37:
//alert("向左"); left值減小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
BOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
* BOM
* - 瀏覽器對象模型
* - BOM可以使我們通過JS來操作瀏覽器
* - 在BOM中爲我們提供了一組對象，用來完成對瀏覽器的操作
* - BOM對象
* Window
* - 代表的是整個瀏覽器的窗口，同時window也是網頁中的全局對象
* Navigator
* - 代表的當前瀏覽器的信息，通過該對象可以來識別不同的瀏覽器
* Location
* - 代表當前瀏覽器的地址欄信息，通過Location可以獲取地址欄信息，或者操作瀏覽器跳轉頁面
* History
* - 代表瀏覽器的歷史記錄，可以通過該對象來操作瀏覽器的歷史記錄
* 由於隱私原因，該對象不能獲取到具體的歷史記錄，只能操作瀏覽器向前或向後翻頁
* 而且該操作只在當次訪問時有效
* Screen
* - 代表用戶的屏幕的信息，通過該對象可以獲取到用戶的顯示器的相關的信息
*
*
* 這些BOM對象在瀏覽器中都是作爲window對象的屬性保存的，
* 可以通過window對象來使用，也可以直接使用
*
*
*/
//console.log(navigator);
//console.log(location);
//console.log(history);
/*
* Navigator
* - 代表的當前瀏覽器的信息，通過該對象可以來識別不同的瀏覽器
* - 由於歷史原因，Navigator對象中的大部分屬性都已經不能幫助我們識別瀏覽器了
* - 一般我們只會使用userAgent來判斷瀏覽器的信息，
* userAgent是一個字符串，這個字符串中包含有用來描述瀏覽器信息的內容，
* 不同的瀏覽器會有不同的userAgent
*
* 火狐的userAgent
* Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
*
* Chrome的userAgent
* Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
*
* IE8
* Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
*
* IE9
* Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
*
* IE10
* Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
*
* IE11
* Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
* - 在IE11中已經將微軟和IE相關的標識都已經去除了，所以我們基本已經不能通過UserAgent來識別一個瀏覽器是否是IE了
*/
//alert(navigator.appName);
var ua = navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
alert("你是火狐！！！");
}else if(/chrome/i.test(ua)){
alert("你是Chrome");
}else if(/msie/i.test(ua)){
alert("你是IE瀏覽器~~~");
}else if("ActiveXObject" in window){
alert("你是IE11，槍斃了你~~~");
}
/*
* 如果通過UserAgent不能判斷，還可以通過一些瀏覽器中特有的對象，來判斷瀏覽器的信息
* 比如：ActiveXObject
*/
/*if("ActiveXObject" in window){
alert("你是IE，我已經抓住你了~~~");
}else{
alert("你不是IE~~~");
}*/
/*alert("ActiveXObject" in window);*/
</script>
</head>
<body>
</body>
</html>
History
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* History
* - 對象可以用來操作瀏覽器向前或向後翻頁
*/
window.onload = function(){
//獲取按鈕對象
var btn = document.getElementById("btn");
btn.onclick = function(){
/*
* length
* - 屬性，可以獲取到當前訪問的鏈接數量
*/
//alert(history.length);
/*
* back()
* - 可以用來回退到上一個頁面，作用和瀏覽器的回退按鈕一樣
*/
//history.back();
/*
* forward()
* - 可以跳轉下一個頁面，作用和瀏覽器的前進按鈕一樣
*/
//history.forward();
/*
* go()
* - 可以用來跳轉到指定的頁面
* - 它需要一個整數作爲參數
* 1:表示向前跳轉一個頁面 相當於forward()
* 2:表示向前跳轉兩個頁面
* -1:表示向後跳轉一個頁面
* -2:表示向後跳轉兩個頁面
*/
history.go(-2);
};
};
</script>
</head>
<body>
<button id="btn">點我一下</button>
<h1>History</h1>
<a href="01.BOM.html">去BOM</a>
</body>
</html>
Location
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Location
* - 該對象中封裝了瀏覽器的地址欄的信息
*/
window.onload = function(){
//獲取按鈕對象
var btn = document.getElementById("btn");
btn.onclick = function(){
//如果直接打印location，則可以獲取到地址欄的信息（當前頁面的完整路徑）
//alert(location);
/*
* 如果直接將location屬性修改爲一個完整的路徑，或相對路徑
* 則我們頁面會自動跳轉到該路徑，並且會生成相應的歷史記錄
*/
//location = "http://www.baidu.com";
//location = "01.BOM.html";
/*
* assign()
* - 用來跳轉到其他的頁面，作用和直接修改location一樣
*/
//location.assign("http://www.baidu.com");
/*
* reload()
* - 用於重新加載當前頁面，作用和刷新按鈕一樣
* - 如果在方法中傳遞一個true，作爲參數，則會強制清空緩存刷新頁面
*/
//location.reload(true);
/*
* replace()
* - 可以使用一個新的頁面替換當前頁面，調用完畢也會跳轉頁面
* 不會生成歷史記錄，不能使用回退按鈕回退
*/
location.replace("01.BOM.html");
};
};
</script>
</head>
<body>
<button id="btn">點我一下</button>
<h1>Location</h1>
<input type="text" />
<a href="01.BOM.html">去BOM</a>
</body>
</html>
定時調用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//獲取count
var count = document.getElementById("count");
//使count中的內容，自動切換
/*
* JS的程序的執行速度是非常非常快的
* 如果希望一段程序，可以每間隔一段時間執行一次，可以使用定時調用
*/
/*for(var i=0 ; i<10000 ; i++){
count.innerHTML = i;
alert("hello");
}*/
/*
* setInterval()
* - 定時調用
* - 可以將一個函數，每隔一段時間執行一次
* - 參數：
* 1.回調函數，該函數會每隔一段時間被調用一次
* 2.每次調用間隔的時間，單位是毫秒
*
* - 返回值：
* 返回一個Number類型的數據
* 這個數字用來作爲定時器的唯一標識
*/
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
//關閉定時器
clearInterval(timer);
}
},1000);
//console.log(timer);
//clearInterval()可以用來關閉一個定時器
//方法中需要一個定時器的標識作爲參數，這樣將關閉標識對應的定時器
//clearInterval(timer);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
移動div練習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
//使div可以根據不同的方向鍵向不同的方向移動
/*
* 按左鍵，div向左移
* 按右鍵，div向右移
* 。。。
*/
window.onload = function(){
//定義一個變量，來表示移動的速度
var speed = 10;
//創建一個變量表示方向
//通過修改dir來影響移動的方向
var dir = 0;
//開啓一個定時器，來控制div的移動
setInterval(function(){
/*
* 37 左
* 38 上
* 39 右
* 40 下
*/
switch(dir){
case 37:
//alert("向左"); left值減小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
},30);
//爲document綁定一個按鍵按下的事件
document.onkeydown = function(event){
event = event || window.event;
//當用戶按了ctrl以後，速度加快
if(event.ctrlKey){
speed = 500;
}else{
speed = 10;
}
//使dir等於按鍵的值
dir = event.keyCode;
};
//當按鍵鬆開時，div不再移動
document.onkeyup = function(){
//設置方向爲0
dir = 0;
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
延時調用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var num = 1;
//開啓一個定時器
/*setInterval(function(){
console.log(num++);
},3000);*/
/*
* 延時調用，
* 延時調用一個函數不馬上執行，而是隔一段時間以後在執行，而且只會執行一次
*
* 延時調用和定時調用的區別，定時調用會執行多次，而延時調用只會執行一次
*
* 延時調用和定時調用實際上是可以互相代替的，在開發中可以根據自己需要去選擇
*/
var timer = setTimeout(function(){
console.log(num++);
},3000);
//使用clearTimeout()來關閉一個延時調用
clearTimeout(timer);
</script>
</head>
<body>
</body>
</html>
類的操作（addClass修改樣式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
height: 300px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//獲取box
var box = document.getElementById("box");
//獲取btn01
var btn01 = document.getElementById("btn01");
//爲btn01綁定單擊響應函數
btn01.onclick = function(){
//修改box的樣式
/*
* 通過style屬性來修改元素的樣式，每修改一個樣式，瀏覽器就需要重新渲染一次頁面
* 這樣的執行的性能是比較差的，而且這種形式當我們要修改多個樣式時，也不太方便
*/
/*box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "yellow";*/
/*
* 我希望一行代碼，可以同時修改多個樣式
*/
//修改box的class屬性
/*
* 我們可以通過修改元素的class屬性來間接的修改樣式
* 這樣一來，我們只需要修改一次，即可同時修改多個樣式，
* 瀏覽器只需要重新渲染頁面一次，性能比較好，
* 並且這種方式，可以使表現和行爲進一步的分離
*/
//box.className += " b2";
//addClass(box,"b2");
//alert(hasClass(box,"hello"));
//removeClass(box,"b2");
toggleClass(box,"b2");
};
};
//定義一個函數，用來向一個元素中添加指定的class屬性值
/*
* 參數:
* obj 要添加class屬性的元素
* cn 要添加的class值
*
*/
function addClass(obj , cn){
//檢查obj中是否含有cn
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
}
/*
* 判斷一個元素中是否含有指定的class屬性值
* 如果有該class，則返回true，沒有則返回false
*
*/
function hasClass(obj , cn){
//判斷obj中有沒有cn class
//創建一個正則表達式
//var reg = /\bb2\b/;
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
* 刪除一個元素中的指定的class屬性
*/
function removeClass(obj , cn){
//創建一個正則表達式
var reg = new RegExp("\\b"+cn+"\\b");
//刪除class
obj.className = obj.className.replace(reg , "");
}
/*
* toggleClass可以用來切換一個類
* 如果元素中具有該類，則刪除
* 如果元素中沒有該類，則添加
*/
function toggleClass(obj , cn){
//判斷obj中是否含有cn
if(hasClass(obj , cn)){
//有，則刪除
removeClass(obj , cn);
}else{
//沒有，則添加
addClass(obj , cn);
}
}
</script>
</head>
<body>
<button id="btn01">點擊按鈕以後修改box的樣式</button>
<br /><br />
<div id="box" class="b1 b2"></div>
</body>
</html>
JSON_01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
如果需要兼容IE7及以下的JSON操作，則可以通過引入一個外部的js文件來處理
-->
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
/*
* JSON
* - JS中的對象只有JS自己認識，其他的語言都不認識
* - JSON就是一個特殊格式的字符串，這個字符串可以被任意的語言所識別，
* 並且可以轉換爲任意語言中的對象，JSON在開發中主要用來數據的交互
* - JSON
* - JavaScript Object Notation JS對象表示法
* - JSON和JS對象的格式一樣，只不過JSON字符串中的屬性名必須加雙引號
* 其他的和JS語法一致
* JSON分類：
* 1.對象 {}
* 2.數組 []
*
* JSON中允許的值：
* 1.字符串
* 2.數值
* 3.布爾值
* 4.null
* 5.對象
* 6.數組
*/
//創建一個對象
var arr = '[1,2,3,"hello",true]';
var obj2 = '{"arr":[1,2,3]}';
var arr2 ='[{"name":"孫悟空","age":18,"gender":"男"},{"name":"孫悟空","age":18,"gender":"男"}]';
/*
* 將JSON字符串轉換爲JS中的對象
* 在JS中，爲我們提供了一個工具類，就叫JSON
* 這個對象可以幫助我們將一個JSON轉換爲JS對象，也可以將一個JS對象轉換爲JSON
*/
var json = '{"name":"孫悟空","age":18,"gender":"男"}';
/*
* json --> js對象
* JSON.parse()
* - 可以將以JSON字符串轉換爲js對象
* - 它需要一個JSON字符串作爲參數，會將該字符串轉換爲JS對象並返回
*/
var o = JSON.parse(json);
var o2 = JSON.parse(arr);
//console.log(o.gender);
//console.log(o2[1]);
var obj3 = {name:"豬八戒" , age:28 , gender:"男"};
/*
* JS對象 ---> JSON
* JSON.stringify()
* - 可以將一個JS對象轉換爲JSON字符串
* - 需要一個js對象作爲參數，會返回一個JSON字符串
*/
var str = JSON.stringify(obj3);
//console.log(str);
/*
* JSON這個對象在IE7及以下的瀏覽器中不支持，所以在這些瀏覽器中調用時會報錯
*/
var str3 = '{"name":"孫悟空","age":18,"gender":"男"}';
JSON.parse(str3);
</script>
</head>
<body>
</body>
</html>
JSON_02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = '{"name":"孫悟空","age":18,"gender":"男"}';
/*
* eval()
* - 這個函數可以用來執行一段字符串形式的JS代碼，並將執行結果返回
* - 如果使用eval()執行的字符串中含有{},它會將{}當成是代碼塊
* 如果不希望將其當成代碼塊解析，則需要在字符串前後各加一個()
*
* - eval()這個函數的功能很強大，可以直接執行一個字符串中的js代碼，
* 但是在開發中儘量不要使用，首先它的執行性能比較差，然後它還具有安全隱患
*/
var str2 = "alert('hello');";
var obj = eval("("+str+")");
console.log(obj);
</script>
</head>
<body>
</body>
</html>