成果黑馬九期javascript

1、北京傳智播客教育 JavaScript DOM講師：蔣坤課前說(shuō)明目標(biāo)能使用JavaScript操作DOM進(jìn)行DHTML的開(kāi)發(fā)課程內(nèi)容基本的DOM方法與屬性常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)技巧與原則參考書：張孝祥JavaScript網(wǎng)頁(yè)開(kāi)發(fā)體驗(yàn)式學(xué)習(xí)教程犀牛書：JavaScript權(quán)威指南(比較枯燥)為什么要寫DOM- HTML頁(yè)面動(dòng)態(tài)化- 提升用戶的交互性- 提升用戶體驗(yàn)- DOM將整個(gè)HTML頁(yè)模擬成一個(gè)樹(shù)DOM基礎(chǔ)- DOM是HTML的頁(yè)面模型- 如何分析DOM樹(shù)(*)- DOM對(duì)于HTML就好比.NetFramework對(duì)C#- DOM就像WinForm一樣有屬性與事件- DHTML = CSS + DO

2、M(HTML) + JavaScript- 使用IETest或IE Collection進(jìn)行IE上的調(diào)試- 火狐：FireDeBug- Chrome有自帶工具常見(jiàn)Dom事件與方法- getElementById- getElementsByTagName- getAttribute- setAttribute- onclick- onload節(jié)點(diǎn)- HTML的成員在DOM中都是一個(gè)節(jié)點(diǎn)- 節(jié)點(diǎn)的常用屬性- nodeType有12中取值，常用：1元素、2屬性、3文本- nodeName- nodeValue控制文本節(jié)點(diǎn)- childNodes- firstChild- lastChild父節(jié)點(diǎn).

3、firstChild美術(shù)館案例(*)- 添加showPic方法- 點(diǎn)擊不讓圖片跳轉(zhuǎn)- 點(diǎn)擊獲得圖片的鏈接- 點(diǎn)擊圖片切換到指定占位符中- 點(diǎn)擊獲得文本- 點(diǎn)擊顯示文本分離- 向CSS學(xué)習(xí)- 提高效率分工，如何協(xié)作？- 分離JavaScript- 讓文檔與JS之間只有id或class作為紐帶- 例子分析- 為頁(yè)面上所有連接添加onclick事件美術(shù)館案例改版- 分離- 解決向后兼容性- 確?？衫斫? 步驟(可以優(yōu)化連接為圖片預(yù)覽)- 添加一個(gè)prepareGallery的方法(js文件)- 解決id問(wèn)題- 獲得所有的a標(biāo)簽，得到里面的鏈接- 遍歷添加onclick事件- JavaScript優(yōu)化

4、- 不要做過(guò)多假設(shè)- 追加onload事件動(dòng)態(tài)創(chuàng)建HTML內(nèi)容- 常見(jiàn)的老技巧document.Write()方法.innerHTML屬性- DOM提供的方法createElement()createTextNode()appendChild()DOM Core和HTML-DOM- 到此用過(guò)的方法getElementByIdgetElementsByTagNamegetAttributesetAttribute- 以上方法均為DOM Core的組成部分- 對(duì)于HTML-DOM也有許多簡(jiǎn)化document.formselement.srcinnerHTML還是操作Dom節(jié)點(diǎn)操作頁(yè)面的元素的時(shí)候是

5、用innerHTML的方式還是createElement()、appendChild()與removeChild()的方式？1.對(duì)于大量進(jìn)行節(jié)點(diǎn)操作時(shí)，使用innerHTML的方式性能要好于頻繁的Dom操作(有專門用C或C+寫的html解析器。)。先將頁(yè)面的HTML代碼寫好，然后調(diào)用一次innerHTML,而不要反復(fù)調(diào)用innerHTML.2.對(duì)于使用innerHTML=的方式來(lái)刪除節(jié)點(diǎn)，在某些情況下會(huì)存在內(nèi)存問(wèn)題。比如：div下面有很多其他元素，每個(gè)元素都綁定有事件處理程序。此時(shí)，innerHTML只是把當(dāng)前元素從節(jié)點(diǎn)樹(shù)上移除了，但是那些事件處理程序依然占用內(nèi)存。設(shè)計(jì)DHTML的一個(gè)原則-

6、JavaScript效果是很好，但也有不適的時(shí)候- 對(duì)于頁(yè)面，是要反應(yīng)的內(nèi)容- 主要的內(nèi)容不應(yīng)嘗試有js來(lái)加入- 頁(yè)面上應(yīng)該保留主要內(nèi)容，由js來(lái)優(yōu)化HTML-DOM- DOM有一個(gè)HTML的專用版本- 使用VS快速高效的編輯事件-在DOM中有很多事件(演示事件)- onload頁(yè)面加載完畢時(shí)觸發(fā)- onunload頁(yè)面卸載后觸發(fā)- onbeforeunload頁(yè)面卸載前觸發(fā)window對(duì)象(DOM的第一個(gè)對(duì)象)- window相當(dāng)于當(dāng)前瀏覽器窗口- 使用window對(duì)象屬性、方法時(shí)可以省略window(節(jié)約字節(jié)數(shù))- 例如alert、document等window對(duì)象- confirmboo

