欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js DOM的學(xué)習(xí)筆記

 更新時(shí)間：2011年12月22日 20:12:42   作者：  
DOM是Document Object Model文檔對(duì)象模型的縮寫(xiě)；使用JavaScript操作DOM進(jìn)行DHTML開(kāi)發(fā)
今天學(xué)習(xí)了DOM，做了以下一些基礎(chǔ)練習(xí)……
DOM是Document Object Model文檔對(duì)象模型的縮寫(xiě)；使用JavaScript操作DOM進(jìn)行DHTML開(kāi)發(fā)。
學(xué)習(xí)目標(biāo)：能夠使用JavaScript操作Dom實(shí)現(xiàn)常見(jiàn)的DHTML效果。
參考書(shū)：張孝祥《JavaScript網(wǎng)頁(yè)開(kāi)發(fā)——體驗(yàn)式學(xué)習(xí)教程》
一、DOM的入門(mén)：
1、DOM就是HTML頁(yè)面的模型，將每個(gè)標(biāo)簽都做為一個(gè)對(duì)象，JavaScript通過(guò)調(diào)用DOM中的屬性、方法就可以對(duì)網(wǎng)頁(yè)中的文本框、層等元素進(jìn)行編
程控制。比如通過(guò)操作文本框的DOM對(duì)象，就可以讀取文本框中的值、設(shè)置文本框中的值。
2、DOM也像WinForm一樣，通過(guò)事件、屬性、方法進(jìn)行編程。
3、CSS+JavaScript+DOM=DHTML（即動(dòng)態(tài) HTML，是HTML語(yǔ)言的擴(kuò)展。它可以增加文檔與對(duì)象的演示文稿效果。）
二、事件：
1、事件：<body onmousedown="alert('哈哈')">當(dāng)點(diǎn)擊鼠標(biāo)的時(shí)候執(zhí)行onmousedown中的代碼。有時(shí)間事件響應(yīng)的代碼太多，就放到單獨(dú)的函
數(shù)中：
復(fù)制代碼 代碼如下:

<script type="text/javascript">
function bodymousedown()
{
alert("網(wǎng)頁(yè)被點(diǎn)壞了，賠吧！");
alert("逗你玩的！");
}
</script>
<body onmousedown="bodymousedown()">

請(qǐng)注意：bodymousedown后的括號(hào)不能丟，因?yàn)楸硎菊{(diào)用bodymousedown函數(shù)，而不是onmousedown事件的響應(yīng)函數(shù)是bodymousedown。
2、動(dòng)態(tài)設(shè)置事件：
可以在代碼中動(dòng)態(tài)設(shè)置事件響應(yīng)函數(shù)，就像.Net中"btn.Click+="一樣。
復(fù)制代碼 代碼如下:

<!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>
<title></title>
<script type="text/javascript">
function bodymousedown() {
alert("網(wǎng)頁(yè)被點(diǎn)壞了,賠吧!");
alert("逗你玩的!");
}
function f1() {
alert("我是f1");
}
function f2() {
alert("我是f2");
}
</script>
</head>
<body>
<input type="button" onclick="document.ondblclick=f1" value="關(guān)聯(lián)事件1" />
<input type="button" onclick="document.ondblclick=f2" value="關(guān)聯(lián)事件2" />
</body>
</html>


3、window對(duì)象代表當(dāng)前瀏覽器窗口，使用window對(duì)象的屬性、方法的時(shí)候可以省略window，比如window.alert('a')可以省略成alert('a')
1）alert方法，彈出消息對(duì)話框
2）confirm方法，顯示“確定”、“取消”對(duì)話框，如果按了【確定】按鈕，就返回true，否則就false。
if(confirm("是否繼續(xù)？"))
｛
alert("確定");
｝
else
{ alert("取消");}
3）重新導(dǎo)航到指定的地址：navigate("http://www.microsoft.com/");
4) setInterval每隔一段時(shí)間執(zhí)行指定的代碼，第一個(gè)參數(shù)為代碼的字符串，第二個(gè)參數(shù)為間隔時(shí)間（單位毫秒），返回值為定時(shí)器的標(biāo)識(shí)。如：setInterval("alert('hello')",5000);
復(fù)制代碼 代碼如下:

<!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>
<title>歡迎光臨我的主頁(yè)</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var firstch = title.charAt(0);
var leftstr = title.substring(1, title.length);
document.title = leftstr + firstch;
} //目的是將網(wǎng)頁(yè)的標(biāo)題滾動(dòng)起來(lái)
setInterval("scroll()", 500);
</script>
</head>
<body>
</body>
</html>

