當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

跟着杨中科学习asp.net之dom

發布時間：2023/12/20 asp.net 29 豆豆

生活随笔收集整理的這篇文章主要介紹了跟着杨中科学习asp.net之dom 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Dom教程

使用javascript操作dom進行dhtml開發,目標:能夠使用javascript操作dom實現常見的dhtml效果

Dom就是html頁面的模型，將每個標簽都做成為一個對象

，javascript通過調用dom中的屬性、方法就可以對網頁中的文本框、層等元素進行編程控制，比如通過操作文本框的dom對象，就可以讀取文本框中的值、設置文本框中的值

Dom也像winform一樣，通過事件、屬性、方法進行編程

Javascript→dom就是c#→.net framework。

Css+javascritp+dom=dhtml

Dom事件

<head>

</head>

</body>

</html>

封裝到函數里面:直接調用

<head>

function bodymousedown()

{ alert('點到我了!'); alert('哈哈!') }

</script>

</head>

</br></br></br></br></br></br></br></br></br></br></br></br>

</br></br></br></br></br></br>

</body>

</html>

<head>

function bodymousedown()

{ alert('點到我了!'); alert('哈哈!') }

function f1() {

alert("我是f1");

}

function f2() {

alert("我是f2");

}

</script>

</head>

</br></br></br></br></br></br></br></br></br></br></br></br>

</br></br></br></br></br></br>

</body>

雙擊效果:

Window對象

<head>

