一 BOM程式設計
什麼是BOM程式設計？（将浏覽器的各個部分封裝成了不同的對象）
BOM是（Broswer Object Model） 浏覽器對象模型程式設計
1.window對象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<script type="text/javascript">
/*
1.window對象
open(): 在一個視窗中打開頁面
參數一： 打開的頁面
參數二：打開的方式。 _self: 本視窗 _blank: 新視窗（預設）
參數三： 設定視窗參數。比如視窗大小
setInterval(): 設定定時器（執行n次）
setTimeout(): 設定定時器(隻執行1次)
定時器： 每隔n毫秒調用指定的任務（函數）
參數一：指定的任務（函數）
參數二：毫秒數
clearInterval(): 清除定時器
clearTimeout(): 清除定時器
清除任務
參數一：需要清除的任務ID
alert(): 提示框
僅僅有确定按鈕
confirm(): 确認提示框
傳回值就是使用者操作
true: 點選了确定
false： 點選了取消
propmt(): 輸入提示框
傳回值就是使用者操作
true: 點選了确定
false： 點選了取消
*/
function testOpen(){
window.open("練習.html","_blank","width=100px;height=300px");
}
//開啟定時任務，每一個定時任務都有一個定時ID
var intervalId;
function testSetInterval(){
intervalId=window.setInterval("testOpen()",);
}
//清除定時任務
function testClearInterval(){
window.clearInterval(intervalId);
}
//開啟定時任務，隻執行一次
var timeoutId;
function testSetTimeout(){
timeoutId=window.setTimeout("testOpen()",);
}
//清除定時任務
function testClearTimeout(){
window.clearTimeout(timeoutId);
}
//确認提示框
function testConfirm(){
var flag=window.confirm("你要删除嗎？")
if(flag){
alert("正在删除中")
}else{
}
}
//輸入提示框
function testPropmt(){
window.prompt("請輸入您要輸入的内容")
}
</script>
</head>
<body>
<input type="button" value="open" onclick="testOpen()" />
<input type="button" value="SetInterval" onclick="testSetInterval()" />
<input type="button" value="ClearInterval" onclick="testClearInterval()" />
<input type="button" value="SetTimeout" onclick="testSetTimeOut()" />
<input type="button" value="ClearTimeout" onclick="testClearTimeOut()" />
<input type="button" value="confirm" onclick="testConfirm()" />
<input type="button" value="propmt" onclick="testPropmt()" />
</body>
</html>
2.location對象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<script type="text/javascript">
/*
2.location對象
href屬性： 代表的是位址欄的URL，可以擷取和設定URL。URL表示統一資源定位符
reload方法： 重新整理目前頁面
*/
//擷取目前位址欄的url
function getHref(){
var url=window.location.getHref();
alert(url);
}
//設定位址欄的url
function setHref(){
window.location.setHref("練習.html");
}
//重新整理目前頁面，每個一秒重新整理一次
function reflesh(){
window.location.reload();
}
window.setTimeout("reflesh()",);
</script>
</head>
<body>
<input type="button" value="getHref" onclick="getHref()" />
<input type="button" value="setHref" onclick="setHref()" />
<input type="button" value="reload" onclick="reflesh()" />
</body>
</html>
3.history對象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<script type="text/javascript">
/*
3.history對象
back(): 後退上一頁
go(): 跳轉到某頁（正整數：前進 負整數：後退） 1 -2*/
function testBack(){
//window.history.back();
window.history.go(-);
}
</script>
</head>
<body>
<input type="button" value="back" onclick="testBack()" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<script type="text/javascript">
/*
3.history對象
forward(): 前進到下一頁
go(): 跳轉到某頁（正整數：前進 負整數：後退） 1 -2*/
function testForword(){
//window.history.forward();
window.history.go();
}
</script>
</head>
<body>
<a href="3.history2.html">超連結</a>
<input type="button" value="forword" onclick="testForword()" />
</body>
</html>
4.screen對象（學習四個屬性）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<script type="text/javascript" >
/*
4.screen對象（學習四個屬性）
availHeight和availWidth
是排除了工作列之後的高度和寬度
width和height
是整個螢幕的像素值
*/
document.write("螢幕的實際寬度："+window.screen.width+"<br>");
document.write("螢幕的實際高度："+window.screen.height+"<br>");
document.write("螢幕的可用寬度："+window.screen.availWidth+"<br>");
document.write("螢幕的可用高度："+window.screen.availHeight+"<br>");
</script>
</head>
<body>
</body>
</html>
二 事件程式設計
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<script type="text/javascript">
/*
javascript事件程式設計的三個要素：
（以單擊事件為例講解事件程式設計三要素）
1）事件源：html标簽
2）事件 ：click dblclick mouseover。。。。
3）監聽器： 函數
javascript事件分類：
點選相關的：
單擊： onclick
輕按兩下： ondblclick
焦點相關的：（獲得焦點輸入框内提示内容消失，失去焦點驗證使用者名資訊并且在輸入框内提示）
聚焦： onfocus
失去焦點： onblur
選項相關的：（select選項改變，做一個籍貫選項）
改變選項： onchange
滑鼠相關的：（畫一個div區塊進行示範）
滑鼠經過： onmouseover
滑鼠移除： onmouseout
頁面加載相關的：（一般用在body标簽中，用于網頁加載完畢後還需執行什麼操作進行觸發）
頁面加載： onload
*/
//建立一個單擊事件的監聽
function testOnclick(){
alert("單擊事件被觸發");
}
//建立一個輕按兩下事件的監聽，這就相當于一個監聽器
function testDbclick(){
alert("輕按兩下事件被觸發");
}
//建立一個擷取焦點提示内容消失的監聽
function testOnfocus(){
//根據輸入框的Id擷取輸入标簽對象
var userName=document.getElementById("userName");
//将标簽對象中的内容設定為空
userName.value="";
}
//建立一個失去焦點的事件監聽，失去焦點的時候驗證使用者資訊并在輸入框内提示
function testOnblur(){
//根據輸入框的Id擷取輸入标簽對象的内容，及其span标簽的内容
var userName=document.getElementById("userName").value;
var userName2=document.getElementById("userName2");
//拿着名字做判斷
if(userName=="lx"){
userName2.innerHTML="此名字已經被占用，請重新輸入";
}else{
userName2.innerHTML="此名字有效";
}
}
//選項相關的：（select選項改變，做一個籍貫選項）
//改變選項： onchange
function testChange(){
//擷取使用者選擇哪個選項
var sheng=document.getElementById("sheng").value;
var shi=document.getElementById("shi");
shi.innerHTML="<option>--請選擇--</option>";
//根據使用者選擇，動态設定市級城市
if(sheng=="shanxi"){
shi.innerHTML="<option>西安</option><option>榆林</option><option>寶雞</option>"
}else if(sheng=="guangdong"){
shi.innerHTML="<option>廣州</option><option>深圳</option><option>佛山</option>"
}else if(sheng=="sichuan"){
shi.innerHTML="<option>成都</option><option>雅安</option><option>廣安</option>"
}
}
function testMouseover(){
alert("滑鼠經過了");
}
function testMouseout(){
alert("滑鼠移出了");
}
</script>
</head>
<body>
<input type="button" value="onClick" onclick="testOnclick()" />
<input type="button" value="dbClick" ondblclick="testDbclick()" />
<input type="text" value="請輸入學生姓名" onfocus="testOnfocus()" onblur="testOnblur()" id="userName" />
<span id="userName2"></span>
<select id="sheng" onchange="testChange()">
<option>--請選擇--</option>
<option value="shanxi">陝西省</option>
<option value="guangdong">廣東省</option>
<option value="sichuan">四川省</option>
</select>
<select id="shi">
</select>
<div style="height:200px;width:300px;border:2px solid #F00" onmouseover="testMouseover()" onmouseout="testMouseout()"></div>
</body>
</html>
三 DOM程式設計
3.1 概念（寫一個網頁demo,畫圖講解javascrip對網頁上每一個标簽的封裝，對象的層次結構體系）
DOM（document Object Model）文檔對象模型程式設計。
3.2 查詢标簽對象
3.2.1 通過document對象的集合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<body>
<a href="hh"></a>
<a href="uu"></a>
<img />
<img />
<img />
<form></form>
</body>
<script type="text/javascript">
/*
#通過document對象的集合
作用： 擷取多個或者同類的标簽對象
all: 擷取所有标簽對象
forms： 擷取form标簽對象
images: 擷取img标簽對象
links: 擷取a标簽對象
var nodeList = document.all; //傳回标簽對象數組
var nodeList = document.forms; //傳回标簽對象數組
var nodeList = document.images; //傳回對象數組
var nodeList = document.links;//傳回對象數組
*/
//all: 擷取所有标簽對象
var nodeList=document.all;
//forms： 擷取form标簽對象
var nodeList=document.forms;
//links: 擷取a标簽對象
var nodeList=document.links;
//images: 擷取img标簽對象
//var nodeList=document.images;
//周遊所擷取的标簽對象
alert(nodeList.length);
for(var i=;i<nodeList.length;i++){
alert(nodeList[i].nodeName);
}
</script>
</html>
3.2.2 通過關系查找标簽對象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<!--
#通過關系查找标簽對象
父節點： parentNode屬性
子節點： childNodes屬性
第一個子節點： firstChild屬性
最後一個子節點： lastChild屬性
下一個兄弟節點： nextSibling屬性
上一個兄弟節點： previousSibling屬性
-->
<body>
<!--在我們擷取一個父标簽的所有子标簽的時候,會将它我們的注釋和我們的換行都看成一個标簽對象一起擷取,是以這裡我們沒有換行及其空格為了示範友善-->
<from><a href="" ></a><input type="text" /><input type="text" /><input type="text" /></from>
</body>
<script type="text/javascript">
//擷取form标簽對象中的a标簽,links: 擷取a标簽對象
var aNode=document.links[];
//alert(aNode.nodeName);
//通過父節點屬性parentNode這個屬性擷取a标簽的父标簽
var fromNode=aNode.parentNode;
//alert(fromNode.nodeName);
//通過childNodes屬性擷取form标簽的所有的子标簽
var childNodeList=fromNode.childNodes;
//周遊這些個子标簽,在這裡因為我在body标簽裡寫的沒有空格和換行符，是以下面的周遊方式并沒有問題，在這裡可以用另一種方式，要判斷它的類型。
/*for(var i=0;i<childNodeList.length;i++){
document.write(childNodeList[i].nodeName+"<br>");
}*/
for(var i=;i<childNodeList.length;i++){
if(childNodeList[i].nodeType==){
document.write(childNodeList[i].nodeName+childNodeList[i].nodeType+"<br>")}
};
/*
在我們擷取一個父标簽的所有子标簽的時候,會将它我們的注釋和我們的換行都看成一個标簽對象一起擷取:
标簽對象名稱:#text -- 換行 -- 3
标簽對象名稱:#comment -- 注釋 -- 8
标簽對象名稱:#text
标簽對象名稱:A -- 1
标簽對象名稱:#text
标簽對象名稱:INPUT -- 1
标簽對象名稱:#text
标簽對象名稱:INPUT -- 1
标簽對象名稱:#text
*/
//在form标簽中去掉換行符之後,我們來擷取一下form标簽的所有的子标簽對象的第一個子标簽和最後一個子标簽
var first=fromNode.firstChild;
//alert(first.nodeName);
var last=fromNode.lastChild;
//alert(last.nodeName);
//from标簽下一個兄弟節點： nextSibling屬性
var next=first.nextSibling;
//alert(next.nodeName);
//上一個兄弟節點： previousSibling屬性
var previous=next.previousSibling;
alert(previous.nodeName);
</script>
</html>
3.2.3 通過document方法查詢标簽對象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<body>
<a href="" id="d1">超連結1</a>
<a href="" name="n1">超連結2</a>
<a href="" name="n1">超連結3</a>
</body>
<script type="text/javascript">
/*#通過document方法查詢标簽對象
document.getElementById("id屬性值"); 最常用
注意：
1）使用該方法擷取的标簽一定要有id屬性
2）在同一個html頁面中不要出現兩個同名的id
documetn.getElementsByName("name屬性值"); 擷取同name屬性名的标簽清單
注意：
3）使用該方法擷取的标簽一定要有name屬性
document.getElementsByTagName("标簽名") 擷取相同标簽名的标簽清單
*/
var aNode=document.getElementById("d1");
//alert(aNode.nodeName);
var nameNodeList=document.getElementsByName("n1");
//alert(nameNodeList.length);
//周遊
for(var i=;i<nameNodeList.length;i++){
document.write(nameNodeList[i].nodeName+"<br>");
}
var nameList=document.getElementsByTagName("a");
alert(nameList.length);
</script>
</html>
3.3 修改标簽對象屬性
value屬性： 修改value屬性值。 input type=”text”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<body>
<input type="text" value="請輸入内容" id="d1" onfocus="testOnfocus()" />
</body>
<script>
function testOnfocus(){
var element=document.getElementById("d1");
//将value設定為空
element.value="";
}
</script>
</html>
src屬性： 修改圖檔的src屬性。
點選按鈕更換圖檔
案例：兩張圖檔不斷自動切換
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<body>
<img src="4.jpg" width="200px"; height="200px" id="picture" /></br>
<input type="button" value="更換圖檔" onclick="changePicture()" />
</body>
<script type="text/javascript" >
/*src屬性： 修改圖檔的src屬性。 <img src=""/> 點選按鈕更換圖檔
案例：兩張圖檔不斷自動切換*/
//隻實作了一次轉化
/*function changePicture(){
var picture=document.getElementById("picture");
picture.src="mm.jpg";
}*/
//寫一個方法,每隔2秒調用一下這個方法,每次調用都給我這個img标簽更換src屬性
//定義一個值相當大的一個變量,注意每次調用完都要自減一
var i=;
function changePicture(){
var picture=document.getElementById("picture");
if(i%==){
picture.src="mm.jpg";
}else{
picture.src="4.jpg";
}
i--;
}
//定義一個定時器，實作圖檔的輪轉
window.setInterval("changePicture()",);
</script>
</html>
checked屬性：修改單選或多項的預設值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<body>
愛好全選：<input type="checkbox" id="all" onclick="testAll()"/></br>
唱歌：<input type="checkbox" name="c1" /></br>
跳舞：<input type="checkbox" name="c1" /></br>
遊泳：<input type="checkbox" name="c1" /></br>
</body>
<script>
function testAll(){
//擷取愛好全選的input标簽對象
var all=document.getElementById("all");
//擷取所有的愛好的input标簽對象
var hobbys=document.getElementsByName("c1");
//周遊所有的input标簽對象,将每一個愛好的input标簽對象的checked屬性值置為和全選按鈕的checked屬性值相同
for(var i=;i<hobbys.length;i++){
hobbys[i].checked=all.checked;
}
}
</script>
</html>
四 正規表達式
4.1 正規表達式的書寫規則
建立正規表達式： var 變量 = /正則規則/;
[a-z]: 表示比對字母
* : 0或多個元素
+: 1個或多個元素
? : 0或1個元素
{n,m} 大于n,小于m的個數
正則方法：
test（）： 用于比對指定的字元串. true：表示比對成功 ； false; 表示比對失敗
注意：
在js的正規表達式中，如果遇到了符合規則的内容，就代表比對成功！
如果需要和java一樣完全比對，需要添加邊界符号
開始标記： ^
結束标記： $
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<!--4.2 案例：利用正規表達式寫一個表單驗證
使用者名：10-15位的數字或者字母
密碼：10-15位的數字或字母
确認密碼：判斷兩次輸入的密碼是否一緻
郵箱：[email protected].(com/cn/net)
送出按鈕：必須全部驗證成功的情況下，才能成功送出，隻要有一個驗證失敗無法送出
-->
<body>
<form action="8.送出成功.html" onsubmit=" return testSubmit()" >
使用者名：<input type="text" id="userName" onblur="testUserName()" /><span id="userNameTip" ></span></br>
密碼：<input type="password" id="password" onblur="testPassword()" /><span id="passwordTip" ></span></br>
确認密碼：<input type="password" id="repassword" onblur="testRepassword()" /><span id="repasswordTip" ></span></br>
郵箱：<input type="text" id="email" onblur="testEmail()" /><span id="emailTip" ></span></br><input type="submit" value="送出" /></br>
</form>
</body>
<script type="text/javascript">
function testUserName(){
//擷取userName和userNameTip這倆個标簽對象
var userName=document.getElementById("userName").value;
var userNameTip=document.getElementById("userNameTip");
//定義一個正則式
var reg=/^[0-9a-zA-Z]{10,15}$/;
if(reg.test(userName)){
userNameTip.innerHTML="您輸入的使用者名比對".fontcolor("green");
return true;
}else{
userNameTip.innerHTML="您輸入的使用者名不比對".fontcolor("red");
return false;
}
}
function testPassword(){
//擷取password和passwordTip這倆個标簽對象
var password=document.getElementById("password").value;
var passwordTip=document.getElementById("passwordTip");
//定義一個正則式
var reg=/^[0-9a-zA-Z]{10,15}$/;
if(reg.test(password)){
passwordTip.innerHTML="您輸入的密碼比對".fontcolor("green");
return true;
}else{
passwordTip.innerHTML="您輸入的密碼不比對".fontcolor("red");
return false;
}
}
function testRepassword(){
//擷取password和passwordTip和repassword這三個标簽對象
var repassword=document.getElementById("repassword").value;
var password=document.getElementById("password").value;
var passwordTip=document.getElementById("passwordTip");
//定義一個正則式
var reg=/^[0-9a-zA-Z]{10,15}$/;
if(repassword==password){
repasswordTip.innerHTML="倆次密碼輸入一緻".fontcolor("green");
return true;
}else{
repasswordTip.innerHTML="倆次密碼輸入不一緻".fontcolor("red");
return false;
}
}
function testEmail(){
//擷取使用者輸入的郵箱的值
var email = document.getElementById("email").value;
var emailTip = document.getElementById("emailTip");
//寫一個比對郵箱的正則規則
//[email protected] jsck#sina.com [email protected]
//根據以上的舉例寫出正則規則
var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-z]{2,3}){1,2}$/;
if(reg.test(email)){
emailTip.innerHTML="郵箱符合規則".fontcolor("green");
return true;
}else{
emailTip.innerHTML="郵箱符合規則".fontcolor("red");
return false;
}
}
function testSubmit(){
if(testUserName()&&testPassword()&&testPassword()&&testEmail()){
return true;
}else{
return false;
}
}
</script>
</html>
送出成功的頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
</head>
<body>
你的注冊資訊送出成功
</body>
</html>