亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Script標(biāo)簽與訪問(wèn)HTML頁(yè)面詳解

 更新時(shí)間：2014年01月10日 09:21:32   作者：  
本篇文章主要是對(duì)Script標(biāo)簽與訪問(wèn)HTML頁(yè)面進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:

<img src="1_ender1000.jpg" id="img2" alt="" onclick="alert('onclick');" onmouseover="this.src='1_yylklshmyt20090217.jpg'" title="反轉(zhuǎn)圖片" />
    <script type="text/javascript">
    var img2=document.getElementById("img2");
    alert(img2.onmouseover);
    //輸出以下圖片
    </script>

IE輸出:

Firefox:

復(fù)制代碼 代碼如下:

    <img src="1_ender1000.jpg" id="img1" alt="" title="反轉(zhuǎn)圖片" />
     <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';
     }

       //實(shí)際上document.getElementById("img1");得到的就是一個(gè)對(duì)象相當(dāng)于下面:
       /* var img1={src:"1_ender1000.jpg",
            id:"img1",
            alt:"",
            title:"反轉(zhuǎn)圖片"
        }*/
    </script>


復(fù)制代碼 代碼如下:

<%@ 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>無(wú)標(biāo)題頁(yè)</title>
    <script type="text/javascript">
    //循環(huán)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標(biāo)簽與訪問(wèn)HTML頁(yè)面
Script標(biāo)簽
script標(biāo)簽用于在HTML頁(yè)面中嵌入一些可執(zhí)的腳本

 <script>
  //some script goes here
 </script>script標(biāo)簽有三個(gè)特殊的屬性(當(dāng)然,像id,class這樣的屬性它也是有的,HTML頁(yè)面中幾乎每個(gè)元素都可以有class,id屬性)

 <script language="JavaScript">//language屬性指明標(biāo)簽里包含的腳本所使用的語(yǔ)言
  //它有三個(gè)常見的取值JavaScript,JScript,VBScript
  //some script goes here
 </script>
 //對(duì)于JScript只有IE能夠識(shí)別,其它瀏覽器會(huì)忽略這個(gè)標(biāo)簽其里面的內(nèi)容
 //而對(duì)于VBScript,只有Windows上的IE能夠識(shí)別,運(yùn)行
 //然而language屬性后來(lái)在XHTML中被type屬性替代了
 <script type="text/javascript">//取值也變了,text/javascript,text/jscript,text/vbscript
  //some script goes here
 </script>在Web瀏覽器中,我們只會(huì)使用JavaScript,type屬性設(shè)置為text/javascript.事實(shí)上,由于JavaScript十分流行,它幾乎成了腳本的代名詞,而在Web瀏覽器中,即使script標(biāo)簽不加任何屬性,瀏覽器也會(huì)把它當(dāng)成JavaScript

 <script>
  alert("Hello!");
 </script>
 //上面的那段代碼將會(huì)按JavaScript的方式運(yùn)行
 //即使有IE中,不加聲明的script塊也會(huì)當(dāng)成JavaScript執(zhí)行,而不是VBScript
 <script>
  msgbox "Hello!"
 </script>
 //上面的代碼在IE中也會(huì)報(bào)錯(cuò),IE也會(huì)將其當(dāng)成JavaScript執(zhí)行以前在HTML頁(yè)面中,一些標(biāo)簽常會(huì)加一些諸如onclick,onmouseover這樣的屬性,這是一種事件綁定(關(guān)于事件,我們之后會(huì)詳細(xì)講解的,不要急).用于指定當(dāng)HTML頁(yè)面某個(gè)元素上發(fā)生了什么事的時(shí)候去執(zhí)行的JavaScript代碼(當(dāng)然也可以是其它客戶端腳本)

 <img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onclick="alert('你把我點(diǎn)疼了!')"  />上面的代碼將在HTML頁(yè)面上顯示一個(gè)圖像,當(dāng)你用鼠標(biāo)點(diǎn)擊一下時(shí),會(huì)出現(xiàn)一個(gè)彈窗,顯示'你把我點(diǎn)疼了!',onclick屬性的值其實(shí)是一段JavaScript代碼;這就是事件,下面是其它一些簡(jiǎn)單的事件