function confirmdemo() {

if (confirm("是否進入?")) {

alert("進入了！");

}

else {

alert("取消進入了！");

}

</script>

</head>

<body>

</body>

</html>

重新導航到另外的頁面

setInterval每隔一段時間執行指定的代碼，第一個參數為代碼

的字符串，第二個參數為間隔時間（單位毫秒），返回值為定時

器的標識

function startInterval() {

setInterval("alert('hello')", 5000)

}

</script>

</head>

<body>

clearInterval取消setInterval的定時執行，相當于Timer中的

Enabled=False。因為setInterval可以設定多個定時，所以

clearInterval要指定清除那個定時器的標識，即setInterval的返回

值。

var intervalId = setInterval("alert('hello')", 5000);

clearInterval(intervalId);

var intervalId;

function startInterval() {

intervalId=setInterval("alert('hello')", 5000)

}

</script>

</head>

<body>

</body>

setTimeout("alert('這是timeout')",2000)

走馬燈

標題欄走馬燈效果

<head>

<title>新學期歡迎新同學</title>

function scroll() {

var title = document.title;

}

</script>

</head>

<body>

</body>

</html>

<head>

<title>新學期歡迎新同學</title>

function scroll() {

var title = document.title;

var firstch = title.charAt(0);

var leftstr = title.substring(1,title.length);

document.title = leftstr + firstch;

}

scroll();

</script>

</head>

<body>

</body>

</html>

<head>

<title>新學期歡迎新同學</title>

function scroll() {

var title = document.title;

var firstch = title.charAt(0);

var leftstr = title.substring(1, title.length);

document.title = leftstr + firstch;

}

setInterval("scroll()", 500)

</script>

</head>

<body>

</body>

</html>

每隔500毫秒滾動,實現走馬燈效果

練習：剛進入的時候還是向左滾動，點擊【向左】按鈕就向左連

續滾動，點擊【向右】按鈕就向右連續滾動。

? 思路1、全局變量，標志當前的滾動方向，當點擊向左的時候

dir="left",向右dir="right"。

? 思路2、scrollleft scroolright,向右滾的時候將scrollleft的Interval

clear掉，然后setInterval啟動scrollright

Dom事件

<head>

btn.value = "ok";

</script>

</head>

<body>

</body>

</html>

<head>

// btn.value = "ok";

</script>

</head>

</body>

</html>

在頁面加載完成后onload才會調用

<head>

// btn.value = "ok";

</script>

</head>

</body>

</html>

<head>

// btn.value = "ok";

</script>

</head>

<body οnlοad="btn.value = 'ok';"

οnbefοreunlοad="window.event.returnValue=' 真的要放棄發帖退出嗎？'">

</body>

</html>

Dom屬性

window對象的屬性1

window.location.href='http://www.itcast.cn'，重新導向新的地址，和navigate方

法效果一樣。window.location.reload() 刷新頁面

window.event是非常重要的屬性，用來獲得發生事件時的信息，事件不局限于

window對象的事件，所有元素的事件都可以通過event屬性取到相關信息。類似

于winForm中的e(EventArg).

? altKey屬性，bool類型，表示發生事件時alt鍵是否被按下，類似的還有

ctrlKey、shiftKey屬性，例子 <input type="button" value="點擊"

οnclick="if(event.altKey){alert('Alt點擊')}else{alert('普通點擊')}" /> ；

? clientX、clientY 發生事件時鼠標在客戶區的坐標；screenX、screenY 發生

事件時鼠標在屏幕上的坐標；offsetX、offsetY 發生事件時鼠標相對于事件

源（比如點擊按鈕時觸發onclick）的坐標。

? returnValue屬性，如果將returnValue設置為false，就會取消默認事件的處

理。在超鏈接的onclick里面禁止訪問href的頁面。在表單校驗的時候禁止提

交表單到服務器，防止錯誤數據提交給服務器、防止頁面刷新。

點擊百度后，頁面會彈出禁止訪問

但是點擊ok后頁面還是會跳轉到百度

現要實現頁面不跳轉

要阻止跳轉：

同樣表單的提交操作類似：

</form>

? srcElement，獲得事件源對象。幾個事件共享一個事件響應函數用。

? keyCode，發生事件時的按鍵值。

? button，發生事件時鼠標按鍵，1為左鍵，2為右鍵，3為左右鍵同時按。

<head>

</head>

<body>

<input type="button" value="href" οnclick="alert(location.href)"/>//顯示當前頁面的地址

</body>

</html>

定時器走馬燈易錯點：

<head>

<title>新學期歡迎新同學</title>

function scrollleft() {

var title = document.title;

var lastch = title.charAt(title.length-1);//易錯返回最后一個字符charAt() 方法可返回指定位置的字符。

var leftstr = title.substring(0, title.length-1);//易錯 substring截取字符串

document.title = lastch + leftstr;

}

// function scrollright() {

// var title = document.title;

// var firstch = title.charAt(title.length);

// var leftstr = title.substring(1, title.length);

// document.title = leftstr + firstch;

// }

// setInterval("scrollleft()", 500)

</script>

</head>

<body>

</body>

</html>

每點擊一次會啟動一個定時器，因此滾動的速度會加快

停止代碼寫法：

<head>

<title>新學期歡迎新同學</title>

function scrollleft() {

var title = document.title;

var lastch = title.charAt(title.length-1);//易錯

var leftstr = title.substring(0, title.length-1);//易錯

document.title = lastch + leftstr;

}

// function scrollright() {

// var title = document.title;

// var firstch = title.charAt(title.length);

// var leftstr = title.substring(1, title.length);

// document.title = leftstr + firstch;

// }

// setInterval("scrollleft()", 500)

</script>

</head>

<body>

</html>

Dom屬性

<head>

</head>

<body>

<input type="button" value="分享本頁給好友" οnclick="clipboardData.setData('Text','我發現這個頁面很黃很暴力！'

+location.href);alert('已經將地址放到粘貼板中，趕快通知qq好友！');"/>

</body>

</html>

<input type="button" value="分享本頁給好友" οnclick="clipboardData.setData('Text','我發現這個頁面很黃很暴力！'

+location.href);alert('已經將地址放到粘貼板中，趕快通知qq好友！');"/>abcdefg

所有元素都有oncopy,onpaste事件

<head>

</head>

<input type="button" value="分享本頁給好友" οnclick="clipboardData.setData('Text','我發現這個頁面很黃很暴力！'

+location.href);alert('已經將地址放到粘貼板中，趕快通知qq好友！');"/>abcdefg

<br/>

</body>

</html>

在網站中復制文章的時候，為了防止那些拷貝黨不添加文章來源，

