一、瀏覽器對(duì)象模型（BOM）
瀏覽器對(duì)象模型主要包括window、history、location和document等對(duì)象，其中window對(duì)象是整個(gè)BOM的頂層對(duì)象。
window對(duì)象下主要包括如下對(duì)象：
（1）document:窗口中當(dāng)前顯示的文檔對(duì)象；
（2）history:保存窗口最近加載的URL；
（3）location:當(dāng)前窗口的URL；
window對(duì)象的常用方法：
（1）prompt():顯示可提示用戶輸入的對(duì)話框；
（2）alert():顯示帶有一個(gè)提示消息和一個(gè)確定按鈕的警示框；
（3）confirm():顯示一個(gè)帶有提示信息、確定和取消按鈕的確認(rèn)框；
（4）close():關(guān)閉瀏覽器窗口；
（5）open():打開(kāi)一個(gè)新的瀏覽器窗口，加載給定URL所指定的文檔；
（6）setTimeout():在設(shè)定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式；
（7）setInterval():按照設(shè)定的周期（以毫秒計(jì)）來(lái)重復(fù)調(diào)用函數(shù)或表達(dá)式；
（8）clearInterval():取消重復(fù)設(shè)置，與setInterval對(duì)應(yīng)；
history對(duì)象方法：
（1）back():后退一個(gè)頁(yè)面，相當(dāng)于瀏覽器后退按鈕；
（2）forward():前進(jìn)一個(gè)頁(yè)面，相對(duì)于瀏覽器前進(jìn)按鈕；
（3）go():打開(kāi)一個(gè)指定位置的頁(yè)面；
location對(duì)象屬性和方法:
（1）href屬性:獲取或設(shè)置網(wǎng)頁(yè)地址；
（2）reload方法:重新加載當(dāng)前頁(yè)面，相當(dāng)于瀏覽器的刷新按鈕；
一、window對(duì)象各種對(duì)話框
編寫一個(gè)網(wǎng)頁(yè)，點(diǎn)擊不同的按鈕分別實(shí)現(xiàn)alert,prompt,confirm對(duì)話框和實(shí)現(xiàn)打開(kāi)關(guān)閉瀏覽器窗口；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Window的常用方法</title>
<script type="text/javascript">
function myAlert()
{
alert("您好!");
}
function myPrompt()
{
var sex = prompt("請(qǐng)輸入您的性別:","男"); //參數(shù)1：提示內(nèi)容，參數(shù)2：默認(rèn)值
if(sex == "男")
document.getElementById("promptInfo").innerHTML = "<h1>帥哥,你好</h1>";
if(sex == "女")
document.getElementById("promptInfo").innerHTML = "<h1>美女,你好</h1>";
}
function myConfirm()
{
var boolFlag = confirm("您確定要?jiǎng)h除此數(shù)據(jù)嗎");
if(boolFlag == true)
{
document.getElementById("confirmInfo").innerHTML = "<h1>刪除請(qǐng)求已發(fā)送</h1>";
}
}
function myOpen()
{
window.open("Demo01_adv.html","adv","height=500,width=800,location=no,menubar=no,toolbar=0,resizable=no");
}
function myClose()
{
var boolFlag = confirm("您確定要狠心關(guān)閉我嗎?");
if(boolFlag == true)
{
window.close();
}
}
</script>
</head>
<body>
<input type="button" value="alert對(duì)話框" onclick="myAlert();"><br/><br/>
<input type="button" value="prompt可輸入信息的對(duì)話框" onclick="myPrompt();">
<span id="promptInfo"></span>
<br/><br/>
<input type="button" value="confirm確定取消對(duì)話框" onclick="myConfirm();">
<span id="confirmInfo"></span>
<br/><br/>
<input type="button" value="open打開(kāi)一個(gè)新窗口" onclick="myOpen();">
<br/><br/>
<input type="button" value="close關(guān)閉當(dāng)前窗口" onclick="myClose();">
</body>
</html>
二、setTimeout實(shí)現(xiàn)抽獎(jiǎng)功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout實(shí)現(xiàn)抽獎(jiǎng)功能</title>
<style type="text/css">
#myTable{margin: 0px auto; width: 500px; height: 500px; }
#myTable td{border: solid 1px red; width: 100px; height: 100px;
text-align:center; font-weight: bold;}
</style>
<script type="text/javascript">
//alert(Math.random());
function GetLuckyResult()
{
var num = Math.ceil(Math.random()*25);
var obj = document.getElementById("td" + num);
obj.style.backgroundColor = "#FF0000";
obj.style.color = "black";
document.getElementById("info").innerHTML = obj.innerHTML;
}
function MyStart()
{
document.getElementById("info").innerHTML = "正在抽獎(jiǎng)中...";
for(var i = 1;i<=25;i++)
{
var obj = document.getElementById("td" + i);
obj.style.backgroundColor = "white";
obj.style.color = "black";
}
setTimeout("GetLuckyResult()",3000);
}
</script>
</head>
<body>
<div style="text-align: center;">
<input type="button" value="開(kāi)始抽獎(jiǎng)" onclick="MyStart();">
<span id="info"></span>
</div>
<br/>
<table id="myTable">
<tr>
<td id="td1">謝謝參與</td>
<td id="td2">謝謝參與</td>
<td id="td3">謝謝參與</td>
<td id="td4">謝謝參與</td>
<td id="td5">謝謝參與</td>
</tr>
<tr>
<td id="td6">謝謝參與</td>
<td id="td7">謝謝參與</td>
<td id="td8">謝謝參與</td>
<td id="td9">謝謝參與</td>
<td id="td10">謝謝參與</td>
</tr>
<tr>
<td id="td11">謝謝參與</td>
<td id="td12">謝謝參與</td>
<td id="td13">500萬(wàn)大獎(jiǎng)</td>
<td id="td14">謝謝參與</td>
<td id="td15">謝謝參與</td>
</tr>
<tr>
<td id="td16">謝謝參與</td>
<td id="td17">謝謝參與</td>
<td id="td18">謝謝參與</td>
<td id="td19">謝謝參與</td>
<td id="td20">謝謝參與</td>
</tr>
<tr>
<td id="td21">謝謝參與</td>
<td id="td22">謝謝參與</td>
<td id="td23">謝謝參與</td>
<td id="td24">謝謝參與</td>
<td id="td25">謝謝參與</td>
</tr>
</table>
</body>
</html>
三、setTimeout實(shí)現(xiàn)時(shí)間的延時(shí)切換圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout實(shí)現(xiàn)時(shí)間的延時(shí)切換圖片</title>
<script type="text/javascript">
function changeImg()
{
document.getElementById("myImg").src = "img/knfd.jpg";
}
setTimeout("changeImg()",3000);
</script>
</head>
<body>
<img id="myImg" src="img/536.jpg" width="300" height="300">
</body>
</html>
四、setInterval實(shí)現(xiàn)抽獎(jiǎng)功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval實(shí)現(xiàn)抽獎(jiǎng)功能</title>
<style type="text/css">
#myTable{margin: 0px auto; width: 500px; height: 500px; }
#myTable td{border: solid 1px red;
width: 100px; height: 100px;
text-align:center; font-weight: bold;}
</style>
<script type="text/javascript">
var MyInterval;
var LuckyCount = 1;
function GetLuckyResult()
{
for(var i = 1;i<=25;i++)
{
var obj = document.getElementById("td" + i);
obj.style.backgroundColor = "white";
obj.style.color = "black";
}
var num = Math.ceil(Math.random()*25);
var obj = document.getElementById("td" + num);
obj.style.backgroundColor = "#FF0000";
obj.style.color = "black";
if(LuckyCount >= 10)
{
clearInterval(MyInterval);
document.getElementById("info").innerHTML = obj.innerHTML;
}
LuckyCount++;
}
function MyStart()
{
LuckyCount = 1;
document.getElementById("info").innerHTML = "正在抽獎(jiǎng)中...";
MyInterval = setInterval("GetLuckyResult()",50);
}
</script>
</head>
<body>
<div style="text-align: center;">
<input type="button" value="開(kāi)始抽獎(jiǎng)" onclick="MyStart();">
<span id="info"></span>
</div>
<br/>
<table id="myTable">
<tr>
<td id="td1">謝謝參與</td>
<td id="td2">謝謝參與</td>
<td id="td3">謝謝參與</td>
<td id="td4">謝謝參與</td>
<td id="td5">謝謝參與</td>
</tr>
<tr>
<td id="td6">謝謝參與</td>
<td id="td7">謝謝參與</td>
<td id="td8">謝謝參與</td>
<td id="td9">謝謝參與</td>
<td id="td10">謝謝參與</td>
</tr>
<tr>
<td id="td11">謝謝參與</td>
<td id="td12">謝謝參與</td>
<td id="td13">500萬(wàn)大獎(jiǎng)</td>
<td id="td14">謝謝參與</td>
<td id="td15">謝謝參與</td>
</tr>
<tr>
<td id="td16">謝謝參與</td>
<td id="td17">謝謝參與</td>
<td id="td18">謝謝參與</td>
<td id="td19">謝謝參與</td>
<td id="td20">謝謝參與</td>
</tr>
<tr>
<td id="td21">謝謝參與</td>
<td id="td22">謝謝參與</td>
<td id="td23">謝謝參與</td>
<td id="td24">謝謝參與</td>
<td id="td25">謝謝參與</td>
</tr>
</table>
</body>
</html>
五、setInterval實(shí)現(xiàn)圖片的自動(dòng)切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval實(shí)現(xiàn)圖片的自動(dòng)切換</title>
<script type="text/javascript">
var myInterval;
function changeImg()
{
var obj = document.getElementById("myImg");
if(obj.src.indexOf("img/536.jpg") >= 0)
obj.src = "img/knfd.jpg";
else if(obj.src.indexOf("img/knfd.jpg") >= 0)
obj.src = "img/51.jpg";
else if(obj.src.indexOf("img/51.jpg") >= 0)
obj.src = "img/ym.jpg";
else if(obj.src.indexOf("img/ym.jpg") >= 0)
obj.src = "img/536.jpg";
}
function MyPlay()
{
myInterval = setInterval("changeImg()",1000);
}
function myStop()
{
clearInterval(myInterval);
}
</script>
</head>
<body>
<img id="myImg" src="img/536.jpg" width="300" height="300"><br><br>
<input type="button" value="播放" onclick="MyPlay();">
<input type="button" value="停止" onclick="myStop();">
</body>
</html>
六、setInterval實(shí)現(xiàn)時(shí)鐘效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval實(shí)現(xiàn)時(shí)鐘效果</title>
<script type="text/javascript">
function ShowTime()
{
var myDate=new Date(); //獲取系統(tǒng)時(shí)間
var myYear= myDate.getFullYear(); //取年
var myMonth=myDate.getMonth()+1; //取月
var myDay= myDate.getDate(); //取日
var myHour = myDate.getHours(); //時(shí)
var myMinute = myDate.getMinutes(); //分
var mySeconds = myDate.getSeconds(); //秒
var myWeekDay=myDate.getDay(); //取星期
if(myWeekDay == 0) myWeekDay=" 星期日 ";
else if(myWeekDay == 1) myWeekDay=" 星期一 ";
else if(myWeekDay == 2) myWeekDay=" 星期二 ";
else if(myWeekDay == 3) myWeekDay=" 星期三 ";
else if(myWeekDay == 4) myWeekDay=" 星期四 ";
else if(myWeekDay == 5) myWeekDay=" 星期五 ";
else if(myWeekDay == 6) myWeekDay=" 星期六 ";
document.getElementById("lblTime").innerHTML = myYear+"年"+myMonth+"月"+myDay+"日"
+ " " + myWeekDay + " "+ myHour + ":" + myMinute + ":" + mySeconds;
}
setInterval("ShowTime()",1000);
</script>
</head>
<body>
<h1 id="lblTime">當(dāng)前時(shí)間:</h1>
</body>
</html>
七、history對(duì)象實(shí)現(xiàn)網(wǎng)頁(yè)的前進(jìn)后退
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是第一個(gè)頁(yè)面</h1>
<a href="Demo04_02.html">我要跳轉(zhuǎn)到第二個(gè)頁(yè)面</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我是第二個(gè)頁(yè)面</h1>
<a href="Demo04_03.html">我要跳轉(zhuǎn)到第三個(gè)頁(yè)面</a>
<br/><br/>
<a href="javascript:history.back();">后退</a>
<br/><br/>
<a href="javascript:history.forward();">前進(jìn)</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history對(duì)象</title>
</head>
<body>
<h1>我是第三個(gè)頁(yè)面</h1>
<br/><br/>
<a href="javascript:history.back();">后退</a>
<br/><br/>
<a href="javascript:history.go(-2);">后退二步</a>
</body>
</html>
八、location對(duì)象實(shí)現(xiàn)頁(yè)面刷新和跳轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location對(duì)象</title>
<script type="text/javascript">
function MyRefresh()
{
location.reload();
}
function ChangeUrl()
{
var objValue = document.getElementById("webUrl").value;
if(objValue.length == 0)
return;
location.href = objValue;
}
</script>
</head>
<body>
<input type="button" value="刷新" onclick="MyRefresh();" />
<select id="webUrl" onchange="ChangeUrl();">
<option value="">--請(qǐng)選擇--</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.alibaba.com">阿里巴巴</option>
<option value="http://www.qq.com">騰訊</option>
</select>
</body>
</html>
二、文檔對(duì)象模型（DOM）
文檔對(duì)象模型（DOM）:與BOM關(guān)注瀏覽器的整體不同，DOM（Document Object Model）只關(guān)注瀏覽器所載入
的文檔；
DOM把html文檔看成由元素、屬性和文本組成的一棵倒立的樹；
一、修改標(biāo)題、前景和背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改標(biāo)題,背景顏色和前景顏色</title>
<script type="text/javascript">
function changeTitle()
{
document.title = document.getElementById("txtTitle").value;
}
function changeFgColor()
{
document.fgColor = document.getElementById("selFgColor").value;
}
function changeBgColor()
{
document.bgColor = document.getElementById("clBgColor").value;
}
</script>
</head>
<body>
<input type="text" id="txtTitle" /> <input type="button" value="修改標(biāo)題" onclick="changeTitle();" />
文字顏色:
<select id="selFgColor" onchange="changeFgColor();">
<option value="white">白色</option>
<option value="red">紅色</option>
<option value="green">綠色</option>
<option value="blue">藍(lán)色</option>
<option value="yellow">黃色</option>
<option value="black">黑色</option>
</select>
背景顏色:
<input type="color" id="clBgColor" onchange="changeBgColor();" />
<br/><br/>
<p>
JavaScript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型。
它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，
最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。
</p>
</body>
</html>
二、getElementById訪問(wèn)頁(yè)面元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById訪問(wèn)頁(yè)面元素</title>
<style type="text/css">
#txtTitle,#txtContent{ width: 100%;}
#txtContent{ height: 80px;}
#lblContent{ line-height: 30px;}
</style>
<script type="text/javascript">
function SetArticle()
{
var objTitle = document.getElementById("txtTitle");
var objContent = document.getElementById("txtContent");
var strContent = objContent.value;
while(true)
{
strContent = strContent.replace("\n","<br/>");
if(strContent.indexOf("\n") == -1)
break;
}
document.getElementById("lblTitle").innerHTML = objTitle.value;
document.getElementById("lblContent").innerHTML = strContent;
}
</script>
</head>
<body>
故事標(biāo)題:<input type="text" id="txtTitle">
<br>
故事內(nèi)容:<br>
<textarea id="txtContent"></textarea><br>
<input type="button" value="確定" onclick="SetArticle();" />
<br><br>
<h1 id="lblTitle"></h1>
<div id="lblContent"></div>
</body>
</html>
三、設(shè)置樣式表
方案一：使用style屬性進(jìn)行設(shè)置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JS設(shè)置樣式表內(nèi)容</title>
<style type="text/css">
#txtTitle,#txtContent{ width: 100%;}
#txtContent{ height: 80px;}
#lblContent{ line-height: 30px;}
</style>
<script type="text/javascript">
function SetArticle()
{
var objTitle = document.getElementById("txtTitle");
var objContent = document.getElementById("txtContent");
var strContent = objContent.value;
while(true)
{
strContent = strContent.replace("\n","<br/>");
if(strContent.indexOf("\n") == -1)
break;
}
document.getElementById("lblTitle").innerHTML = objTitle.value;
document.getElementById("lblContent").innerHTML = strContent;
}
//此種處理方式導(dǎo)致JS代碼臃腫，可以將樣式寫在樣式表中，直接切換className來(lái)實(shí)現(xiàn)
function setStyle()
{
var obj = document.getElementById("lblContent");
obj.style.borderColor = "red";
obj.style.borderStyle = "solid";
obj.style.borderWidth = 3;
obj.style.color = "green";
}
</script>
</head>
<body>
故事標(biāo)題:<input type="text" id="txtTitle">
<br>
故事內(nèi)容:<br>
<textarea id="txtContent"></textarea><br>
<input type="button" value="確定" onclick="SetArticle();" />
<input type="button" value="修改樣式" onclick="setStyle();">
<br><br>
<h1 id="lblTitle"></h1>
<div id="lblContent"></div>
</body>
</html>
方案二：使用className設(shè)置樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JS設(shè)置樣式表內(nèi)容</title>
<style type="text/css">
#txtTitle,#txtContent{ width: 100%;}
#txtContent{ height: 80px;}
#lblContent{ line-height: 30px;}
.myContent{ border:solid 3px red; color: green;}
</style>
<script type="text/javascript">
function SetArticle()
{
var objTitle = document.getElementById("txtTitle");
var objContent = document.getElementById("txtContent");
var strContent = objContent.value;
while(true)
{
strContent = strContent.replace("\n","<br/>");
if(strContent.indexOf("\n") == -1)
break;
}
document.getElementById("lblTitle").innerHTML = objTitle.value;
document.getElementById("lblContent").innerHTML = strContent;
}
//此種處理方式導(dǎo)致JS代碼臃腫，可以將樣式寫在樣式表中，直接切換className來(lái)實(shí)現(xiàn)
function setStyle()
{
var obj = document.getElementById("lblContent");
obj.className = "myContent";
}
</script>
</head>
<body>
故事標(biāo)題:<input type="text" id="txtTitle">
<br>
故事內(nèi)容:<br>
<textarea id="txtContent"></textarea><br>
<input type="button" value="確定" onclick="SetArticle();" />
<input type="button" value="修改樣式" onclick="setStyle();">
<br><br>
<h1 id="lblTitle"></h1>
<div id="lblContent"></div>
</body>
</html>
四、checkbox全選
方案一：使用getElementsByName獲取所有CheckBox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByName獲取checkbox進(jìn)行全選</title>
<style type="text/css">
#myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
#myTable td,#myTable th{ background-color: white;}
</style>
<script type="text/javascript">
function SelCheckBoxAll()
{
var objs = document.getElementsByName("stuItem");
var objAll = document.getElementById("selAll");
for(var i = 0;i < objs.length; i++)
{
objs[i].checked = objAll.checked;
}
}
</script>
</head>
<body>
<table cellspacing="1" id="myTable">
<tr>
<th width="20"><input type="checkbox" id="selAll" onchange="SelCheckBoxAll();" /></th>
<th width="200">姓名</th>
<th width="200">性別</th>
<th width="200">專業(yè)</th>
<th width="200">愛(ài)好</th>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>劉備</td>
<td>男</td>
<td>軟件開(kāi)發(fā)</td>
<td>抽煙</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>關(guān)羽</td>
<td>男</td>
<td>國(guó)際貿(mào)易</td>
<td>喝酒</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>張飛</td>
<td>男</td>
<td>園林設(shè)計(jì)</td>
<td>燙頭發(fā)</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>趙云</td>
<td>男</td>
<td>平面設(shè)計(jì)</td>
<td>抽煙</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>黃忠</td>
<td>男</td>
<td>影視制作</td>
<td>玩游戲</td>
</tr>
<tr>
<td><input type="checkbox" name="stuItem" /></td>
<td>小喬</td>
<td>女</td>
<td>高級(jí)護(hù)理</td>
<td>唱歌</td>
</tr>
</table>
</body>
</html>
方案二：使用getElementsByTagName獲取所有CheckBox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByTagName獲取checkbox進(jìn)行全選</title>
<style type="text/css">
#myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
#myTable td,#myTable th{ background-color: white;}
#myDiv{width: 900px; margin: 0px auto; height: 30px; line-height: 30px;
text-align: center;}
</style>
<script type="text/javascript">
function SelCheckBoxAll()
{
var objs = document.getElementsByTagName("input");
var objAll = document.getElementById("selAll");
for(var i = 0;i < objs.length; i++)
{
objs[i].checked = objAll.checked;
}
}
</script>
</head>
<body>
<table cellspacing="1" id="myTable">
<tr>
<th width="20"><input type="checkbox" id="selAll" onchange="SelCheckBoxAll();" /></th>
<th width="200">姓名</th>
<th width="200">性別</th>
<th width="200">專業(yè)</th>
<th width="200">愛(ài)好</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>劉備</td>
<td>男</td>
<td>軟件開(kāi)發(fā)</td>
<td>抽煙</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>關(guān)羽</td>
<td>男</td>
<td>國(guó)際貿(mào)易</td>
<td>喝酒</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>張飛</td>
<td>男</td>
<td>園林設(shè)計(jì)</td>
<td>燙頭發(fā)</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>趙云</td>
<td>男</td>
<td>平面設(shè)計(jì)</td>
<td>抽煙</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>黃忠</td>
<td>男</td>
<td>影視制作</td>
<td>玩游戲</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>小喬</td>
<td>女</td>
<td>高級(jí)護(hù)理</td>
<td>唱歌</td>
</tr>
</table>
</body>
</html>
五、訪問(wèn)父子節(jié)點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>節(jié)點(diǎn)信息訪問(wèn)</title>
<style type="text/css">
#father{ width: 1000px; height: 600px; margin: 0px auto;
border: solid 10px red; text-align: center; }
#mySelf{ width: 800px; height: 400px; margin: 0px auto;
border: solid 10px red; text-align: center;}
#son1,#son2{width: 300px; height: 300px; float: left; margin-left: 50px;
border: solid 10px red; text-align: center;}
</style>
<script type="text/javascript">
//不知道父節(jié)點(diǎn)的id,name,tagname的情況下，可采用如下方法
function setFather(objName)
{
var obj = document.getElementById(objName);
var objFather = obj.parentNode;
objFather.style.borderColor = "green";
}
//不知道子節(jié)點(diǎn)的id,name,tagname的情況下，可采用如下方法
function setSons(objName)
{
var obj = document.getElementById(objName);
var objSons = obj.childNodes;
for(var i = 0;i<objSons.length;i++)
{
if(objSons[i].nodeType == 1) //判斷是否為元素節(jié)點(diǎn)
objSons[i].style.borderColor = "green";
}
}
</script>
</head>
<body>
<div style="height: 30px; line-height: 30px; text-align: center;">
<!--<input type="color" id="myColor">-->
<input type="button" value="設(shè)置爸爸邊框顏色" onclick="setFather('mySelf');" />
<input type="button" value="設(shè)置兒子邊框顏色" onclick="setSons('mySelf');" />
</div>
<div id="father">
<h2>爸爸</h2>
<div id="mySelf">
<h2>我自己</h2>
<div id="son1">
<h2>大兒子</h2>
</div>
<div id="son2">
<h2>二兒子</h2>
</div>
</div>
</div>
</body>
</html>
六、動(dòng)態(tài)添加和刪除節(jié)點(diǎn)
案例一：動(dòng)態(tài)添加刪除DIV標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動(dòng)態(tài)添加和刪除節(jié)點(diǎn)</title>
<script type="text/javascript">
var newNode = document.createElement("div");
function createNode()
{
newNode.style.border = "solid 2px red";
newNode.innerHTML = "這是使用JS創(chuàng)建的DIV節(jié)點(diǎn)";
document.body.appendChild(newNode);
}
function removeNode()
{
document.body.removeChild(newNode);
}
</script>
</head>
<body>
<input type="button" value="添加DIV節(jié)點(diǎn)" onclick="createNode();" />
<input type="button" value="刪除DIV節(jié)點(diǎn)" onclick="removeNode();" />
</body>
</html>
案例二：動(dòng)態(tài)添加刪除復(fù)雜頁(yè)面內(nèi)容（添加刪除工作經(jīng)歷）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動(dòng)態(tài)添加和刪除節(jié)點(diǎn)</title>
<style type="text/css">
.myArea{ width: 100%; height: 80px;}
.myDiv{ line-height: 30px;}
</style>
<script type="text/javascript">
var workIndex = 1;
function AddRow()
{
workIndex++;
var objContainer = document.getElementById("myContainer");
var obj = document.createElement("div");
obj.id = "div"+workIndex;
obj.className = "myDiv";
obj.innerHTML = "公司名稱:<input type=\"text\" /> ";
obj.innerHTML += "職位:<input type=\"text\" /> ";
obj.innerHTML += "<a href=\"javascript:RemoveRow('div"+workIndex+"')\">刪除工作經(jīng)歷</a> ";
obj.innerHTML += "<br /> ";
obj.innerHTML += "工作職責(zé)及工作內(nèi)容描述: ";
obj.innerHTML += "<textarea class=\"myArea\"></textarea><hr /> ";
objContainer.appendChild(obj);
}
function RemoveRow(objName)
{
var obj = document.getElementById(objName);
var objContainer = document.getElementById("myContainer");
objContainer.removeChild(obj);
}
</script>
</head>
<body>
<h2>工作經(jīng)歷</h2>
<hr/>
<div id="myContainer">
<div class="myDiv" id="div1">
公司名稱:<input type="text" />
職位:<input type="text" />
<a href="javascript:RemoveRow('div1')">刪除工作經(jīng)歷</a>
<br />
工作職責(zé)及工作內(nèi)容描述:
<textarea class="myArea"></textarea>
<hr />
</div>
</div>
<div style="line-height: 30px; text-align: right;">
<a href="javascript:AddRow();">添加工作經(jīng)歷</a>
</div>
</body>
</html>
七、滾動(dòng)圖片效果
滾動(dòng)圖片效果一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滾動(dòng)圖片</title>
<style type="text/css">
#container{ width: 640px; height: 160px; border: solid 1px gray;
margin: 50px auto; background-color:gainsboro; font-size: 0px;
overflow: hidden;}
#container img{ margin: 0px; padding: 0px;}
</style>
</head>
<body>
<div id="container" onmouseover="StopInterval();" onmouseout="StartInterval();">
<div id="myDiv" style="width: 5000px;">
<img src="MoveImg/1.jpg" />
<img src="MoveImg/2.jpg" />
<img src="MoveImg/3.jpg" />
<img src="MoveImg/4.jpg" />
<img src="MoveImg/5.jpg" />
<img src="MoveImg/6.jpg" />
<img src="MoveImg/7.jpg" />
<img src="MoveImg/1.jpg" />
<img src="MoveImg/2.jpg" />
<img src="MoveImg/3.jpg" />
<img src="MoveImg/4.jpg" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
var myInterval;
// var direction = "left";
function MyMove(){
// var container = document.getElementById("container");
// if (container.scrollLeft == 0) direction = "left"
// if (container.scrollLeft == 480) direction = "right"
// if (direction == "left") container.scrollLeft += 2;
// if (direction == "right") container.scrollLeft -= 2;
var container = document.getElementById("container");
container.scrollLeft+=2;
if(container.scrollLeft >= 160*7)
container.scrollLeft=0;
}
myInterval = setInterval("MyMove()",20);
function StartInterval()
{
myInterval = setInterval("MyMove()",20);
}
function StopInterval()
{
clearInterval(myInterval);
}
</script>
滾動(dòng)圖片效果二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滾動(dòng)圖片</title>
<style type="text/css">
#container{ width: 640px; height: 160px; border: solid 1px gray;
margin: 50px auto; background-color:gainsboro; font-size: 0px;
overflow: hidden;}
#container img{ margin: 0px; padding: 0px;}
</style>
</head>
<body>
<div id="container" onmouseover="StopInterval();" onmouseout="StartInterval();">
<div id="myDiv" style="width: 5000px;">
<img src="MoveImg/1.jpg" />
<img src="MoveImg/2.jpg" />
<img src="MoveImg/3.jpg" />
<img src="MoveImg/4.jpg" />
<img src="MoveImg/5.jpg" />
<img src="MoveImg/6.jpg" />
<img src="MoveImg/7.jpg" />
<img src="MoveImg/1.jpg" />
<img src="MoveImg/2.jpg" />
<img src="MoveImg/3.jpg" />
<img src="MoveImg/4.jpg" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
function MyMove(){
var container = document.getElementById("container");
container.scrollLeft+=2;
if(container.scrollLeft >= 160*7)
container.scrollLeft=0;
if(container.scrollLeft % 160 == 0)
setTimeout("MyMove()",2000);
else
setTimeout("MyMove()",10);
}
MyMove();
</script>
