萬盛學電腦網 >> 腳本專題 >> javascript >> Script標簽與訪問HTML頁面詳解
Script標簽與訪問HTML頁面詳解
本篇文章主要是對Script標簽與訪問HTML頁面進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
復制代碼 代碼如下: <img src="1_ender1000.jpg" id="img2" alt="" onclick="alert('onclick');" onmouseover="this.src='1_yylklshmyt20090217.jpg'" title="反轉圖片" /> <script type="text/javascript"> var img2=document.getElementById("img2"); alert(img2.onmouseover); //輸出以下圖片 </script> IE輸出:
Firefox:
代碼如下:
<img src="1_ender1000.jpg" id="img1" alt="" title="反轉圖片" />
<script type="text/javascript">
var img1=document.getElementById("img1");
img1.onmouseover=rotate;
function rotate(){
this.src='1_yylklshmyt20090217.jpg';
}
var img1=document.getElementById("img1");
img1.onmouseover=onmouseover;
function onmouseover(event){
this.src='1_yylklshmyt20090217.jpg';
}
//實際上document.getElementById("img1");得到的就是一個對象相當於下面:
/* var img1={src:"1_ender1000.jpg",
id:"img1",
alt:"",
title:"反轉圖片"
}*/
</script>
代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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 runat="server">
<title>無標題頁</title>
<script type="text/javascript">
//循環img圖片的所有屬性,可以看到許多沒有定義的屬性
window.onload=repeat;
function repeat(){
var img1=document.getElementById('img1');
for(var i in img1){
alert(i+":"+img1[i]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="1_ender1000.jpg" id="img1" alt="" />
</div>
</form>
</body>
</html>
Script標簽與訪問HTML頁面
Script標簽
script標簽用於在HTML頁面中嵌入一些可執的腳本
<script>
//some script goes here
</script>script標簽有三個特殊的屬性(當然,像id,class這樣的屬性它也是有的,HTML頁面中幾乎每個元素都可以有class,id屬性)
<script language="JavaScript">//language屬性指明標簽裡包含的腳本所使用的語言
//它有三個常見的取值JavaScript,JScript,VBScript
//some script goes here
</script>
//對於JScript只有IE能夠識別,其它浏覽器會忽略這個標簽其裡面的內容
//而對於VBScript,只有Windows上的IE能夠識別,運行
//然而language屬性後來在XHTML中被type屬性替代了
<script type="text/javascript">//取值也變了,text/javascript,text/jscript,text/vbscript
//some script goes here
</script>在Web浏覽器中,我們只會使用JavaScript,type屬性設置為text/javascript.事實上,由於JavaScript十分流行,它幾乎成了腳本的代名詞,而在Web浏覽器中,即使script標簽不加任何屬性,浏覽器也會把它當成JavaScript
<script>
alert("Hello!");
</script>
//上面的那段代碼將會按JavaScript的方式運行
//即使有IE中,不加聲明的script塊也會當成JavaScript執行,而不是VBScript
<script>
msgbox "Hello!"
</script>
//上面的代碼在IE中也會報錯,IE也會將其當成JavaScript執行以前在HTML頁面中,一些標簽常會加一些諸如onclick,onmouseover這樣的屬性,這是一種事件綁定(關於事件,我們之後會詳細講解的,不要急).用於指定當HTML頁面某個元素上發生了什麼事的時候去執行的JavaScript代碼(當然也可以是其它客戶端腳本)
<img src="../images/stack_heap.jpg" alt="內存堆棧" onclick="alert('你把我點疼了!')" />上面的代碼將在HTML頁面上顯示一個圖像,當你用鼠標點擊一下時,會出現一個彈窗,顯示'你把我點疼了!',onclick屬性的值其實是一段JavaScript代碼;這就是事件,下面是其它一些簡單的事件
onclick ,當鼠標點擊一下時執行一次
onmouseover ,當鼠標放上去時執行一次
onmouseout ,當鼠標移出去時執行一次
onmousedown ,當鼠標按下時執行一次
onmouseup ,當鼠標在上面松開(彈起)時執行一次
onmousedblclick ,當鼠標雙擊時執行一次
onload ,當對象加載完成時執行一次
以前網上十分流行的稱之為RollverImages(翻轉圖像)的效果其實就是組合onmouseover,onmouseout這樣的事件和簡單的JavaScript代碼實現的
<img src="../images/stack_heap.jpg" alt="內存堆棧"
onmouseover="this.src='../images/over.jpg'"
onmouseout="this.src='../images/out.jpg'" />你可能知道,onmouseover這類的屬性中的字符串將會在事件發生時當成腳本來執行,但上面的那些代碼看上去十分模糊
//為了便於查看,我們將它們提取出來放在下面
this.src='../images/over.jpg'
this.src='../images/out.jpg'分析上面的代碼,我們發現,這其實是在給一個對象this的屬性src賦值,但問題是我們並沒有聲明過一個叫this的對象!其實this對象是一個一直存在的一個對象,它不能被聲明(this是關鍵字).這裡,this就是指"這個",指這個標簽!對於HTML中的元素,JavaScript會自動將其解析成一個對象.對於下面的img標簽,會解析成下面一個對象:
<img src="../images/stack_heap.jpg" alt="內存堆棧" onclick="alert('Hello!')" />
//注意,實際上this是不能手動賦值,也不能手動聲明的,這裡僅僅是演示
this = {
src:"../images/stack_heap.jpg",
alt:"內存堆棧",
onclick:"alert('Hello!')",
tagName:"IMG"
};
//其實不止這些屬性上面,img標簽會被解析成一個對象,具有src,alt等屬性,src,alt屬性是我們寫在HTML裡面的,而tagName則是系統自動生成的,它表示標簽的標簽名!我們可以用下面的代碼進行測試:
<img src="../images/stack_heap.jpg" alt="內存堆棧" onclick="alert(this.src);alert(this.tagName);" />自然,我們也可以修改它的值,於是翻轉圖象的效果就這樣成功了
對於這樣的行內事件綁定,有一些注意點.
<head>
<script>
function myFn() {
alert("圖象加載完成了!");
}
</script>
</head>
//.............若干若干代碼之後
<img src="../images/stack_heap.jpg" alt="內存堆棧" onload="myFn()" />//當圖象加載成功時執行一個函數
上面的代碼執行是沒問題的,然而將順序翻轉一下(script可以放在任何合法的地方)
<img src="../images/stack_heap.jpg" alt="內存堆棧" onload="myFn()" />//當圖象加載成功時執行
javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved