轉(zhuǎn)換課程方向

1、DOM編程和正則表達(dá)式第四章回顧與作業(yè)點(diǎn)評(píng)如何在網(wǎng)頁(yè)中調(diào)用一個(gè)JavaScript函數(shù)？JavaScript修改CSS樣式的常用方法有哪些？預(yù)習(xí)檢查W3C標(biāo)準(zhǔn)定義的DOM由哪三部分組成？在HTML DOM中，Table對(duì)象、TableRow對(duì)象、TableCell對(duì)象分別代表什么？正則表達(dá)式有幾種構(gòu)造方式，分別是什么？RegExp對(duì)象使用什么方法匹配正則表達(dá)式？本章任務(wù)制作動(dòng)態(tài)添加表格的特效制作嚴(yán)謹(jǐn)?shù)碾娮余]箱驗(yàn)證頁(yè)面本章目標(biāo)使用HTML DOM操作動(dòng)態(tài)修改HTML元素內(nèi)容使用正則表達(dá)式驗(yàn)證復(fù)雜規(guī)則的表單項(xiàng)DOM的應(yīng)用DOM的典型應(yīng)用刪除單件商品修改商品數(shù)量DOM的組成W3C規(guī)定的三類DOM標(biāo)準(zhǔn)

2、接口Core DOM，適用于各種結(jié)構(gòu)化文檔XML DOM，專用于XML文檔HTML DOM，專用于HTML文檔選用DOM標(biāo)準(zhǔn)接口，結(jié)合支持的編程語言訪問DOM樹，如Java、JavaScript、C#等核心DOMJava OOP學(xué)過HTML DOM對(duì)象-table對(duì)象如何在頁(yè)面中動(dòng)態(tài)操作表格的行與列？表格相關(guān)對(duì)象4-1表格相關(guān)對(duì)象table表格對(duì)象 tableRow表格行對(duì)象 tableCell單元格對(duì)象 表格相關(guān)對(duì)象4-2table表格對(duì)象類別名稱描述屬性rows返回包含表格中所有行的一個(gè)數(shù)組方法insertRow()在表格中插入一個(gè)新行deleteRow()從表格中刪除一行代碼片段tabl

3、eObject.rows tableObject.insertRow(index)deleteRow(index)tab表格對(duì)象的屬性和方法的用法 代碼片段tableRowObject.insertCell(index) tableRowObject.deleteRow(index)表格相關(guān)對(duì)象4-3tableRow表格行對(duì)象用法示例 類別名稱描述屬性cells返回包含行中所有單元格的一個(gè)數(shù)組rowIndex返回該行在表中的位置方法insertCell()在一行中的指定位置插入一個(gè)空的標(biāo)簽deleteCell()刪除行中指定的單元格代碼片段cell2.innerHTML=“改變單元格的HTML

4、內(nèi)容;cell2.align=center;表格相關(guān)對(duì)象4-4tableCell單元格行對(duì)象用法示例 類別名稱描述屬性cellIndex返回單元格在某行單元格集合中的位置innerHTML設(shè)置或返回單元格的開始標(biāo)簽和結(jié)束標(biāo)簽之間的HTMLalign設(shè)置或返回單元格內(nèi)部數(shù)據(jù)的水平排列方式className設(shè)置或返回元素的class屬性用table對(duì)象重新實(shí)現(xiàn)表格操作2-1function addRow() var newRow=document.getElementById(myTable).insertRow(2); var col1=newRow.insertCell(0); col1.in

5、nerHTML=幸福從天而降; var col2=newRow.insertCell(1); col2.innerHTML=18.5; col2.align=center; 實(shí)現(xiàn)“增加一行”的操作 增加一個(gè)行對(duì)象，然后插入單元格，最后設(shè)置單元格內(nèi)容演示示例1：使用HTML DOM操作表格用table對(duì)象重新實(shí)現(xiàn)表格操作2-2function delRow() document.getElementById(myTable).deleteRow(1); function updateRow() var uRow=document.getElementById(myTable).rows0; uR

6、ow.className=title;實(shí)現(xiàn)“刪除第2行”的操作 實(shí)現(xiàn)“修改標(biāo)題”的操作使用class樣式屬性直接修改標(biāo)題樣式演示示例1：使用HTML DOM操作表格指導(dǎo)訂單的刪除和增加2-1需求說明實(shí)現(xiàn)訂單表格的刪除和增加完成時(shí)間：25分鐘指導(dǎo)訂單的刪除和增加2-2實(shí)現(xiàn)思路和關(guān)鍵代碼使用集合rows和屬性length計(jì)算當(dāng)前表格中的行數(shù) 使用tableRow對(duì)象插入新行時(shí)，設(shè)置行id屬性，方便后續(xù)刪除 var addTable=document.getElementById(order); var row_index=addTable.rows.length-1; 索引從0開始，所以總長(zhǎng)度-1

7、 newRow.id=row+row_index; 插入ID號(hào)，產(chǎn)生效果為：，方便后續(xù)傳遞行號(hào)參數(shù)給刪除函數(shù)delRow(rowId)完成時(shí)間：25分鐘共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解指導(dǎo)訂單的修改2-1需求說明實(shí)現(xiàn)表格的修改訂單功能點(diǎn)擊修改按鈕修改訂單，點(diǎn)擊確定按鈕修改生效指導(dǎo)訂單的修改2-2實(shí)現(xiàn)思路 “修改”按鈕、 “確定”按鈕相關(guān)函數(shù)傳遞的參數(shù)使用當(dāng)前行的id號(hào) 修改功能：使用lastChild訪問最后一個(gè)單元格中的“修改”按鈕完成時(shí)間：20分鐘小結(jié)W3C提供了DOM的哪三類標(biāo)準(zhǔn)？HTML DOM對(duì)象-table相關(guān)對(duì)象包括哪些？分別包含哪些常用的屬性、

