Web前端開發(fā)從學(xué)到用完美實(shí)踐 課件 第14章 初識JavaScript_第1頁
Web前端開發(fā)從學(xué)到用完美實(shí)踐 課件 第14章 初識JavaScript_第2頁
Web前端開發(fā)從學(xué)到用完美實(shí)踐 課件 第14章 初識JavaScript_第3頁
Web前端開發(fā)從學(xué)到用完美實(shí)踐 課件 第14章 初識JavaScript_第4頁
Web前端開發(fā)從學(xué)到用完美實(shí)踐 課件 第14章 初識JavaScript_第5頁
已閱讀5頁，還剩64頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

Web前端開發(fā)第14章：初始JavaScript1本章主要內(nèi)容JavaScript概述JavaScript語法DOM案例：使用JavaScript進(jìn)行表單驗(yàn)證案例：使用JavaScript實(shí)現(xiàn)規(guī)定時(shí)間內(nèi)答題效果21.JavaScript概述JavaScript是一種為網(wǎng)站添加互動(dòng)以及自定義行為的客戶端腳本語言，因此通常只能通過Web瀏覽器去完成操作，而無法像普通意義上的程序那樣獨(dú)立運(yùn)行。31.1什么是JavaScript1.JavaScript概述發(fā)展歷程JavaScript與Java沒有任何的關(guān)系，它由Netscape公司與Sun公司合作開發(fā)。JavaScript最開始的名字是LiveScript，因當(dāng)時(shí)Java風(fēng)靡一時(shí)以及當(dāng)時(shí)正與Sun公司進(jìn)行合作等因素，于是將LiveScript改為了JavaScript。JavaScript的第一個(gè)版本，出現(xiàn)在1996年推出的NetScapeNavigator2瀏覽器中。41.1什么是JavaScript51.JavaScript概述主要特點(diǎn)解釋性執(zhí)行的腳本語言JavaScript的語法基本結(jié)構(gòu)形式與C、C++、Java十分類似，但是在使用之前，不需要先編譯，而是在程序執(zhí)行中被逐行的解釋。簡單弱類型腳本語言JavaScript的簡單性主要在于其基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計(jì)；其次在于其變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。61.1什么是JavaScript1.JavaScript概述相對安全的腳本語言JavaScript作為一種安全性語言，不被允許訪問本地硬盤，且不能將數(shù)據(jù)存入服務(wù)器，不允許對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失或?qū)ο到y(tǒng)的非法訪問。跨平臺性的腳本語言JavaScript依賴于瀏覽器本身，與操作環(huán)境無關(guān)，只要計(jì)算機(jī)能運(yùn)行支持JavaScript的瀏覽器，就可正確執(zhí)行，從而實(shí)現(xiàn)了跨平臺的特性。71.1什么是JavaScript1.JavaScript概述功能概述通常情況下，Web前端開發(fā)者使用JavaScript在給網(wǎng)頁添加交互作用。網(wǎng)頁的結(jié)構(gòu)層是HTML；網(wǎng)頁表現(xiàn)層由CSS構(gòu)成；網(wǎng)頁行為層由JavaScript組成。網(wǎng)頁上的所有元素、屬性和文本都能通過使用DOM（文本對象模型）的腳本來獲得。Web前端開發(fā)者可通過JavaScript來實(shí)現(xiàn)改變網(wǎng)頁內(nèi)容、CSS樣式、對用戶輸入做出反饋等操作。81.2JavaScript的作用2.JavaScript語法用JavaScript編寫的代碼必須通過HTML/XHTML文檔才能執(zhí)行。目前有兩種方法可以調(diào)用JavaScript。方法一：將JavaScript代碼放到文檔<head>或<body>標(biāo)簽中的<script>標(biāo)簽之間。但最好的做法是將<script>標(biāo)簽放到HTML文檔的最后，<body>結(jié)束標(biāo)簽之前。方法二：將JavaScript代碼存為一個(gè)擴(kuò)展名為.js的獨(dú)立文件。典型的做法是在文檔的<head>部分放置一個(gè)<sccript>標(biāo)簽，并把它的src屬性指向該文件。92.1調(diào)用方法2.JavaScript語法方法一：放在<head>標(biāo)簽中。102.1調(diào)用方法2.JavaScript語法方法二：放到HTML文檔的最后，<body>結(jié)束標(biāo)簽之前112.1調(diào)用方法2.JavaScript語法需要主要的是：上述代碼中<script>標(biāo)簽沒有包含傳統(tǒng)的type="text/javascript"屬性，是因?yàn)樵贖TML5規(guī)范中，script的type屬性默認(rèn)是text/javascript，所以可以省略，但是在HTML4.01和XHTML1.0規(guī)范中，type屬性是必須的。122.1調(diào)用方法2.JavaScript語法語法結(jié)構(gòu)JavaScript程序使用Unicode字符集編寫，它是一種區(qū)分大小寫的語言，也就是說，在輸入關(guān)鍵字、變量、函數(shù)名以及所有的標(biāo)識符時(shí)，都必須采取一致的字母大小寫格式。JavaScript會忽略程序中記號之間的空格、制表符和換行符。因?yàn)榭梢栽诔绦蛑腥我馐褂每崭瘛⒅票矸蛽Q行符，因此開發(fā)者可以采用整齊、一致的方式排版JavaScript代碼，增加代碼的可讀性。JavaScript中的簡單語句后面通常都有分號（;）主要是為了分割語句。132.2基本語法2.JavaScript語法JavaScript和Java一樣，它也支持C++、C型的注釋。JavaScript會把處于"http://"和一行結(jié)尾之間的任何文本都當(dāng)做注釋忽略掉。此外"/*"和"*/"之間的文本也會被當(dāng)做注釋，這個(gè)注釋可以跨越多行，但是其中不能有嵌套的注釋。142.2基本語法2.JavaScript語法JavaScript的直接量，就是程序中直接顯示出來的數(shù)據(jù)值。152.2基本語法2.JavaScript語法在JavaScript中標(biāo)識符用來命名變量與函數(shù)名，或者用作JavaScript代碼中某些循環(huán)的標(biāo)簽。JavaScript合法的標(biāo)識符命名規(guī)則為：第一個(gè)字符必須為字母、下劃線或美元符號（$），接下來的字符可以是字母、數(shù)字、下滑線或美元符號，數(shù)字不允許作為首字母出現(xiàn)。另外標(biāo)識符不能和JavaScript中用于其它用途的關(guān)鍵字同名。同時(shí)需要注意的是，JavaScript中的保留字在JavaScript程序中不能被用作標(biāo)識符。162.2基本語法2.JavaScript語法ECMAScriptv3標(biāo)準(zhǔn)化的關(guān)鍵字如表所示。172.2基本語法2.JavaScript語法ECMA擴(kuò)展保留的關(guān)鍵字如表所示。182.2基本語法2.JavaScript語法此外還應(yīng)該避免把JavaScript預(yù)定義的全局變量名或全局函數(shù)名用作標(biāo)識符。避免使用的標(biāo)識符如表所示。192.2基本語法2.JavaScript語法數(shù)據(jù)類型JavaScript是一種弱類型語言，這意味著Web前端開發(fā)者可以在任何階段改變變量的數(shù)據(jù)類型，而無需像強(qiáng)類型語言一樣在聲明變量的同時(shí)還必須同時(shí)聲明變量的數(shù)據(jù)類型。JavaScript的三種基本數(shù)據(jù)類型有：字符串、數(shù)值、布爾值。202.2基本語法2.JavaScript語法字符串字符串由零個(gè)或多個(gè)字符構(gòu)成。字符包括（但不局限于）字母、數(shù)字、標(biāo)點(diǎn)符號和空格。字符串必須包在引號里面，單引號或雙引號都可以。JavaScript可以隨意的選用引號，但最好還是根據(jù)字符串所包含的字符來選擇。即如果字符串包含雙引號，就把整個(gè)字符串包含在引號里面；如果包含單引號就把整個(gè)字符放在雙引號里面。如果一個(gè)字符串中既有單引號又有雙引號，那么這種情況下需要把那個(gè)單引號或雙引號看做一個(gè)普通字符，而不是這個(gè)字符串的結(jié)束標(biāo)志，這種情況下需要對這個(gè)字符進(jìn)行轉(zhuǎn)義，在JavaScript中用反斜線對字符串進(jìn)行轉(zhuǎn)義212.2基本語法2.JavaScript語法數(shù)值如果想給一個(gè)變量賦一個(gè)數(shù)值，不用限定它必須是一個(gè)整數(shù)。JavaScript允許使用帶有小數(shù)點(diǎn)的數(shù)值，并且允許任意位小數(shù)點(diǎn)，這樣的數(shù)稱為浮點(diǎn)數(shù)，數(shù)值主要數(shù)據(jù)類型如下所示。222.2基本語法2.JavaScript語法布爾值布爾數(shù)據(jù)只有兩個(gè)可選值：true或者false。布爾值不是字符串，不能將布爾值用引號括起來。布爾值的false與字符串值“false”是完全不相關(guān)的兩碼事。232.2基本語法2.JavaScript語法變量變量通常指那些會發(fā)生變化的東西，把值存入變量的操作統(tǒng)稱為賦值，在JavaScript中可以用下面的代碼進(jìn)行賦值。在JavaScript中程序可不必直接對變量賦值而無需事先聲明。作出變量聲明如下所示。聲明變量的同時(shí)，完成賦值如下所示。242.2基本語法2.JavaScript語法表達(dá)式與運(yùn)算符表達(dá)式表達(dá)式是JavaScript的一個(gè)“短語”，JavaScript解釋器可以計(jì)算表達(dá)式，從而生成一個(gè)值，最簡單的表達(dá)式是直接量或變量名。直接量表達(dá)式的值就是這個(gè)直接量本身，變量表達(dá)式的值則是該變量所存放或引用的值。通過合并簡單的表達(dá)式可以創(chuàng)建較為復(fù)雜的表達(dá)式，具體代碼如下所示。252.2基本語法2.JavaScript語法運(yùn)算符JavaScript中，加減乘除都是一種操作，這些算術(shù)操作中的每一種都必須借助于相應(yīng)的操作符才能完成，操作符是JavaScript為完成各種操作而定義的一些符號。假設(shè)y=3，則：262.2基本語法2.JavaScript語法賦值運(yùn)算符用于給JavaScript變量賦值，假設(shè)x=6，y=3，則：加號（+）是一個(gè)比較特殊的操作符，它既可以用于數(shù)字，也可用于字符串，代碼如下所示。272.2基本語法2.JavaScript語法流程控制語句If語句if語句是最常見的條件語句，基本語法如下所示。條件必須放在if后面的圓括號中。條件的求值結(jié)果永遠(yuǎn)是一個(gè)布爾值，即只能為true或false。花括號中的語句不管內(nèi)容有多少條，只有在給定條件的求值結(jié)果為true的情況下才會執(zhí)行。例如：282.2基本語法2.JavaScript語法流程控制語句If語句if語句是最常見的條件語句，基本語法如下所示。條件必須放在if后面的圓括號中。條件的求值結(jié)果永遠(yuǎn)是一個(gè)布爾值，即只能為true或false。花括號中的語句不管內(nèi)容有多少條，只有在給定條件的求值結(jié)果為true的情況下才會執(zhí)行。例如：292.2基本語法2.JavaScript語法if語句的第二種形式引入了else從句，當(dāng)給定條件的求值結(jié)果為false時(shí)，就會執(zhí)行這個(gè)else從句，其基本語法結(jié)構(gòu)如下所示：例如：302.2基本語法2.JavaScript語法switch語句一個(gè)if語句會在程序的執(zhí)行流程中產(chǎn)生一個(gè)分支，但是當(dāng)程序含有多個(gè)分支，并且所有的分支都依賴于一個(gè)變量的值時(shí)，多個(gè)if語句重復(fù)性的檢測同一個(gè)變量的值將會產(chǎn)生資源浪費(fèi)。而switch語句正是用來處理這種情況的，它比重復(fù)使用if語句要高效的多，其語法結(jié)構(gòu)如下所示：312.2基本語法2.JavaScript語法在執(zhí)行代碼內(nèi)容中，不同的位置要使用case關(guān)鍵字后加一個(gè)值和一個(gè)冒號來標(biāo)記。當(dāng)執(zhí)行一個(gè)switch語句時(shí)，它先計(jì)算expression的值，然后查找與這個(gè)值匹配的case標(biāo)簽，找到相應(yīng)的case標(biāo)簽，就開始執(zhí)行case標(biāo)簽后的代碼塊語句，如果沒有相匹配的內(nèi)容，就開始執(zhí)行標(biāo)簽default后的語句，如果沒有default標(biāo)簽，就跳過所有的代碼塊。322.2基本語法2.JavaScript語法While循環(huán)while循環(huán)語句與if語句十分相似，它們的語法幾乎一樣，其語法結(jié)構(gòu)如下所示：例如：while循環(huán)語句與if語句唯一的區(qū)別是：只要給定條件的求值結(jié)果是true，包含在花括號里的代碼就將反復(fù)執(zhí)行下去。332.2基本語法2.JavaScript語法在某些場合，我們希望那些包含在循環(huán)語句內(nèi)部的代碼至少執(zhí)行一次，這時(shí)我們便需要使用do循環(huán)了，其語法結(jié)構(gòu)如下所示：例如：do循環(huán)與while循環(huán)最大的區(qū)別便是：對循環(huán)控制條件的求值發(fā)生在每次循環(huán)結(jié)束之后。因此，即使循環(huán)控制條件的首次求值結(jié)果為false，花括號里的語句也至少會被執(zhí)行一次.342.2基本語法2.JavaScript語法For循環(huán)在JavaScript中使用for循環(huán)來執(zhí)行一些代碼十分方便，它類似于while循環(huán)。事實(shí)上，for循環(huán)只是while循環(huán)的一種變體，而for循環(huán)不過是進(jìn)一步改寫為如下所示的緊湊格式而已，其語法結(jié)構(gòu)如下所示：例如：用for循環(huán)來重復(fù)執(zhí)行一些代碼的好處是循環(huán)控制結(jié)構(gòu)更加清晰。與循環(huán)有關(guān)的所有內(nèi)容都包含在for語句的圓括號里面。352.2基本語法2.JavaScript語法for循環(huán)最常見的用途之一便是對某個(gè)數(shù)組里的全體元素進(jìn)行遍歷處理。這往往需要用到數(shù)組的array.length屬性，這個(gè)屬性表示給定數(shù)組里元素的個(gè)數(shù)，切記數(shù)組下標(biāo)是從0開始的，下面的例子是指循環(huán)輸出數(shù)組中的所有元素：362.2基本語法2.JavaScript語法for/in語句在JavaScript中關(guān)鍵字for有兩種使用方式。我們前面已經(jīng)講過其在for循環(huán)中的使用情況，此外它還可以用于for/in語句，其語法結(jié)構(gòu)如下所示：例如：372.2基本語法2.JavaScript語法variable是指一個(gè)變量名，聲明一個(gè)變量的var語句，數(shù)組的一個(gè)元素或者是對象的一個(gè)屬性。object是一個(gè)對象名，或者是計(jì)算結(jié)果為對象的表達(dá)式。JavaScript的數(shù)組是一種特殊的對象，因此for/in循環(huán)可以像枚舉對象屬性一樣枚舉數(shù)組的下標(biāo)。for/in循環(huán)并沒有指定將對象的屬性賦給循環(huán)變量的順序。因?yàn)闆]有什么辦法可以預(yù)先告知其賦值順序，因此在不同的JavaScript版本或者實(shí)現(xiàn)中實(shí)現(xiàn)這一語句的行為可能有所不同。382.2基本語法2.JavaScript語法break語句在JavaScript中break語句會使運(yùn)行的程序立刻退出包含在最內(nèi)層的循環(huán)或者退出一個(gè)switch語句，其語法結(jié)構(gòu)如下所示：由于其用來退出循環(huán)或者switch語句，因此只有當(dāng)它出現(xiàn)在這些語句當(dāng)中時(shí)，這種形式的break語句才能被解析。JavaScript允許關(guān)鍵字break后跟一個(gè)標(biāo)簽名，當(dāng)break和標(biāo)簽一起使用時(shí)，它將跳轉(zhuǎn)到這個(gè)帶有標(biāo)簽的語句的尾部，或者禁止這個(gè)語句。該語句可以是任何用括號括起來的語句，它不一定是循環(huán)語句或者switch語句。392.2基本語法2.JavaScript語法continue語句continue語句與break語句相似，不同的是它不是退出一個(gè)循環(huán)而是開始循環(huán)的一次新迭代，其語法結(jié)構(gòu)如下所示：continue語句只能在while語句、do/while語句、for語句或者for/in語句的循環(huán)體中使用，在其它地方使用將不會被解析。執(zhí)行continue語句時(shí)，封閉循環(huán)的當(dāng)前迭代就會被終止，開始執(zhí)行下一次迭代，這對不同類型的循環(huán)語句來說含義是不同的：在while循環(huán)語句中，會再次檢測循環(huán)開頭的expression，如果值為true，將從頭開始執(zhí)行循環(huán)內(nèi)容；402.2基本語法2.JavaScript語法在do/while循環(huán)中，會跳到循環(huán)的底部，在頂部開始下一次循環(huán)之前會在此先檢測循環(huán)條件；在for循環(huán)中，先計(jì)算increment表達(dá)式，然后再檢測test表達(dá)式以確定是否應(yīng)該執(zhí)行下一次迭代；在for/in循環(huán)中，將以下一個(gè)賦給循環(huán)變量的屬性名開始新的迭代。在while循環(huán)和for循環(huán)中continue語句行為的不同之處在于，while循環(huán)是直接跳到循環(huán)條件處，而在for循環(huán)中則要先計(jì)算increment表達(dá)式，然后再跳轉(zhuǎn)到循環(huán)條件處。412.2基本語法2.JavaScript語法throw語句所謂的異常通常就是指一個(gè)信號，說明發(fā)生了某種異常情況或錯(cuò)誤。拋出一個(gè)異常，就是用信號通知發(fā)生了錯(cuò)誤或異常情況。撲捉一個(gè)異常，就是處理它，即采取必要或適當(dāng)?shù)膭?dòng)作從異?；謴?fù)。在JavaScript中，當(dāng)發(fā)生運(yùn)行時(shí)錯(cuò)誤或程序明確的使用throw語句時(shí)就會拋出異常。使用try/catch/finally語句可以捕獲異常，這個(gè)我們將在下一節(jié)介紹。throw語句使用語法結(jié)構(gòu)如下所示：422.2基本語法2.JavaScript語法expression的值可以是任何類型的，但是通常情況下它是一個(gè)Error對象或Error子類的一個(gè)實(shí)例。例如：在拋出異常時(shí)，JavaScript解釋器會立即停止正常的程序執(zhí)行，跳轉(zhuǎn)到最近的異常處理器，如果拋出異常的代碼塊沒有相關(guān)的catch從句，解釋器將檢查次高級的封閉代碼塊，看它是否有相關(guān)的異常處理器，以此類推，直到找到一個(gè)異常處理器為止。432.2基本語法2.JavaScript語法try/catch/finally語句try/catch/finally語句是JavaScript的異常處理機(jī)制。該語句的try從句只定義異常需要被處理的代碼塊。catch從句跟隨在try從句后面，它是try從句內(nèi)的某個(gè)部分發(fā)生了異常調(diào)用的語句塊。finally從句跟隨在catch從句后，存放清除代碼，無論try從句中發(fā)生了什么，該代碼塊都會被執(zhí)行。雖然catch從句和finally從句都是可選的，但是try從句中至少應(yīng)該有一個(gè)catch從句或finally從句。try、catch、finally從句都以大括號開頭和結(jié)尾，這是必須的語法部分，即使從句只有一條語句，也不能省略大括號。442.2基本語法2.JavaScript語法try/catch/finally示例如下所示：452.2基本語法2.JavaScript語法如果需要多次使用同一段代碼，可以把它們封裝成一個(gè)函數(shù)，函數(shù)就是一組允許在你的代碼里隨時(shí)調(diào)用的語句，每個(gè)函數(shù)實(shí)際上就是一個(gè)短小的腳本。一個(gè)簡單的函數(shù)如下所示：這個(gè)函數(shù)將循環(huán)輸出數(shù)組中的內(nèi)容。現(xiàn)在如果想在自己的腳本中執(zhí)行這一動(dòng)作，可以隨時(shí)調(diào)用如下語句來執(zhí)行這個(gè)函數(shù)：462.3函數(shù)2.JavaScript語法JavaScript內(nèi)置了許多的函數(shù)，在前面多次用到的alert就是其中的一種，這個(gè)函數(shù)需要我們提供一個(gè)參數(shù)，它將彈出一個(gè)對話框來顯示這個(gè)參數(shù)的值。在定義函數(shù)時(shí)，可以為它聲明多個(gè)參數(shù)，只要用逗號將其隔開就行。在函數(shù)內(nèi)部，可以像使用普通變量那樣使用它的任何一個(gè)參數(shù)。一個(gè)進(jìn)行乘法運(yùn)算的函數(shù)如下所示：在定義函數(shù)的腳本后，可以使用如下所示的語法進(jìn)行調(diào)用：472.3函數(shù)2.JavaScript語法然而很多語法調(diào)用這個(gè)函數(shù)只是為了得到最終結(jié)果而非在頁面上展示出來，因此我們需要函數(shù)不僅能夠（以參數(shù)的形式）接收數(shù)據(jù)，還能夠返回?cái)?shù)據(jù)。這時(shí)便需要用到return語句了，改造后的函數(shù)如下所示：482.3函數(shù)2.JavaScript語法變量既可以是全局的，也可以是局部的，全部變量與局部變量的區(qū)別就在于其作用域。全局變量可以在腳本的任何位置被引用，其作用域?yàn)檎麄€(gè)腳本。局部變量只存在于聲明它的那個(gè)函數(shù)的內(nèi)部，在那個(gè)函數(shù)的外部是無法引用它的，作用域僅為某個(gè)特定的函數(shù)。492.3函數(shù)2.JavaScript語法通過var關(guān)鍵字明確的聲明變量時(shí)，如果在函數(shù)中使用了var，那這個(gè)變量就會被視為一個(gè)局部變量，它只存在于這個(gè)函數(shù)的上下文中；反之，如果沒有使用var，那這個(gè)變量就被視為一個(gè)全局變量，如果腳本里已存在一個(gè)與之同名的全局變量，這個(gè)函數(shù)將會改變?nèi)肿兞康闹怠＠纾?02.3函數(shù)2.JavaScript語法對象是一種非常重要的數(shù)據(jù)類型，對象是自包含的數(shù)據(jù)集合，包含在對象里的數(shù)據(jù)可以通過兩種形式訪問，屬性和方法：屬性是隸屬于某個(gè)特定對象的變量；方法是只有某個(gè)特定對象才能調(diào)用的函數(shù)。對象就是一些由一些屬性和方法組合在一起而構(gòu)成的一個(gè)數(shù)據(jù)實(shí)體，在JavaScript里，屬性和方法都使用“點(diǎn)”語法來訪問，其用法如下所示：512.4對象2.JavaScript語法內(nèi)建對象在JavaScript中內(nèi)置了一些對象，比如前面用到的數(shù)組。當(dāng)我們使用new關(guān)鍵字去初始化一個(gè)數(shù)組是，其實(shí)就是在創(chuàng)建一個(gè)Array對象的新實(shí)例，如下代碼所示：Array對象只是諸多JavaScript內(nèi)建對象中的一種。其它的還包含Math對象、Date對象，它們分別提供了許多非常有用的方法供人們處理數(shù)值和日期值，比如，Math對象的round方法可以把十進(jìn)制數(shù)值舍入為一個(gè)與之最接近的整數(shù)，其代碼如下所示：522.4對象2.JavaScript語法Date對象可以用來存儲和檢索與特地日期和時(shí)間有關(guān)的信息。在創(chuàng)建Date對象的新實(shí)例時(shí)，JavaScript解釋器將自動(dòng)的使用當(dāng)前日期和時(shí)間對它進(jìn)行初始化，其代碼如下所示：Date對象提供了getDay()、getHours()、getMonth()等一系列方法，以供人們用來檢索與特定日期有關(guān)的各種信息。532.4對象2.JavaScript語法宿主對象除了內(nèi)置對象以外，還可以在JavaScript腳本里使用一些已經(jīng)預(yù)先定義好的其它對象。這些對象不是由JavaScript語言本身而是由它的運(yùn)行環(huán)境提供的，在Web應(yīng)用中，這個(gè)環(huán)境就是瀏覽器，由瀏覽器提供的預(yù)定義對象被稱為宿主對象。宿主對象包括Form、Image和Element等。我們可以通過這些對象獲得關(guān)于網(wǎng)頁上表單、圖像和各種表單元素等信息，其中最重要的一個(gè)宿主對象便是document對象。542.4對象3.DOM文檔對象模型簡稱DOM，DOM是一種HTML/XHTML頁面的編程接口（API）。它提供了一種文檔的結(jié)構(gòu)化地圖，還有一組方法，以便與所含元素交互。實(shí)際上，它是把我們的標(biāo)記方式轉(zhuǎn)換為JavaScript可以理解的格式。簡單的說就是DOM就像頁面上的所有元素的一個(gè)地圖。我們可以使用它通過名字和元素來找到元素，然后添加、修改或刪除元素及其內(nèi)容。553.1什么是DOM3.DOM在DOM中有三種方法能夠獲取元素節(jié)點(diǎn)，分別是通過元素ID、通過標(biāo)簽名稱和通過類名稱來進(jìn)行獲取。563.2獲取HTML元素3.DOMgetElementByIdDOM提供了一個(gè)名為getElementById的方法，這個(gè)方法將返回一個(gè)與哪個(gè)有著給定id屬性值的元素節(jié)點(diǎn)對應(yīng)的對象。getElementById是document對象特有的函數(shù)。在腳本代碼里，函數(shù)名的后面必須跟有一對圓括號，這對圓括號包含著函數(shù)的參數(shù)。getElementById方法只有一個(gè)參數(shù)：想要獲得的那個(gè)元素的id屬性的值，這個(gè)id屬性值必須放在單引號或者雙引號里，其使用方法如下所示：573.2獲取HTML元素3.DOMgetElementsByTagNamegetElementsByTagName方法返回一個(gè)對象數(shù)組，每個(gè)對象分別對應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素。類似于getElementById，這個(gè)方法也是只有一個(gè)參數(shù)的函數(shù)，它的參數(shù)是標(biāo)簽的名字，其使用方法如下所示：583.2獲取HTML元素3.DOMgetElementsByClassNameHTML5DOM中新增了一個(gè)方法：getElementsByClassName。這個(gè)方法能夠使我們通過class屬性中的類名來訪問元素。不過由于這是一個(gè)新增方法，某些DOM實(shí)現(xiàn)中可能還未支持此方法的解析，其在InternetExplorer5，6，7，8中無效，因此在使用時(shí)要注意其兼容性。getElementsByClassName方法與getElementsByTagName方法相似，也只接受一個(gè)參數(shù)，就是類名，其使用方法如下所示：593.2獲取HTML元素3.DOM增加元素如果我們需要向HTML中添加新元素，那么我們首先便需要?jiǎng)?chuàng)建該元素，然后向已存在的元素追加創(chuàng)建的新元素。document.createElement()方法和document.createTextNode()方法分別用來創(chuàng)建新的Element節(jié)點(diǎn)和Text節(jié)點(diǎn)，而方法node.appendChild()、n

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論