function modifyClipboard() {

clipboardData.setData('Text', clipboardData.getData('Text')

+ '本文來自傳智播客技術專區，轉載請注明來源。' +

location.href);

}

οncοpy="setTimeout('modifyClipboard()',100)"。用戶復制動作發生

0.1秒以后再去改粘貼板中的內容。100ms只是一個經常取值，

寫1000、10、50、200……都行。不能直接在oncopy里修改粘

貼板。

不能直接在oncopy中執行對粘貼板的操作，因此設定定時器，0.1

秒以后執行，這樣就不再oncopy的執行調用棧上了。

function modifyClipboard() {

clipboardData.setData('Text', clipboardData.getData('Text')

+ '本文來自傳智播客技術專區，轉載請注明來源。' +

location.href);

}

</script>

</head>

<input type="button" value="分享本頁給好友" οnclick="clipboardData.setData('Text','我發現這個頁面很黃很暴力！'

+location.href);alert('已經將地址放到粘貼板中，趕快通知qq好友！');"/>abcdefg

<br/>

</body>

</html>

前進后退導航

window對象的屬性4

history操作歷史記錄

? window.history.back()后退；window.history.forward()前進。也可以

用window.history.go(-1)、window.history.go(1)前進

document屬性。是最復雜的屬性之一。后面講解詳細使用。

第一個頁面:

<head>

<!--<javasctipt type="text/javascript">

function modifyClipboard() {

clipboardData.setData('Text', clipboardData.getData('Text')

+ '本文來自傳智播客技術專區，轉載請注明來源。' +

location.href);

}

</javascript>-->

function modifyClipboard() {

clipboardData.setData('Text', clipboardData.getData('Text')

+ '本文來自傳智播客技術專區，轉載請注明來源。' +

location.href);

}

</script>

</head>

<input type="button" value="分享本頁給好友" οnclick="clipboardData.setData('Text','我發現這個頁面很黃很暴力！'

+location.href);alert('已經將地址放到粘貼板中，趕快通知qq好友！');"/>abcdefg

<br/>

</body>

</html>

第二個頁面:

<head>

</head>

<body>

</body>

</html>

或可寫成<a href="javascript:window.history.back()">后退</a>

這樣,效果是一樣的

document屬性。是最復雜的屬性之一。后面講解詳細使用。

document屬性1

document是window對象的一個屬性，因為使用window對象成員

的時候可以省略window.，所以一般直接寫document

document的方法：

? （1）write：向文檔中寫入內容。writeln，和write差不多，只不過

最后添加一個回車

? <input type="button" value="點擊" οnclick="document.write('<font

color=red>你好</font>')" />

? 在onclick等事件中寫的代碼會沖掉頁面中的內容，只有在頁面加載

過程中write才會與原有內容融合在一起

? <script type="text/javascript">

? document.write('<font color=red>你好</font>');

? </script>

? write經常在廣告代碼、整合資源代碼中被使用。見備注

內容聯盟、廣告代碼、cnzz，不需要被主頁面的站長去維護內容，只

要被嵌入的js內容提供商修改內容，顯示的內容就變了。

1. write

document.write("<a href='http://www.itcast.cn'>傳智播客</a>");

</script>

<head>

</head>

document.write("<a href='http://www.itcast.cn'>傳智播客</a>");

</script>

<body>

<br/>

這是頁面類容

document.write("<a href='http://www.itcast.cn'>傳智播客</a>");

</script>

這是頁面類容

</body>

</html>

Script也可以寫在body里面

<head>

</head>

document.write("<a href='http://www.itcast.cn'>傳智播客</a>");

</script>

<body>

<br/>

這是頁面類容

document.write("<a href='http://www.itcast.cn'>傳智播客</a>");

</script>

這是頁面類容

</body>

</html>

點擊hello按鈕感覺會在新頁面打印出來，但其實還是當前的頁面只有在頁面加載

過程中write才會與原有內容融合在一起（onlick頁面已經加載完成）

廣告聯盟

http://news.baidu.com/newscode.html 百度廣告獲取廣告代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk{color:#000;font-weight:bold;}</style>