onclick ,當(dāng)鼠標(biāo)點(diǎn)擊一下時(shí)執(zhí)行一次
onmouseover ,當(dāng)鼠標(biāo)放上去時(shí)執(zhí)行一次
onmouseout ,當(dāng)鼠標(biāo)移出去時(shí)執(zhí)行一次
onmousedown ,當(dāng)鼠標(biāo)按下時(shí)執(zhí)行一次
onmouseup ,當(dāng)鼠標(biāo)在上面松開(彈起)時(shí)執(zhí)行一次
onmousedblclick ,當(dāng)鼠標(biāo)雙擊時(shí)執(zhí)行一次
onload ,當(dāng)對(duì)象加載完成時(shí)執(zhí)行一次
以前網(wǎng)上十分流行的稱之為RollverImages(翻轉(zhuǎn)圖像)的效果其實(shí)就是組合onmouseover,onmouseout這樣的事件和簡(jiǎn)單的JavaScript代碼實(shí)現(xiàn)的

 <img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧"
  onmouseover="this.src='../images/over.jpg'"
  onmouseout="this.src='../images/out.jpg'"  />你可能知道,onmouseover這類的屬性中的字符串將會(huì)在事件發(fā)生時(shí)當(dāng)成腳本來(lái)執(zhí)行,但上面的那些代碼看上去十分模糊

  //為了便于查看,我們將它們提取出來(lái)放在下面
  this.src='../images/over.jpg'
  this.src='../images/out.jpg'分析上面的代碼,我們發(fā)現(xiàn),這其實(shí)是在給一個(gè)對(duì)象this的屬性src賦值,但問(wèn)題是我們并沒有聲明過(guò)一個(gè)叫this的對(duì)象!其實(shí)this對(duì)象是一個(gè)一直存在的一個(gè)對(duì)象,它不能被聲明(this是關(guān)鍵字).這里,this就是指"這個(gè)",指這個(gè)標(biāo)簽!對(duì)于HTML中的元素,JavaScript會(huì)自動(dòng)將其解析成一個(gè)對(duì)象.對(duì)于下面的img標(biāo)簽,會(huì)解析成下面一個(gè)對(duì)象:

  <img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onclick="alert('Hello!')"  />
  //注意,實(shí)際上this是不能手動(dòng)賦值,也不能手動(dòng)聲明的,這里僅僅是演示
  this = {
   src:"../images/stack_heap.jpg",
   alt:"內(nèi)存堆棧",
   onclick:"alert('Hello!')",
   tagName:"IMG"
  };
  //其實(shí)不止這些屬性上面,img標(biāo)簽會(huì)被解析成一個(gè)對(duì)象,具有src,alt等屬性,src,alt屬性是我們寫在HTML里面的,而tagName則是系統(tǒng)自動(dòng)生成的,它表示標(biāo)簽的標(biāo)簽名!我們可以用下面的代碼進(jìn)行測(cè)試:

  <img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onclick="alert(this.src);alert(this.tagName);"  />自然,我們也可以修改它的值,于是翻轉(zhuǎn)圖象的效果就這樣成功了

對(duì)于這樣的行內(nèi)事件綁定,有一些注意點(diǎn).

 <head>
   <script>
   function myFn() {
    alert("圖象加載完成了!");
   }
  </script>
 </head>
 //.............若干若干代碼之后
  <img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onload="myFn()"  />//當(dāng)圖象加載成功時(shí)執(zhí)行一個(gè)函數(shù)
 上面的代碼執(zhí)行是沒問(wèn)題的,然而將順序翻轉(zhuǎn)一下(script可以放在任何合法的地方)

 <img src="../images/stack_heap.jpg" alt="內(nèi)存堆棧" onload="myFn()"  />//當(dāng)圖象加載成功時(shí)執(zhí)行一個(gè)函數(shù)
 //.............若干若干代碼之后
 <script>
  function myFn() {
   alert("圖象加載完成了!");
  }
 </script>HTML頁(yè)面按照從上往下的順序加載執(zhí)行,當(dāng)圖象加載成功后,就去執(zhí)行onload里的內(nèi)容(一個(gè)自定義函數(shù)),但由于script標(biāo)簽在下面若干代碼之后,所以還沒被加載,因此會(huì)出錯(cuò)"myFn is undefined";這就是為什么要將script標(biāo)簽放在head部分的原因,因?yàn)閔ead在body前面,當(dāng)body里的元素加載完成時(shí),head中的script肯定加載完成了