5) clearInterval取消setInterval的定時(shí)執(zhí)行，相當(dāng)于Timer中的Enabled=False。因?yàn)閟etInterval可以設(shè)定多個(gè)定時(shí)，所以clearInterval要指定清除那個(gè)定時(shí)器的標(biāo)識(shí)，即setInterval的返回值。var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);
6) setTimeout也是定時(shí)執(zhí)行，但是不像setInterval那樣是定時(shí)執(zhí)行，而是設(shè)定時(shí)間后只執(zhí)行一次，clearTimeout也是清除定時(shí)。
很好區(qū)分：Interval是定時(shí)；Timeout是超時(shí)之意。如：var timeoutld=setTimeout("alert('hello')",2000);
案例：實(shí)現(xiàn)標(biāo)題欄走馬燈的效果，也就是瀏覽器的標(biāo)題文字每隔500ms向右滾動(dòng)一下。提示：標(biāo)題為document.title屬性。
4、1）onload:網(wǎng)頁(yè)加載完畢時(shí)觸發(fā)，瀏覽器是一邊下載文檔、一邊解析執(zhí)行，可能會(huì)出現(xiàn)JavaScript執(zhí)行時(shí)需要操作某個(gè)元素，這個(gè)元素還沒(méi)有加載，如果這樣就要把操作的代碼放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加載完畢時(shí)觸發(fā)，而body 里的onload才是全部加載完成。
2）onunload：網(wǎng)頁(yè)關(guān)閉（或者離開(kāi)）后觸發(fā)。在事件中為 "Window.event.returnValue"賦值（要顯示的警告消息），這樣窗口離開(kāi)（比如前進(jìn)、后退、關(guān)閉）就會(huì)彈出確認(rèn)消息。如：<body onbeforeunload="Window.event.returnValue='真的要放棄發(fā)貼退出嗎？'">
復(fù)制代碼 代碼如下:

<!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>
<title></title>
<script type="text/javascript">
//showModelDialog('HTMLPageWindow.htm');//被攔截
//btn.value = "OK";//報(bào)錯(cuò)，因?yàn)閎tn元素還沒(méi)有被構(gòu)建
</script>
</head>
<body onload="btn.value='OK';" onbeforeunload="window.event.returnValue='真的要放棄發(fā)貼退出嗎？文章會(huì)被丟失!';">
<input type="button" id="btn" value="模態(tài)對(duì)話框" onclick="showModelessDialog('HTMLPageWindow.htm')" />
<input type="text" />
<textarea cols="20" rows="20"></textarea>
</body>
</html>

5、其它事件：
除了有特有的屬性之外，當(dāng)然還有通用的HTML元素的事件：onclick(單擊)、ondblclick(雙擊)、onkeydown(按鍵按下)、onkeyup(按鍵釋放)、onkeypress(點(diǎn)擊按鍵)、onmousedown(鼠標(biāo)按下)、onmousemove(鼠標(biāo)移動(dòng))、onmouseout(鼠標(biāo)離開(kāi)元素范圍)、
onmouseover(鼠標(biāo)移動(dòng)到元素范圍)、onmouseup(鼠標(biāo)按鍵釋放)等。
三、window對(duì)象的屬性
1、window.location.,重新導(dǎo)向新的地址，和navigate方法效果一樣。window.location.reload()刷新頁(yè)面。
2、window.event是非常重要的屬性，用來(lái)獲得發(fā)生事件時(shí)的信息，事件不局限于window對(duì)象的事件，所有元素的事件都可以通過(guò)event屬性取到相關(guān)信息。
1) altKey屬性，boot類型，表示發(fā)生事件時(shí)alt鍵是否被按下，類似的還有ctrlKey、shiftKey屬性，例子<input type="button" value="點(diǎn)擊" onclick="if(event.altKey)
{alert('Alt點(diǎn)擊')}else{alert('普通點(diǎn)擊')}"/>;
復(fù)制代碼 代碼如下:

<!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>
<title></title>
</head>
<body>
<input type="button" value="href" onclick="alert(location.href)" />
<input type="button" value="重定向" onclick="location.href='HTMLPage1.htm'" />
<input type="button" value="點(diǎn)擊" onclick="if(window.event.ctrlKey){alert('按下了Ctrl')}else{alert('普通點(diǎn)擊')}" />
<a onclick="alert('禁止訪問(wèn)！');window.event.returnValue=false;">百毒</a>
<form action="jing.aspx">
<input type="submit" value="提交" onclick="alert('數(shù)據(jù)有問(wèn)題!');window.event.returnValue=false;" />
</form>
</body>
</html>

2) clientX、clientY 發(fā)生事件時(shí)鼠標(biāo)在客戶區(qū)的坐標(biāo)；screenX、screenY發(fā)生事件時(shí)鼠標(biāo)在屏幕上的坐標(biāo)；offsetX、offsetY發(fā)生事件時(shí)鼠標(biāo)相對(duì)于事件源（比如點(diǎn)擊按鈕時(shí)觸發(fā)onclick）的坐標(biāo)。
3）returnValue屬性，如果將returnValue設(shè)置為false，就會(huì)取消默認(rèn)事件的處理。
4）srcElement:獲得事件源對(duì)象
5）KeyCode：發(fā)生時(shí)間時(shí)的按鍵值
6）button：發(fā)生時(shí)間時(shí)鼠標(biāo)的按鍵，1為左鍵，2為右鍵，3為左右鍵同時(shí)按。<body onmousedown="if(event.button==2){alert('禁止復(fù)制')}">

相關(guān)文章

最新評(píng)論