</head>

document.write("<a href='http://www.itcast.cn'>傳智播客</a>");

</script>

<body>

<br/>

這是頁面類容

document.write("<a href='http://www.itcast.cn'>傳智播客</a>");

</script>

這是頁面類容

</body>

</html>

可以直接在記事本里面打開別人網站的js代碼

http://news.baidu.com/ns?word=title%3A%E8%AE%A1%E7%AE%97%E6%9C%BA&tn=newsfcu&from=news&cl=2&rn=5&ct=0

Cnzz數據專家

document方法

getElementById方法（非常常用），根據元素的Id獲得對象，網頁中id不能

重復。也可以直接通過元素的id來引用元素，但是有有效范圍、

form1.textbox1之類的問題，因此不建議直接通過id操作元素，而是通過

getElementById

<head>

function btnClick() {

alert(textbox1.value);

}

</script>

</head>

<body>

</body>

</html>

通過控件的id取value值但不推薦這樣使用textbox1.value會出現無法取到的情況

<head>

function btnClick() {

alert(textbox1.value);

}

function btnClick2() {

alert(textbox2.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

錯誤原因：input放在了form中，引用時不能直接引用input的id

正確用法：

<head>

function btnClick() {

alert(textbox1.value);

}

function btnClick2() {

// alert(textbox2.value);

alert(form1.textbox2.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

這樣使用每次要找到form的id，再通過這個id來找控件的id略顯麻煩，因此推薦使用另外一種方法：getElementById（‘控件名’）

<head>

function btnClick() {

var txt = document.getElementById("textbox1");

alert(txt.value);

// alert(textbox1.value);

}

function btnClick2() {

// alert(textbox2.value);

// alert(form1.textbox2.value);

var txt = document.getElementById("textbox2");

alert(txt.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

（*）getElementsByName，根據元素的name獲得對象，由于頁面中元素

的name可以重復，比如多個RadioButton的name一樣，因此

getElementsByName返回值是對象數組。

易錯點：

<head>

function btnClick() {

var radios=document.getElementsByName("gender");

for(var r in radios)

{

alert(r.value);

}

</script>

</head>

<body>

<input type="radio" value="男" name="gender"/>男

<input type="radio" value="女" name="gender"/>女

<input type="radio" value="未知" name="gender"/>未知

</body>

</html>

正確方法：

<head>

function btnClick() {

var radios = document.getElementsByName("gender");

// for(var r in radios)

// {

// alert(r.value);

// }

// }在js中不像C#中的foreach，并不會遍歷每個元素，而是遍歷的key

for (var i = 0; i < radios.length; i++) {

var radio = radios[i];

alert(radio.value);

}

</script>

</head>

<body>

<input type="radio" value="男" name="gender"/>男

<input type="radio" value="女" name="gender"/>女

<input type="radio" value="未知" name="gender"/>未知

</body>

</html>

（*）getElementsByTagName，獲得指定標簽名稱的元素數組，比如

getElementsByTagName("p")可以獲得所有的<p>標簽。

<head>

function btnClick() {

var radios = document.getElementsByName("gender");

// for(var r in radios)

// {

// alert(r.value);

// }

// }在js中不像C#中的foreach，并不會遍歷每個元素，而是遍歷的key

for (var i = 0; i < radios.length; i++) {

var radio = radios[i];

alert(radio.value);

}

function btnClick2() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

input.value = "hello";

}

</script>

</head>

<body>

<input type="radio" value="男" name="gender"/>男

<input type="radio" value="女" name="gender"/>女

<input type="radio" value="未知" name="gender"/>未知

</body>

</html>

案例：點擊一個按鈕，被點擊的按鈕顯示“嗚嗚”，其他按鈕顯示“哈哈”。

<head>

function initEvent() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length;i++ ) {

var input = inputs[i];

input.onclick = btnClick;

}

function btnClick() {

alert("點了！");

}

</script>

</head>

</body>

</html>

<head>

function initEvent() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length;i++ ) {

var input = inputs[i];

// input.onclick = btnClick;

// window.event.srcElement,獲得引發事件的控件

input.onclick = btnClick;

}

function btnClick() {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

if (input == window.event.srcElement) {

input.value = "嗚嗚";

}

else {

input.value = "哈哈";

}

// function btnClick() {

// alert("點了！");

// }

</script>

</head>

</body>

</html>

案例：十秒鐘后協議文本框下的注冊按鈕才能點擊，時鐘倒數。

(btn.disabled = true )

思路：1.注冊按鈕初始狀態為不可用

<head>

</script>

</head>

<body>

</body>

</html>

2. 啟動定時器setInterval,1秒鐘運行一次CountDown的方法，設定初始值10的全局變量，在

countDonw方法中對全局變量倒數

3. 將倒數的值寫到按鈕上（請仔細閱讀協議（還剩8秒））

4. 直到全局變量的值<=0時按鈕可用，并且設定按鈕上文本為同意

<head>

var leftScconds = 10;

var intervalId;

function CountDown() {

var btnReg = document.getElementById("btnReg");

if(btnReg)//如果網頁的加載速度非常慢的話，可能定時器運行的時候控件還沒有加載！

{

if (leftScconds <= 0) {

btnReg.value = "同意";

btnReg.disabled = ""; //或者btnReg.disabled=false;

clearInterval(intervalId);//停止計時器

}

else {

btnReg.value = "請仔細閱讀協議（還剩" + leftScconds + "秒）";

leftScconds--;

}

intervalId=setInterval("CountDown()", 1000);

</script>

</head>

<body>

</body>

</html>

練習：加法計算器。兩個文本框中輸入數字，點擊【=】按鈕將相加的結果

放到第三個文本框中。

<head>

function calClick() {

var value1 = document.getElementById("text1").value;

var value2 = document.getElementById("text2").value;

document.getElementById("text3").value = value1 + value2;

}

</script>

</head>

<body>

<input type="text" id="text1"/>+<input type="text" id="text2"/>=

</body>

</html>

執行的結果為拼接字符串

正確的做法為：（轉換為int類型）

<head>

function calClick() {

var value1 = document.getElementById("text1").value;

var value2 = document.getElementById("text2").value;

value1 = parseInt(value1, 10);

value2= parseInt(value2, 10);

document.getElementById("text3").value = value1 + value2;

}

</script>

</head>

<body>

<input type="text" id="text1"/>+<input type="text" id="text2"/>=

</body>

</html>

注意parseInt(參數一，參數二)

參數一為要轉換的數，參數二為結果的進制數（這里是十進制，所以就是10）

練習：美女時鐘。

<head>

function ReFlash() {

var imgMM = document.getElementById("imgMM");

if (!imgMM) {

return;

}

else {

imgMM.src = "Images/1.jpg";

}

setInterval("ReFlash()",1000);

</script>

</head>

<body>

</body>

</html>

完整代碼如下：

<head>

function ReFlash() {

var imgMM = document.getElementById("imgMM");

if (!imgMM) {

return;

}

// else {

// imgMM.src = "Images/1.jpg";

// }

var now = new Date();

var filename = now.getHours() + "_" + now.getSeconds() + ".jpg";

imgMM.src = "mm/" + filename;

}

setInterval("ReFlash()",1000);

</script>

</head>

<body>

</body>

</html>

<head>

function Fill2Len(i) {

if (i < 10) {

return "0" + i;

}

else {

return i;

}

function ReFlash() {

var imgMM = document.getElementById("imgMM");

if (!imgMM) {

return;

}

// else {

// imgMM.src = "Images/1.jpg";

// }

var now = new Date();

var filename = Fill2Len(now.getHours()) + "_" + Fill2Len(now.getSeconds()) + ".jpg";

imgMM.src = "mm/" + filename;

}

setInterval("ReFlash()",1000);

</script>

</head>

</body>

</html>

轉載于:https://www.cnblogs.com/seclusively/p/3789487.html

總結

以上是生活随笔為你收集整理的跟着杨中科学习asp.net之dom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：一维二维_Excel二维数据转一维，2种
下一篇：单例设计模式-懒汉式(线程不安全)