但后來(lái)有了XHTML,有了"三層分離",W3C推出了DOM2,我們需要使用另一種方式綁定事件,獲取HTML頁(yè)面元素.再以上面的圖像為例:

 <head>
   <script>
    var img = document.getElementById("myImg");//我們通過(guò)ID來(lái)獲取它
    //document.getElementById方法有個(gè)參數(shù),一個(gè)字符串ID
    //然后,img就表示了那個(gè)圖像標(biāo)簽對(duì)象
    img.onclick = myFn;
    /*我們不是把JavaScript代碼以字符串符值給它的onclick屬性
    而是直接賦值給它一個(gè)函數(shù)名
    你也會(huì)說(shuō),為什么不是img.onclick=myFn();
    因?yàn)楝F(xiàn)在是在JavaScript代碼區(qū)域中
    加"()"表示執(zhí)行這個(gè)函數(shù),然后將這個(gè)函數(shù)的返回值賦給了img.onclick*/
   function myFn() {
    alert("圖象加載完成了!");
   }
  </script>
 </head>
 //.......
 <img src="../images/stack_heap.jpg" id="myImg" alt="內(nèi)存堆棧" />
 //我們不再加onclick屬性了,而是給它起了個(gè)ID
 但上面的代碼執(zhí)行了仍會(huì)出錯(cuò),因?yàn)镠TML從上往下加載,當(dāng)加載到script時(shí),body部分在下面,還沒有被加載,而JavaScript在瀏覽加載到時(shí)就會(huì)自動(dòng)執(zhí)行.這時(shí),頁(yè)面上的ID為myImg的img還沒被加載到,所以會(huì)出錯(cuò);document.getElementById方法需要一個(gè)字符串形式的ID,而如果頁(yè)面上沒有ID為這個(gè)的元素,它則會(huì)返回null(空對(duì)象);而在下面一行,img.onclick這一句使用了一個(gè)空對(duì)象,所以會(huì)在這里出錯(cuò)!至于解決方法,其實(shí)只是將傳統(tǒng)的行內(nèi)事件綁定的script位置反過(guò)來(lái)放.將script放在所以HTML元素后面!

 <img src="../images/stack_heap.jpg" id="myImg" alt="內(nèi)存堆棧" />
 //..................若干代碼之后
 <script>
   var img = document.getElementById("myImg");
   //這個(gè)時(shí)候,由于script標(biāo)簽放置的位置處在img標(biāo)簽之后,加載到script時(shí)img標(biāo)簽肯定加載完成了
   img.onclick = myFn;
  function myFn() {
   alert("圖象加載完成了!");
  }
 </script>但標(biāo)準(zhǔn)仍然推薦將script放在head部分!那么,這就要用到另一個(gè)事件onload

 window.onload = initAll;//將所有代碼寫在一個(gè)函數(shù)之中,然后注冊(cè)到window對(duì)象的onload事件屬性上
 //window表示窗口對(duì)象,只要窗口打開,它就始終存在,當(dāng)頁(yè)面加載完成后,會(huì)觸發(fā)window對(duì)象上的onload事件
 function initAll() {
  var img = document.getElementById("myImg");
   img.onclick = myFn;
  function myFn() {
   alert("圖象加載完成了!");
  }
 }這樣,代碼就不出錯(cuò)了,不管將腳本放在什么位置,initAll只有當(dāng)頁(yè)面加載完成后才會(huì)被執(zhí)行

