HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版）-教案 第14章 JavaScript快速入門

網(wǎng)頁(yè)設(shè)計(jì)與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實(shí)踐□理實(shí)一體習(xí)題復(fù)習(xí)□考核評(píng)價(jià)□其他活動(dòng)□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實(shí)踐任務(wù)理論探究□考核評(píng)價(jià)□匯報(bào)展示□其他活動(dòng)課外：序號(hào)14授課日期月日月日月日月日授課班級(jí)課內(nèi)教學(xué)內(nèi)容：第14章JavaScript快速入門課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，討論JavaScript相關(guān)知識(shí)并以PPT的形式記錄下來(lái)。（2）課后：=1\*GB3①使用鼠標(biāo)事件實(shí)現(xiàn)單擊按鈕切換div元素的CSS樣式的效果。=2\*GB3②將輸入框中的字母全部轉(zhuǎn)換為大寫(xiě)形式。=3\*GB3③使用onsubmit事件捕獲“提交”按鈕的表單提交操作。教學(xué)目標(biāo)：知識(shí)目標(biāo)掌握J(rèn)avaScript基礎(chǔ)知識(shí)。掌握對(duì)元素的動(dòng)態(tài)操作。掌握事件常用方法。能力目標(biāo)能夠獨(dú)立實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)的布局；能夠獨(dú)立使用JavaScript語(yǔ)言。素質(zhì)目標(biāo)較強(qiáng)的專業(yè)知識(shí)和自學(xué)能力；豐富知識(shí)結(jié)構(gòu)，提升專業(yè)知識(shí)；掌握J(rèn)avaScript語(yǔ)言編寫(xiě)技能，理解并應(yīng)用專業(yè)知識(shí)。重點(diǎn)難點(diǎn)及解決方法：（1）重點(diǎn)：JavaScript基礎(chǔ)知識(shí)解決方法：通過(guò)知識(shí)點(diǎn)講解+課堂在線展示相結(jié)合的方法，教師講解JavaScript的基礎(chǔ)知識(shí)，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識(shí)；同時(shí)通過(guò)課堂在線展示，使學(xué)生可以更直觀的了解JavaScript語(yǔ)言的相關(guān)知識(shí)；培養(yǎng)學(xué)生的思維能力和分析問(wèn)題解決問(wèn)題的能力。（2）難點(diǎn)：對(duì)元素的動(dòng)態(tài)操作和事件解決方法：通過(guò)代碼講解+在線演示的的方式教學(xué)，細(xì)致講解網(wǎng)頁(yè)中各種動(dòng)態(tài)效果是如何通過(guò)JavaScript代碼實(shí)現(xiàn)的。幫助學(xué)生掌握J(rèn)avaScript代碼對(duì)網(wǎng)頁(yè)動(dòng)態(tài)交互效果的實(shí)現(xiàn)方法和技巧。從實(shí)用的角度幫助學(xué)生提高專業(yè)知識(shí)。課內(nèi)教學(xué)授課地點(diǎn)：教學(xué)媒體：微課、PPT課件、網(wǎng)頁(yè)圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計(jì)算機(jī)、多媒體教學(xué)廣播軟件、網(wǎng)頁(yè)素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習(xí)效果評(píng)價(jià)方式：對(duì)理論知識(shí)學(xué)習(xí)效果評(píng)價(jià)：采用課堂提問(wèn)、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對(duì)技能的評(píng)價(jià)：教師對(duì)學(xué)生上交網(wǎng)頁(yè)作品按制作要求進(jìn)行綜合性評(píng)價(jià)；對(duì)職業(yè)素養(yǎng)的評(píng)價(jià)：采用學(xué)生自評(píng)、小組內(nèi)評(píng)價(jià)和教師評(píng)價(jià)相結(jié)合的方式。課后小結(jié)：填表說(shuō)明：1.序號(hào)，指該課程授課的順序號(hào)，應(yīng)與授課計(jì)劃一致；2.授課形式在相應(yīng)的選項(xiàng)打“√”。課內(nèi)教學(xué)內(nèi)容及過(guò)程時(shí)間分配方法及手段1.初識(shí)JavaScriptJavaScript語(yǔ)言允許開(kāi)發(fā)者實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果和響應(yīng)用戶交互行為，同時(shí)也被用于服務(wù)器端編程、移動(dòng)應(yīng)用開(kāi)發(fā)等多種平臺(tái)。JavaScript于1995年由Netscape公司的布蘭登·艾奇（BrendanEich）在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)、實(shí)現(xiàn)而成。本節(jié)將介紹JavaScript語(yǔ)言基礎(chǔ)知識(shí)的相關(guān)內(nèi)容。【JavaScript語(yǔ)言的組成】JavaScript語(yǔ)言的組成方式與其他編程語(yǔ)言類似。JavaScript語(yǔ)言主要由標(biāo)識(shí)符、關(guān)鍵字、變量、運(yùn)算符、語(yǔ)句、函數(shù)以及對(duì)象組成。1．標(biāo)識(shí)符編程語(yǔ)言的基本功能是處理數(shù)據(jù)，但是單獨(dú)的數(shù)據(jù)是沒(méi)有任何含義的。例如，一個(gè)數(shù)字1，誰(shuí)也不知道它代表什么。因此，數(shù)字需要用有含義的詞語(yǔ)去指代或者與其關(guān)聯(lián)，例如，1個(gè)蘋(píng)果，此時(shí)數(shù)字1就代表1個(gè)蘋(píng)果。在編程時(shí)對(duì)蘋(píng)果和數(shù)字1處理時(shí)，蘋(píng)果這種名詞就被稱為標(biāo)識(shí)符。標(biāo)識(shí)符就是在編程語(yǔ)言中擁有指定功能的字、詞或符號(hào)。標(biāo)識(shí)符在命名時(shí)要遵循以下幾個(gè)規(guī)則：標(biāo)識(shí)符由數(shù)字、字母、下畫(huà)線（_）、美元符號(hào)（$）等構(gòu)成； 第一個(gè)字符必須是字母、下畫(huà)線或美元符號(hào)； 標(biāo)識(shí)符區(qū)分字母的大小寫(xiě)，推薦使用小寫(xiě)形式或駱駝命名法； 標(biāo)識(shí)符不能與JavaScript中的關(guān)鍵字相同。2．關(guān)鍵字關(guān)鍵字是由JavaScript語(yǔ)言官方規(guī)定的擁有特定功能的標(biāo)識(shí)符。例如，for用于實(shí)現(xiàn)循環(huán)語(yǔ)句。編程人員在自定義標(biāo)識(shí)符時(shí)是不能使用關(guān)鍵字或保留字的。JavaScript語(yǔ)言的系統(tǒng)預(yù)定義關(guān)鍵字如表14.1所示。序號(hào)關(guān)鍵字序號(hào)關(guān)鍵字序號(hào)關(guān)鍵字序號(hào)關(guān)鍵字1abstract17else33instanceof49switch2arguments18enum34int50synchronized3boolean19eval35interface51this4break20export36let52throw5byte21extends37long53throws6case22false38native54transient7catch23final39new55true8char24finally40null56try9class25float41package57typeof10const26for42private58var11continue27function43protected59void12debugger28goto44public60volatile13default29if45return61while14delete30implements46short62with15do31import47static63yield16double32in48super3．變量變量是指用于存放可變化數(shù)據(jù)的標(biāo)識(shí)符。在變量中可以存放不同的值，這樣就可以在同一塊空間中實(shí)現(xiàn)大量數(shù)據(jù)的運(yùn)算和迭代。變量就像一輛貨車，在有限的空間內(nèi)可以運(yùn)送不同的貨物。在使用變量之前需要先創(chuàng)建變量，然后才能使用變量實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)和運(yùn)算。聲明變量是使用固定代碼向計(jì)算機(jī)硬件申請(qǐng)一塊內(nèi)存空間用以存儲(chǔ)數(shù)據(jù)，但是這塊空間內(nèi)是沒(méi)有數(shù)據(jù)的。就像購(gòu)買了一輛卡車，卡車的貨倉(cāng)是空的。聲明變量的語(yǔ)法格式如下。var變量1,變量2,…,變量n其中，var表示聲明或定義變量的關(guān)鍵字。var可以一次聲明一個(gè)或多個(gè)變量，每個(gè)變量之間用英文逗號(hào)分隔。變量的名字由開(kāi)發(fā)者定義，但是要符合標(biāo)識(shí)符的命名規(guī)范。在JavaScript語(yǔ)言中是區(qū)分大小寫(xiě)的，所以變量a和變量A代表兩個(gè)變量。聲明一個(gè)變量truck的代碼如下所示。vartruck;聲明多個(gè)變量truck1、truck2、truck3的代碼如下所示。vartruck1,truck2,truck3;聲明變量就像一輛空卡車，而定義變量就是一輛裝滿貨物的卡車。如果已經(jīng)有了確定的數(shù)據(jù)，此時(shí)就可以使用定義變量的方式來(lái)創(chuàng)建變量。定義變量的語(yǔ)法格式如下。var變量名=初始值;其中，“=”為賦值運(yùn)算符，該運(yùn)算符會(huì)將右側(cè)的初始值賦給左側(cè)的變量。初始值就是要使用變量存儲(chǔ)的數(shù)據(jù)，也就是卡車中裝的貨物。如果要一次性定義多個(gè)變量，其語(yǔ)法格式如下。var變量名1=初始值1,變量名2=初始值2,變量名n=初始值n,;其中，每個(gè)變量直接用逗號(hào)分隔。4．運(yùn)算符運(yùn)算符用于實(shí)現(xiàn)對(duì)數(shù)據(jù)的運(yùn)算。JavaScript語(yǔ)言中常用的運(yùn)算符包括賦值運(yùn)算、算術(shù)運(yùn)算、比較運(yùn)算和邏輯運(yùn)算。按照運(yùn)算符的操作數(shù)，運(yùn)算符又可以分為單目運(yùn)算符、雙目運(yùn)算符和多目運(yùn)算符。常用的運(yùn)算符如表14.2所示。運(yùn)算符功能示例=賦值運(yùn)算，雙目，將賦值運(yùn)算右側(cè)的數(shù)據(jù)賦給左側(cè)的變量a=10或a=b+加法運(yùn)算，雙目，計(jì)算兩個(gè)操作數(shù)的和a+b-減法運(yùn)算，雙目，計(jì)算兩個(gè)操作數(shù)的差a-b*乘法運(yùn)算，雙目，計(jì)算兩個(gè)操作數(shù)的積a*b/除法運(yùn)算，雙目，計(jì)算兩個(gè)操作數(shù)的商a/b%取余運(yùn)算，雙目，計(jì)算兩個(gè)操作數(shù)的余數(shù)a%b++自加運(yùn)算，單目，在操作數(shù)原來(lái)的基礎(chǔ)上加1a++或++a--自減運(yùn)算，單目，在操作數(shù)原來(lái)的基礎(chǔ)上減1a--或--a>大于。左側(cè)的值大于右側(cè)的值時(shí)返回true，否則返回falsea>b>=大于等于。左側(cè)的值大于等于右側(cè)的值時(shí)返回true，否則返回falsea>=b<小于。左側(cè)的值小于右側(cè)的值時(shí)返回true，否則返回falsea<b<=小于等于。左側(cè)的值小于等于右側(cè)的值時(shí)返回true，否則返回falsea<=b!=不等于。左側(cè)與右側(cè)的值不相等時(shí)返回true，否則返回falsea!=b==等于。左側(cè)與右側(cè)的值相等時(shí)返回true，否則返回falsea==b!===嚴(yán)格不等于。左側(cè)與右側(cè)的值不相等或數(shù)據(jù)類型不同時(shí)返回true，否則返回falsea!===b===嚴(yán)格等于。左側(cè)與右側(cè)的值相等且數(shù)據(jù)類型相同時(shí)返回true，否則返回falsea===b&&邏輯與運(yùn)算符。當(dāng)兩個(gè)操作數(shù)同時(shí)為true時(shí)返回true，否則返回falsea&&b！邏輯非運(yùn)算符。只有一個(gè)操作數(shù)，操作數(shù)為true時(shí)，返回false，否則返回true!a||邏輯或運(yùn)算符。當(dāng)兩個(gè)操作數(shù)同時(shí)為false時(shí)返回false，否則返回truea||b5．語(yǔ)句語(yǔ)句是編程語(yǔ)言中的基礎(chǔ)單位，每個(gè)語(yǔ)句代碼都會(huì)實(shí)現(xiàn)一個(gè)或多個(gè)功能。就像寫(xiě)作文，每句話都會(huì)表達(dá)一個(gè)或多個(gè)中心思想。在JavaScript語(yǔ)言中建議每句代碼結(jié)尾處添加英文分號(hào)，以表示語(yǔ)句的結(jié)束。在JavaScript語(yǔ)言中程序默認(rèn)是從源代碼第1行開(kāi)始依次順序執(zhí)行。有幾種語(yǔ)句可以改變程序的執(zhí)行順序，這些語(yǔ)句包括分支控制語(yǔ)句以及循環(huán)控制語(yǔ)句。下面介紹幾個(gè)常見(jiàn)的改變程序執(zhí)行順序的語(yǔ)句。（1）if語(yǔ)句if語(yǔ)句會(huì)為程序提供一條可執(zhí)行的分支。如果滿足if語(yǔ)句的條件，就執(zhí)行該分支，否則跳過(guò)該分支。其語(yǔ)法格式如下。if(條件表達(dá)式){語(yǔ)句塊;}（2）if…else語(yǔ)句if…else語(yǔ)句會(huì)提供兩條可執(zhí)行的分支。如果滿足條件，執(zhí)行第一個(gè)分支，否則執(zhí)行另外一個(gè)分支；兩條分支中必須有一個(gè)分支被執(zhí)行。其語(yǔ)法格式如下。if(條件表達(dá)式){語(yǔ)句塊1;}else{語(yǔ)句塊2;}（3）for語(yǔ)句for語(yǔ)句是標(biāo)準(zhǔn)的循環(huán)語(yǔ)句，也是所有循環(huán)語(yǔ)句中具有執(zhí)行效率的語(yǔ)句。for語(yǔ)句會(huì)在循環(huán)條件為真的前提下不斷循環(huán)執(zhí)行指定的語(yǔ)句，其語(yǔ)法格式如下。for(初始條件;循環(huán)條件;迭代條件){循環(huán)體語(yǔ)句塊;}其中，初始條件是指循環(huán)的起始點(diǎn)，一般為初始化變量的值。循環(huán)條件為條件表達(dá)式，用于控制循環(huán)的次數(shù)，如果表達(dá)式的值為真就進(jìn)入循環(huán)，執(zhí)行循環(huán)體語(yǔ)句塊，否則就停止并跳出循環(huán)。迭代條件用于對(duì)變量進(jìn)行迭代。3個(gè)條件之間要使用英文分號(hào)（；）進(jìn)行分隔。循環(huán)體語(yǔ)句塊是由一條或多條語(yǔ)句組成的。（4）while語(yǔ)句while語(yǔ)句的特點(diǎn)是先判斷條件是否成立，再?zèng)Q定是否執(zhí)行循環(huán)體語(yǔ)句塊。它是for循環(huán)語(yǔ)句的一種變形，其語(yǔ)法格式如下。while(條件表達(dá)式){循環(huán)體語(yǔ)句塊;}（5）do…while語(yǔ)句do…while語(yǔ)句的特點(diǎn)是先執(zhí)行一次指定的語(yǔ)句，然后判斷條件是否成立，再?zèng)Q定是否進(jìn)行第2次循環(huán)。它也是for循環(huán)語(yǔ)句的一種變形，其語(yǔ)法格式如下。do{語(yǔ)句塊;}while(條件表達(dá)式);6．函數(shù)函數(shù)是指一段有固定功能的代碼塊。函數(shù)名用于指代這個(gè)代碼塊。函數(shù)的存在是為了提高代碼的利用率。開(kāi)發(fā)者定義一個(gè)函數(shù)之后就可以重復(fù)地調(diào)用該函數(shù)，這樣就省去了重復(fù)編寫(xiě)同一段代碼的過(guò)程，從而提高了代碼的利用率。函數(shù)的使用就像一個(gè)錘子，當(dāng)人們需要敲釘子的時(shí)候，只需要直接拿起錘子使用即可，而不需要每次敲釘子都先制造一個(gè)錘子，再敲釘子。自定義函數(shù)的語(yǔ)法格式如下。function函數(shù)名(){語(yǔ)句塊;}其中，函數(shù)名由開(kāi)發(fā)者自定義，但是需要符合標(biāo)識(shí)符的命名規(guī)則。語(yǔ)句塊就是用于實(shí)現(xiàn)具體功能的單行或多行代碼。開(kāi)發(fā)者定義函數(shù)之后可以通過(guò)函數(shù)名調(diào)用這個(gè)函數(shù)，調(diào)用的語(yǔ)法格式如下。函數(shù)名();其中，函數(shù)名必須與定義的函數(shù)名完全相同。7．對(duì)象對(duì)象是包含相關(guān)屬性和方法的集合體。其中，屬性就是與對(duì)象產(chǎn)生關(guān)聯(lián)的變量，方法就是與對(duì)象產(chǎn)生關(guān)聯(lián)的函數(shù)。JavaScript提供了多個(gè)對(duì)象，每個(gè)對(duì)象都有對(duì)應(yīng)的屬性和方法。開(kāi)發(fā)者只需要通過(guò)調(diào)用這些對(duì)象的屬性和方法就可以實(shí)現(xiàn)對(duì)元素的操作。對(duì)象調(diào)用對(duì)應(yīng)的屬性或方法時(shí)會(huì)用到點(diǎn)運(yùn)算符，其語(yǔ)法格式如下。對(duì)象.屬性;或?qū)ο?方法();JavaScript中的數(shù)組變量也會(huì)被作為對(duì)象處理，數(shù)組變量可以使用單獨(dú)的變量名來(lái)存儲(chǔ)一系列數(shù)據(jù)。定義數(shù)組變量的語(yǔ)法格式如下。var數(shù)組名=newArray(元素1,元素2,…,元素n);簡(jiǎn)寫(xiě)形式為var數(shù)組名={元素1,元素2,…,元素n};如果數(shù)組變量的元素是一個(gè)字符串，定義數(shù)組變量的語(yǔ)法格式如下。var數(shù)組名="字符串";如果要訪問(wèn)數(shù)組變量中的元素，其語(yǔ)法格式如下。數(shù)組名[下標(biāo)];其中，下標(biāo)用于指定要訪問(wèn)的數(shù)組中的元素，下標(biāo)默認(rèn)從0開(kāi)始。例如，定義一個(gè)數(shù)組a代碼如下所示。vara={1,2,3};如果要訪問(wèn)數(shù)組中的第一個(gè)元素，數(shù)組下標(biāo)值必須為0，代碼如下所示。a[0];【嵌入方式】JavaScript代碼嵌入HTML文本的方式包括行內(nèi)嵌入、內(nèi)部嵌入和外部嵌入3種。行內(nèi)嵌入JavaScript代碼是將代碼添加到標(biāo)簽中，其語(yǔ)法格式如下。<標(biāo)簽名觸發(fā)事件="JavaScript代碼"/>其中，觸發(fā)事件屬于JavaScript方法的一種。內(nèi)部嵌入是將JavaScript代碼添加在<script>與</script>標(biāo)簽之間。<script>與</script>標(biāo)簽可以添加在<head>與</head>標(biāo)簽之間，也可以添加在<body>與</body>標(biāo)簽之間的末尾。如果放在<head>與</head>標(biāo)簽之間，腳本會(huì)在HTML文件全部加載前執(zhí)行，這可能會(huì)導(dǎo)致頁(yè)面顯示延遲或無(wú)法觸發(fā)指定的效果。因此，為了不影響頁(yè)面加載速度，許多開(kāi)發(fā)者傾向于將腳本放在<body>與</body>標(biāo)簽之間的末尾。內(nèi)部嵌入JavaScript代碼的語(yǔ)法格式如下。<head><scripttype="text/javascript">JavaScript代碼;</script></head><body>…網(wǎng)頁(yè)元素…<scripttype="text/javascript">JavaScript代碼;</script></body>其中，<script>標(biāo)簽的type屬性在HTML5標(biāo)準(zhǔn)中可以省略。但是為了兼容，建議添加該屬性。外部嵌入是將JavaScript代碼與HTML文件進(jìn)行分離存放。JavaScript代碼會(huì)存放到文件擴(kuò)展名為.js的文件中，然后在HTML頁(yè)面中使用<script>標(biāo)簽將.js文件引入，<script>標(biāo)簽一般默認(rèn)添加到<head>與</head>標(biāo)簽之間。外部嵌入時(shí)HTML文件中引入.js文件的語(yǔ)法格式如下。<scripttype="text/javascript"src="JavaScript/xxx.js"></script>【注釋】注釋是編寫(xiě)代碼過(guò)程中的重要部分。注釋類似于古文中的對(duì)照翻譯，用于解釋JavaScript代碼，以提高代碼的可讀性。在編寫(xiě)代碼或?qū)Υa后期維護(hù)時(shí)，添加合理和精準(zhǔn)的注釋是十分重要的。JavaScript代碼的注釋可以分為單行注釋和多行注釋兩種。單行注釋以雙斜杠（//）開(kāi)頭，且雙斜杠后面的同行內(nèi)容不會(huì)被執(zhí)行。單行注釋的語(yǔ)法格式如下。alert("顯示的內(nèi)容"); //單行注釋多行注釋以斜杠和星號(hào)（/*）開(kāi)頭、以星號(hào)和斜杠（*/）結(jié)尾。多行注釋可以跨越多行代碼，且在注釋符之間的所有內(nèi)容都不會(huì)被執(zhí)行。多行注釋的語(yǔ)法格式如下。/*多行注釋alert("顯示的內(nèi)容");alert("顯示的內(nèi)容");*/2.對(duì)元素的動(dòng)態(tài)操作對(duì)元素的動(dòng)態(tài)操作是指通過(guò)JavaScript語(yǔ)言提供的對(duì)象中的方法和屬性實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)元素的動(dòng)態(tài)操作，包括獲取元素中的內(nèi)容、修改元素內(nèi)容和屬性值以及修改元素樣式等。【document對(duì)象】document對(duì)象是JavaScript語(yǔ)言提供的一個(gè)重要對(duì)象。通過(guò)document對(duì)象的屬性和方法，可以實(shí)現(xiàn)對(duì)HTML文件頁(yè)面中所有元素的操作。document對(duì)象的常用屬性如表14.3所示。表14.3document對(duì)象的常用屬性屬性功能屬性功能cookie設(shè)置或返回與當(dāng)前文件相關(guān)的所有cookiereferrer返回載入當(dāng)前文件的URLdomain返回當(dāng)前文件的域名title返回當(dāng)前文件的標(biāo)題lastModified返回文件被最后修改的日期和時(shí)間URL返回當(dāng)前文件的URLdocument對(duì)象的常用方法如表14.4所示。表14.4document對(duì)象的常用方法方法功能getElementById()返回?fù)碛兄付╥d屬性值的第一個(gè)對(duì)象getElementsByClassName()返回?fù)碛兄付╟lass屬性值的對(duì)象集合getElementsByTagName()返回帶有指定標(biāo)簽名的對(duì)象集合write()向文件寫(xiě)HTML表達(dá)式或JavaScript代碼【獲取元素中的內(nèi)容】網(wǎng)頁(yè)中有很多元素，我們可以通過(guò)innerHTML屬性獲取元素中的文本內(nèi)容。該屬性需要配合document對(duì)象的查找元素的方法使用，其語(yǔ)法格式如下。查找元素的方法.innerHTML下面通過(guò)3種常用的查找元素方法配合innerHTML屬性獲取元素中的內(nèi)容。1．通過(guò)id屬性獲取元素的內(nèi)容通過(guò)id屬性值查找對(duì)應(yīng)元素需要使用getElementById()方法實(shí)現(xiàn)，其語(yǔ)法格式如下。document.getElementById("id屬性值")使用getElementById()方法只可以獲取一個(gè)id屬性為指定值的元素。如果兩個(gè)元素的id屬性值相同，只會(huì)獲取文件中從上到下第一個(gè)出現(xiàn)的指定元素。2．通過(guò)class屬性獲取元素的內(nèi)容通過(guò)class屬性查找HTML元素需要使用getElementsByClassName()方法實(shí)現(xiàn)，其語(yǔ)法格式如下。document.getElementsByClassName("類屬性值")使用getElementsByClassName()方法可以獲取到所有擁有指定class屬性值的對(duì)應(yīng)元素。該方法返回的值是一個(gè)數(shù)組，然后通過(guò)數(shù)組和下標(biāo)名的方式可以訪問(wèn)指定的元素。3．通過(guò)標(biāo)簽名獲取元素的內(nèi)容通過(guò)標(biāo)簽名查找HTML元素需要使用getElementsByTagName()方法實(shí)現(xiàn)，其語(yǔ)法格式如下。document.getElementsByTagName("標(biāo)簽名")該方法的返回值為一個(gè)數(shù)組，該數(shù)組包含獲取到的所有指定標(biāo)簽的元素。通過(guò)數(shù)組和下標(biāo)可以訪問(wèn)對(duì)應(yīng)的元素?！拘薷脑貎?nèi)容和屬性值】通過(guò)JavaScript代碼可以動(dòng)態(tài)地查找并修改對(duì)應(yīng)元素的內(nèi)容和屬性值。通過(guò)修改內(nèi)容可以實(shí)現(xiàn)交互信息的切換，通過(guò)修改屬性值可以實(shí)現(xiàn)樣式的切換等效果。查找并修改元素的內(nèi)容和屬性值的語(yǔ)法格式如下。查找元素.innerHTML=文本內(nèi)容;查找元素.標(biāo)簽屬性名=屬性值;其中，如果文本內(nèi)容與屬性值是字符串，需要使用英文雙引號(hào)括起來(lái)；如果是變量，則不需要使用雙引號(hào)?！拘薷脑貥邮健吭贘avaScript語(yǔ)言中可以提供style對(duì)象的CSS屬性動(dòng)態(tài)改變?cè)氐臉邮?。該?duì)象的屬性分為12類，包括背景、邊框和邊距、布局、列表、雜項(xiàng)、定位、打印、滾動(dòng)條、表格、文本和規(guī)范，每個(gè)分類又可以細(xì)化為與CSS樣式對(duì)應(yīng)的屬性。使用style對(duì)象的語(yǔ)法格式如下。查找元素.perty="屬性值"其中，查找元素需要根據(jù)具體需求選擇；style表示style對(duì)象不可以省略；property表示具體的屬性名（基本與CSS樣式類似）；屬性值為樣式要修改的具體值（基本與CSS樣式類似）。3.事件JavaScript語(yǔ)言提供了多種事件用于監(jiān)聽(tīng)對(duì)應(yīng)元素上的操作（如單擊元素、輸入信息等操作），然后執(zhí)行對(duì)應(yīng)的代碼。JavaScript語(yǔ)言提供的事件可以分為鼠標(biāo)事件、鍵盤(pán)事件及表單事件等。【事件方法的基本語(yǔ)法】事件需要嵌入元素標(biāo)簽中使用。每個(gè)元素中一次可以嵌入多個(gè)事件，每個(gè)事件之間使用空格進(jìn)行分隔。添加事件的語(yǔ)法格式如下。<標(biāo)簽名事件1="JavaScript代碼"事件n="JavaScript代碼"></標(biāo)簽名>【鼠標(biāo)事件】鼠標(biāo)事件用于監(jiān)聽(tīng)在網(wǎng)頁(yè)中用戶使用鼠標(biāo)對(duì)元素的所有操作，包括單擊、右擊、雙擊、懸浮于元素上方、離開(kāi)元素上方等。在14.2節(jié)中用到的事件onclick就是鼠標(biāo)單擊事件的一種。鼠標(biāo)事件如表14.5所示。事件功能onclick單擊元素時(shí)被此事件捕獲oncontextmenu右擊某個(gè)元素并打開(kāi)上下文菜單時(shí)被此事件捕獲ondblclick雙擊元素時(shí)被此事件捕獲onmousedown在元素上按下鼠標(biāo)按鍵時(shí)被此事件捕獲onmouseenter鼠標(biāo)指針移動(dòng)到元素上時(shí)被此事件捕獲onmouseleave鼠標(biāo)指針從元素上移出時(shí)被此事件捕獲onmousemove鼠標(biāo)指針在元素上方移動(dòng)時(shí)被此事件捕獲onmouseout用戶將鼠標(biāo)指針移出元素或其中的子元素時(shí)被此事件捕獲onmouseover鼠標(biāo)指針移動(dòng)到元素或其中的子元素上時(shí)被此事件捕獲onmouseup在元素上釋放鼠標(biāo)按鍵時(shí)被此事件捕獲【鍵盤(pán)事件】鍵盤(pán)事件用于監(jiān)聽(tīng)當(dāng)用戶使用鍵盤(pán)在元素中輸入信息時(shí)的所有操作。通過(guò)鍵盤(pán)事件，可以捕獲鍵盤(pán)按下按鍵、抬起按鍵以及按下并抬起按鍵3種事件。鍵盤(pán)事件如表14.6所示。事件功能onkeydown按下鍵時(shí)被此事件捕獲onkeypress按下并釋放某個(gè)鍵時(shí)被此事件捕獲onkeyup松開(kāi)鍵時(shí)被此事件捕獲【表單事件】表單元素是用于收集用戶輸入信息的HTML元素。用戶在網(wǎng)頁(yè)中輸入賬號(hào)、密碼等信息時(shí)都需要使用到表單元素。表單相關(guān)的事件包括更改時(shí)觸發(fā)事件