8、方法？正則表達(dá)式使用正則表達(dá)式的優(yōu)點(diǎn)簡(jiǎn)潔的代碼嚴(yán)謹(jǐn)?shù)尿?yàn)證文本框中的內(nèi)容什么是正則表達(dá)式正則表達(dá)式是一個(gè)描述字符模式的對(duì)象定義正則表達(dá)式表達(dá)式的模式定義正則表達(dá)式普通方式var reg=new RegExp(white);var reg=new RegExp(white,g);構(gòu)造函數(shù)var reg=/white/;var reg=/white/g;var reg=/表達(dá)式/附加參數(shù)var reg=new RegExp(表達(dá)式, 附加參數(shù))；正則表達(dá)式的模式簡(jiǎn)單模式復(fù)合模式var reg=/china/;var reg=/abc8/;var reg=/w+$/;var reg=/w+w+.a-z

9、A-Z2,3(.a-zA-Z2,3)?$/; RegExp對(duì)象 RegExp對(duì)象的方法方 法描 述exec()檢索字符中是正則表達(dá)式的匹配，返回找到的值，并確定其位置test()檢索字符串中指定的值，返回true或falseString對(duì)象String對(duì)象的方法方 法描 述match()找到一個(gè)或多個(gè)正則表達(dá)式的匹配search()檢索與正則表達(dá)式相匹配的值replace()替換與正則表達(dá)式匹配的字符串split()把字符串分割為字符串?dāng)?shù)組RegExp對(duì)象的屬性RegExp對(duì)象的屬性屬 性描 述globalRegExp對(duì)象是否具有標(biāo)志gignoreCaseRegExp對(duì)象是否具有標(biāo)志imult

10、ilineRegExp對(duì)象是否具有標(biāo)志m正則表達(dá)式符號(hào)正則表達(dá)式常用符號(hào)正則表達(dá)式重復(fù)字符符 號(hào)描 述/代表一個(gè)模式的開始和結(jié)束匹配字符串的開始$匹配字符串的結(jié)束s任何空白字符S任何非空白字符d匹配一個(gè)數(shù)字字符，等價(jià)于0-9D除了數(shù)字之外的任何字符，等價(jià)于0-9w匹配一個(gè)數(shù)字、下劃線或字母字符，等價(jià)于A-Za-z0-9_W任何非單字字符，等價(jià)于a-zA-z0-9_.除了換行符之外的任意字符符 號(hào)描 述n匹配前一項(xiàng)n次n,匹配前一項(xiàng)n次，或者多次n,m匹配前一項(xiàng)至少n次，但是不能超過m次*匹配前一項(xiàng)0次或多次，等價(jià)于0,+匹配前一項(xiàng)1次或多次，等價(jià)于1,？匹配前一項(xiàng)0次或1次，也就是說前一項(xiàng)是可

11、選的，等價(jià)于0,1正則表達(dá)式的應(yīng)用適用場(chǎng)合用戶名、密碼、電子郵箱、手機(jī)號(hào)碼、身份證號(hào)碼、生日、郵政編碼、固定電話驗(yàn)證年齡對(duì)年齡進(jìn)行驗(yàn)證，年齡必須在0120之間10-99這個(gè)范圍都是兩位數(shù)，十位是1-9，個(gè)位是0-9，正則表達(dá)式為1-9d0-9這個(gè)范圍是一位，正則表達(dá)式為d100-119這個(gè)范圍是三位數(shù)，百位是1，十位是0-1，個(gè)位是0-9，正則表達(dá)式為10-1d根據(jù)以上可知，所有年齡的個(gè)位都是0-9，當(dāng)百位是1時(shí)十位是0-1，當(dāng)年齡為兩位數(shù)時(shí)十位是1-9，因此0-119這個(gè)范圍的正則表達(dá)式為(10-1|1-9)?d年齡120是單獨(dú)的一種情況，需要單獨(dú)列出來演示示例2：驗(yàn)證年齡正則表達(dá)式：(10

12、-1|1-9)?d驗(yàn)證電子郵件地址驗(yàn)證電子郵件地址電子郵件格式中必須有符號(hào)“”和“.”符號(hào)前的內(nèi)容、和.中間的內(nèi)容都是由字母和數(shù)字組成，并且位數(shù)不限制，正則表達(dá)式為w+符號(hào)一般是一個(gè)或兩個(gè).組成，并且符號(hào).后一般由兩位或三位字母組成，正則表達(dá)式為 a-zA-Z2,3(.a-zA-Z2,3)?演示示例3：驗(yàn)證電子郵件地址正則表達(dá)式：/w+w+(.a-zA-Z2,3)1,2$/練習(xí)驗(yàn)證注冊(cè)頁(yè)面需求說明使用正則表達(dá)式驗(yàn)證博客園注冊(cè)頁(yè)面，驗(yàn)證用戶名、密碼、電子郵箱、手機(jī)號(hào)碼和生日：用戶名只能由英文字母和數(shù)字組成，長(zhǎng)度為4-16個(gè)字符，并且以英文字母開頭密碼只能由英文字母和數(shù)字組成，長(zhǎng)度為4-10個(gè)字符生日的年份在1900-2009之間，生日格式為1980-5-12或1988-05-04的形式完成時(shí)間：30分鐘 共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解小結(jié)下面正則表達(dá)式中（ ）能正確驗(yàn)證身份證號(hào)，身份證號(hào)碼由15位或18位數(shù)字組成。A. var regMycard=/d15$|d18$/;B. var regMyc