訪問(wèn)HTML頁(yè)面:HTML DOM
HTML DOM將整個(gè)頁(yè)面當(dāng)成一個(gè)document對(duì)象,HTML里的標(biāo)簽都要通過(guò)document對(duì)象來(lái)訪問(wèn).而文檔中的每個(gè)標(biāo)簽,又會(huì)轉(zhuǎn)換成一個(gè)對(duì)象

 <p class="demo" title="第一個(gè)段落:DOM樹" id="p1">我們用一個(gè)p標(biāo)簽來(lái)演示</p>它又會(huì)被轉(zhuǎn)換成下面這個(gè)對(duì)象

 //總該記得對(duì)象字面量語(yǔ)法吧
 {
  tagName:"p",
  className:"demo",
  title:"第一個(gè)段落:DOM樹",
  id:"p1",
  innerHTML:"我們用一個(gè)p標(biāo)簽來(lái)演示"
 }
 //你也許會(huì)奇怪,為什么標(biāo)簽的class屬性會(huì)變成對(duì)象的className屬性而不是class.
 //class是JavaScript保留字!!!
 //tagName表示它的標(biāo)簽名,而innerHTML表示它里面的HTML代碼瀏覽將HTML標(biāo)簽轉(zhuǎn)換成這樣的對(duì)象后,在JavaScript中訪問(wèn)該標(biāo)簽的屬性或里面的內(nèi)容就簡(jiǎn)單多了,但問(wèn)題是如何訪問(wèn)到這個(gè)對(duì)象!!

 //首先要給該標(biāo)簽加個(gè)ID,然后使用document.getElementById方法就能夠訪問(wèn)到它了
 window.onload = initAll;//注意,要將所要訪問(wèn)HTML頁(yè)面的代碼都放在window的onload事件處理上!
 function initAll() {
  var p = document.getElementById("p1");
  alert(p.className);
  alert(p.tagName);
  alert(p.title);
  alert(p.id);
  alert(p.innerHTML);
 }訪問(wèn)HTML頁(yè)面就這么簡(jiǎn)單!獲取一個(gè)元素之后,不但可以讀取它的屬性值,還可以設(shè)置它的屬性值!

 window.onload = initAll;
 function initAll() {
  var p = document.getElementById("p1");
  p.title="JavaScript";
  p.className="load";//我們可以更改它的樣式
 }利用這些,我們已經(jīng)能做出一些激動(dòng)人心的事了!

 //一些CSS
 .over {
  color:red;
  background:blue;
  font-size:larger;
 }
 .out {
  color:black;
  background:white;
  font-size:smaller;
 }
 .click {
  color:yellow;
  background:yellow;
  font-size:12px;
 }
 //HTML代碼
 <p id="p1" class="out">一大行文字,它們都是普通的文字!</p>
 //JavaScript代碼
 window.onload = initAll;
 function initAll() {
  var p = document.getElementById("p1");
  p.onclick=clickFn;//這里的事件注冊(cè)方式除了比行內(nèi)注冊(cè)方式少了括號(hào),其它的是一樣的
  p.onmouseover = overFn;
  p.onmouseout = outFn;
 }
 function clickFn() {
  this.className="click";//這里,this也是可用的
  //注意是className,而不是class
 }
 function overFn() {
  this.className="over";
 }
 function outFn() {
  this.className="out";
 }當(dāng)然,獲取頁(yè)面元素不止這一種方法.document.getElementsByTagName方法也能獲取頁(yè)面元素,顧名思意,它是通過(guò)HTML的標(biāo)簽來(lái)獲取元素的,而不是ID. 因?yàn)橐粡圚TML頁(yè)面,一個(gè)ID名稱是唯一的,而標(biāo)簽名則大多數(shù)是相同的,所以,getElementsByTagName方法只有一個(gè)參數(shù),即一個(gè)字符串形式的標(biāo)簽名(tagName),而返回值則是一個(gè)類似數(shù)組的HTML元素列表

 window.onload = initAll;//仍然要寫在window.onload事件處理函數(shù)中
 function initAll() {
  var pList = document.getElementsByTagName("P");
  //為什么要用大寫的P?其實(shí)用小寫p也可以,不區(qū)分大小寫,但由于對(duì)象的tagName總報(bào)告的是大寫的,就....
  alert(pList.length);//與數(shù)組相似,length報(bào)告有多少個(gè)元素,頁(yè)面上有多少個(gè)p標(biāo)簽,就報(bào)告多少
  alert(pList[0].innerHTML);//這樣來(lái)訪問(wèn)第一個(gè)p元素
 }另外,對(duì)于document.getElementsByTagName方法,還可以傳一個(gè)"*"號(hào)作為參數(shù),以獲取頁(yè)面的所有元素,類似于CSS里面的通配符


 window.onload = initAll;
 function initAll() {
 var allThings = document.body.getElementsByTagName("*");
 //可在任何DOM元素上調(diào)用getElementsByTagName方法,在body上調(diào)用此方法時(shí),body外的標(biāo)簽不會(huì)獲取到
 alert(allThings.length);//頁(yè)面上有多少個(gè)標(biāo)簽,就報(bào)告多少(包含DOCTYPE)
 alert(allThings[3].innerHTML);//這樣來(lái)訪問(wèn)第四個(gè)元素
 }其它-javascript:偽協(xié)議
偽協(xié)議不同于因特網(wǎng)上所真實(shí)存在的如http://,https://,ftp://,而是為關(guān)聯(lián)應(yīng)用程序而使用的.如:tencent://(關(guān)聯(lián)QQ),data:(用base64編碼來(lái)在瀏覽器端輸出二進(jìn)制文件),還有就是javascript:

我們可以在瀏覽地址欄里輸入"javascript:alert('JS!');",點(diǎn)轉(zhuǎn)到后會(huì)發(fā)現(xiàn),實(shí)際上是把javascript:后面的代碼當(dāng)JavaScript來(lái)執(zhí)行,并將結(jié)果值返回給當(dāng)前頁(yè)面

類似,我們可以在a標(biāo)簽的href屬性中使用javascript偽協(xié)議

 <a href="javascript:alert('JS!');"></a>
 //點(diǎn)擊這面的鏈接,瀏覽器并不會(huì)跳轉(zhuǎn)到任何頁(yè)面,而是顯示一個(gè)彈窗但javascript:偽協(xié)議有個(gè)問(wèn)題,它會(huì)將執(zhí)行結(jié)果返回給當(dāng)然的頁(yè)面

 <a href="javascript:window.prompt('輸入內(nèi)容將替換當(dāng)前頁(yè)面!','');">A</a>解決方法很簡(jiǎn)單

 <a href="javascript:window.prompt('輸入內(nèi)容將替換當(dāng)前頁(yè)面!','');undefined;">A</a>
 //將undefined加到最后盡管javascript偽協(xié)議提供了一定的靈活性,但在頁(yè)面中盡量不要使用!而對(duì)于調(diào)試JavaScript,javascript偽協(xié)議則顯得十分有用!

相關(guān)文章

最新評(píng)論