7、l confirm(提示字符串);- window.navigate(url);winodw.location.href = url;- setInterval(code, delay);clearInterval(intervalId);案例：文本框自增- setTimeoutclearTimeout案例：延遲操作window對(duì)象屬性- window.locationhrefreload()- window.eventevent.altKey、ctrlKey、shiftKeyevent.clientXevent.clientYevent.screenXevent.screenYevent.o

8、ffsetXevent.offsetYwindow對(duì)象- event.button- window.screen獲取屏幕信息(width,height)- 剪貼板(clipboardData對(duì)象)clipboardData.setData(text, value);clipboardData.getData(text);clipboardData.clearData(text);oncopy事件、onpaste事件、oncut事件- 禁止復(fù)制、禁止粘貼、復(fù)制添加版權(quán)案例window對(duì)象- history屬性window.history.back(); window.history.go(-1)

9、;window.history.forward();window.history.go(1);document屬性- document.write()- document.writeln();- getElementById- getElementsByName- getElementsByTagName-案例點(diǎn)擊按鈕變“嗚嗚”，其余變“哈哈”十秒后允許點(diǎn)擊加法計(jì)算器美女時(shí)鐘事件冒泡- 寫一個(gè)層- 層里面一個(gè)p- 里面一個(gè)按鈕- 分別添加onclick事件取消事件冒泡： window.event.cancelBubble = true;動(dòng)態(tài)創(chuàng)建table的另一種方法- 使用.insertRow

10、(-1);表示添加一行- 使用.insertCell(-1);表示添加一個(gè)單元格使用js操作樣式- 可以添加class屬性- 但是class是js的保留字，使用className屬性- 可以通過(guò)style屬性進(jìn)行處理(style是一個(gè)對(duì)象).style. = - 案例練習(xí)案例1：創(chuàng)建三個(gè)輸入文本框，當(dāng)光標(biāo)離開(kāi)文本框的時(shí)候如果文本框?yàn)榭眨瑒t將文本框背景色設(shè)置為紅色，如果不為空則為白色。提示：焦點(diǎn)進(jìn)入控件的事件是onfocus，焦點(diǎn)離開(kāi)控件的事件是onblur。案例2：評(píng)分控件練習(xí)練習(xí)1：超鏈接的單選效果。練習(xí)2：點(diǎn)擊按鈕，表格隔行變色：偶數(shù)行為黃色背景，奇數(shù)行為默認(rèn)顏色。練習(xí)3：放若干文本框，獲

11、得焦點(diǎn)的文本框黃色背景，其他控件背景顏色是白色練習(xí)4：點(diǎn)擊表格行，被點(diǎn)擊的行高亮顯示（背景是黃色），其他行白色背景?？刂茖拥娘@示- 添加一個(gè)按鈕與一個(gè)層- 注冊(cè)點(diǎn)擊事件，設(shè)置層的style.display = none- 設(shè)置表示默認(rèn)- 需要注意樣式的控制只可控制內(nèi)聯(lián)樣式案例：鼠標(biāo)放到超鏈接上的時(shí)候顯示一個(gè)圖片或文字案例：動(dòng)態(tài)改變層的大小(平滑效果)事件范圍- 所有元素均可以添加事件- 點(diǎn)擊事件可以針對(duì)body也可以是document- 但是每個(gè)事件是有作用范圍的案例：跟著鼠標(biāo)移動(dòng)的圖片練習(xí)點(diǎn)擊登錄界面點(diǎn)擊按鈕彈出一個(gè)層，顯示用戶輸入列表高亮顯示一個(gè)列表，鼠標(biāo)移上會(huì)高亮顯示電子時(shí)鐘一個(gè)電子表的案例搜索文本框沒(méi)有獲得焦點(diǎn)的時(shí)候，有灰色的文字，獲得焦點(diǎn)后文字消失，等待用戶輸入，如果沒(méi)有文字，失去焦點(diǎn)后出現(xiàn)灰色的提示文字form對(duì)象- 調(diào)用事件方法click()、focus()、blur()- 提交表單- 使用submit標(biāo)簽ss- 用button標(biāo)簽，調(diào)用submit標(biāo)簽的click方法- onsubmit事件- form對(duì)象的submit方法String正則表達(dá)式- 匹配test聲明正則表達(dá)式對(duì)象(雙斜線之間)reg.test方法- 提取execreg.exec方法- String提供的方法- 替換replace- 全局模式模擬trim方