欧美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)論