版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
北京傳智播客教育JavaScript
DOM編程講師：趙老師課程說(shuō)明內(nèi)容：使用JavaScript操作DOM進(jìn)行DHtml開(kāi)發(fā)。目標(biāo)：能夠使用JavaScript操作DOM實(shí)現(xiàn)常見(jiàn)的DHtml效果。參考書(shū)：張孝祥《JavaScript網(wǎng)頁(yè)開(kāi)發(fā)——體驗(yàn)式學(xué)習(xí)教程》為什么要學(xué)習(xí)JavaScript操作DOMJavaScript最終是要操作Html頁(yè)面，讓Html變成DHtml，而操作
Html頁(yè)面就要用到DOM。DOM就是把Html頁(yè)面模擬成一個(gè)對(duì)象，就像XDocument一樣，把Xml模擬成了一個(gè)對(duì)象，提供了操作各個(gè)節(jié)點(diǎn)的方法，直接調(diào)用就可以了。如果JavaScript只是執(zhí)行一些計(jì)算、循環(huán)等操作，而不能操作Html也就失去了它存在的意義。xmlDOM入門(mén)(把標(biāo)簽當(dāng)做對(duì)象來(lái)處理)DOM就是Html頁(yè)面的模型，將每個(gè)標(biāo)簽都做為一個(gè)對(duì)象，JavaScript通過(guò)調(diào)用DOM中的屬性、方法就可以對(duì)網(wǎng)頁(yè)中的文本框、層等元素進(jìn)行編程控制。比如通過(guò)操作文本框的DOM對(duì)象，就可以讀取文本框中的值、設(shè)置文本框中的值。JavaScript→DOM就是C#→.Net
Framwork。沒(méi)有.net，C#只能for、while，連WriteLine、MessageBox都不行。DOM就是一些讓JavaScript能操作Html頁(yè)面控件的類(lèi)、函數(shù)。DOM也像WinForm一樣，通過(guò)事件、屬性、方法進(jìn)行編程。CSS+JavaScript+DOM=DHtml學(xué)習(xí)階段只考慮IE。用IECollection安裝IE所有版本，學(xué)習(xí)使用IE6（要調(diào)試必須使用本機(jī)安裝的版本）。//jsDOM在不同的瀏覽器下支持不一樣。(IETester)DOM模型根據(jù)Id獲取頁(yè)面元素window.id（不要使用）document.getElementById('id')//推薦使用事件在DOM中有很多事件。演示：<body
onmousedown=“alert(‘別點(diǎn)我！’);”>//注意body的范圍。有時(shí)事件的響應(yīng)代碼比較多，就要放到一個(gè)函數(shù)中：
<script
type="text/javascript">
function
UserMouseDown()
{
alert('網(wǎng)頁(yè)被你點(diǎn)壞了>_<~~,賠吧！');
alert('逗你玩呢~~');
}
</script>
<input
type="button"
value="按鈕"onmousedown="UserMouseDown();"/>onmousedown=“UserMouseDown();”中，UserMouseDown后的括號(hào)不能丟（不能寫(xiě)成onmousedown=“UserMouseDown”），帶()表示調(diào)用函數(shù)，直接寫(xiě)函數(shù)名表示設(shè)置事件的處理函數(shù)為UserMouseDown。動(dòng)態(tài)設(shè)置事件JavaScript也可以像.Net中那樣動(dòng)態(tài)設(shè)置事件，Button.Click+=…
<script
type="text/javascript">alert('In
F1');
}alert('In
F2');
}
function
F1()
{
function
F2()
{
</script>
<input
type="button"
value="關(guān)聯(lián)F1"onclick="document.onclick=F1;"/>
<input
type="button"
value="關(guān)聯(lián)F2"onclick="document.onclick=F2;"/>注意：onclick=“document.onclick=F1;”
此處的F1不要加括號(hào)，加括號(hào)就編程了調(diào)用F1()函數(shù)，并且把返回值賦值給
document.onclick了。可以通過(guò)winform的事件來(lái)演示onclick=“hanshu()”與onclick=hanshu;的區(qū)別。如果講解，見(jiàn)備注1.window對(duì)象(Dom中的一個(gè)頂級(jí)對(duì)象。)window對(duì)象代表當(dāng)前瀏覽器窗口。使用window對(duì)象的屬性、方法的時(shí)候可以省略window。比如：
window.alert(‘hello');可以省略成alert(‘hello');
window.document可以直接寫(xiě)document能不寫(xiě)window就不要寫(xiě)，這樣可以減少js文件的字節(jié)數(shù)。window對(duì)象的方法1window.alert(‘大家好！’);//彈出警告對(duì)話框window.confirm(‘確定要?jiǎng)h除嗎？’);//確定、取消對(duì)話框，返回
true或false;window.navigate(url);//將網(wǎng)頁(yè)重新導(dǎo)航到url,只支持IE、Opera11.6,建議使用window.location.href=‘url’;//支持大多數(shù)瀏覽器window對(duì)象的方法2window.setInterval(code,delay)//每隔一段時(shí)間執(zhí)行指定的代碼（類(lèi)似于winForm中的Timer控件。）
第一個(gè)參數(shù)：指定的代碼字符串
第二個(gè)參數(shù)：時(shí)間間隔（毫秒數(shù)）
var
intervalId=setInterval(“alert(‘hello’);”,1000);window.clearInterval(intervalId);//停止計(jì)時(shí)器
clearInterval()取消setInterval的定時(shí)執(zhí)行，相當(dāng)于Timer中的
Enabled=False。因?yàn)閟etInterval可以設(shè)定多個(gè)定時(shí)，所以
clearInterval要指定清除那個(gè)定時(shí)器的標(biāo)識(shí)，即setInterval的返回值。
案例：文本框自增。
進(jìn)度條案例：見(jiàn)備注1.window對(duì)象的方法3setTimeout也是定時(shí)執(zhí)行，但是不像setInterval那樣是重復(fù)的定時(shí)執(zhí)行，只執(zhí)行一次，clearTimeout也是清除定時(shí)。很好區(qū)分：Interval：間隔；timeout：超時(shí)。var
timeoutId
=
setTimeout("alert('hello')",
2000);案例：實(shí)現(xiàn)標(biāo)題欄走馬燈的效果，也就是瀏覽器的標(biāo)題文字每隔500ms向右滾動(dòng)一下。提示：標(biāo)題為document.title屬性。實(shí)現(xiàn)代碼參考備注。練習(xí)：剛進(jìn)入的時(shí)候還是向左滾動(dòng)，點(diǎn)擊【向左】按鈕就向左連續(xù)滾動(dòng)，點(diǎn)擊【向右】按鈕就向右連續(xù)滾動(dòng)。
思路1、”全局變量”，標(biāo)志當(dāng)前的滾動(dòng)方向，當(dāng)點(diǎn)擊向左的時(shí)候dir="left",向右dir="right"。
思路2、scrollleft
scroolright,向右滾的時(shí)候?qū)crollleft的Intervalclear掉，然后setInterval啟動(dòng)scrollright延遲操作。見(jiàn)備注1.body、document對(duì)象的事件onload（頁(yè)面加載后觸發(fā)）
網(wǎng)頁(yè)加載完畢時(shí)觸發(fā)，瀏覽器是一邊下載文檔、一邊解析執(zhí)行，可能會(huì)出現(xiàn)JavaScript執(zhí)行時(shí)需要操作某個(gè)元素，這個(gè)元素還沒(méi)有加載，如果這樣就要把操作的代碼放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加載完畢時(shí)觸發(fā)，body
onload才是全部加載完成。
window.控件Id（不建議使用）
document.getElementById(“控件Id”);(推薦)onunload（頁(yè)面卸載后觸發(fā)）
網(wǎng)頁(yè)關(guān)閉（或者離開(kāi)）后觸發(fā)。//刷新頁(yè)面的時(shí)候、關(guān)閉選項(xiàng)卡的時(shí)候（多個(gè)選項(xiàng)卡）onbeforeunload（頁(yè)面卸載前觸發(fā)）
在網(wǎng)頁(yè)準(zhǔn)備關(guān)閉（或者離開(kāi)）前觸發(fā)。//注意瀏覽器緩存
<bodyonbeforeunload=“return‘真的要放棄發(fā)帖退出嗎?’;”>。顯示的文字隨瀏覽器版本而有差異。//=“window.event.returnValue=‘’只兼容IE其他事件除了屬性之外，當(dāng)然還有通用的HTML元素的事件：onclick（單擊）、ondblclick（雙擊）、onkeydown（按鍵按下）、onkeypress（點(diǎn)擊按鍵）、onkeyup（按鍵釋放）、onmousedown（鼠標(biāo)按下）、onmousemove（鼠標(biāo)移動(dòng)）、onmouseout（鼠標(biāo)離開(kāi)元素范圍）、onmouseover（鼠標(biāo)移動(dòng)到元素范圍）、onmouseup（鼠標(biāo)按鍵釋放）、oncontextmenu（在瀏覽器中單擊鼠標(biāo)右鍵顯示”右鍵菜單”時(shí)觸發(fā)）等。window對(duì)象的屬性1window.location對(duì)象：
window.location.href=‘’;//重新導(dǎo)航到新頁(yè)面,可以取值，也可以賦值。
window.location.reload();//刷新當(dāng)前頁(yè)window.event是IE下非常重要的屬性，用來(lái)獲得發(fā)生事件時(shí)的信息，事件不局限于window對(duì)象的事件，所有元素的事件都可以通過(guò)event屬性取到相關(guān)信息。類(lèi)似于winForm中的e(EventArgs)。//兼容IE、Chrome，不兼容FF（用event參數(shù)）。
window.event.altKey屬性，bool類(lèi)型，表示事件發(fā)生時(shí)是否按下了alt鍵。類(lèi)似的還有ctrlKey,shiftKey。演示：<inputtype="button"
value="點(diǎn)擊"onclick="if(event.altKey){alert('Alt點(diǎn)擊
')}else{alert('普通點(diǎn)擊')}"/>；window對(duì)象的屬性2window.event的屬性（接上頁(yè)）：
clientX、clientY
發(fā)生事件時(shí)鼠標(biāo)在客戶區(qū)的坐標(biāo)；screenX、
screenY
發(fā)生事件時(shí)鼠標(biāo)在屏幕上的坐標(biāo)；offsetX、offsetY
發(fā)生事件時(shí)鼠標(biāo)相對(duì)于事件源（比如點(diǎn)擊按鈕時(shí)觸發(fā)onclick）的坐標(biāo)。當(dāng)頁(yè)面中有<!DOCTYPE（文檔定義）時(shí)，對(duì)offsetX和offsetY單擊時(shí)的解析不同(使用onmousedown的時(shí)候與onclick測(cè)試結(jié)果不同。)。（單擊按鈕中文字的時(shí)候。）
(window.event.returnValue)returnValue屬性，如果將returnValue設(shè)置為false，就會(huì)取消默認(rèn)事件的處理。在超鏈接的onclick里面禁止訪問(wèn)href的頁(yè)面。在表單校驗(yàn)的時(shí)候禁止提交表單到服務(wù)器，防止錯(cuò)誤數(shù)據(jù)提交給服務(wù)器、防止頁(yè)面刷新。
(onsubmit="window.event.returnValue=false;")
window.event.returnValue不兼容火狐瀏覽器
FireFox:e.
preventDefault();取消事件的默認(rèn)動(dòng)作。
直接寫(xiě)return
false;IE、FF、Chrome都可以。window對(duì)象的屬性3window.event的屬性（接上頁(yè)）：
srcElement：獲得事件源對(duì)象。幾個(gè)按鈕共享一個(gè)事件響應(yīng)函數(shù)用。****_click(object
sender,EventArgs
e)//IE、Chrome支持。見(jiàn)備注
1。//FF下用e.target;
button，發(fā)生事件時(shí)鼠標(biāo)按鍵，IE:1為左鍵，2為右鍵，s4中滑輪//要測(cè)試event.button的值的時(shí)候，請(qǐng)?jiān)趏nmousedown事件中測(cè)試。在onclick事件中只能識(shí)別鼠標(biāo)左鍵的單擊。不同瀏覽器返回值可能不一樣。（不同瀏覽器值不一樣）
除IE瀏覽器外，其他瀏覽器在綁定事件處理函數(shù)時(shí)，有一個(gè)默認(rèn)的參數(shù)即event對(duì)象。（*）screen對(duì)象，獲取屏幕的信息：
alert("分辨率："+screen.width+"*"+screen.height);if
(screen.width<1024
||
screen.height<768){
alert("分辨率太低！");}window對(duì)象的屬性4clipboardData對(duì)象，對(duì)粘貼板的操作。//只支持IE,FF參考資料
setData("Text",val)，設(shè)置粘貼板中的值。
getData(“Text”)讀取粘貼板的值，返回值為粘貼板中的內(nèi)容；
clearData(“Text”)清空粘貼板；
案例：復(fù)制地址給友好。見(jiàn)備注。
當(dāng)復(fù)制的時(shí)候body的oncopy方法被觸發(fā)，直接returnfalse就是禁止復(fù)制。<body
oncopy="alert('禁止復(fù)制！');return
false;"
很多元素也有oncopy(復(fù)制)、onpaste（粘貼）事件：oncut
案例：禁止粘貼帳號(hào)。見(jiàn)備注。
案例：在網(wǎng)站中復(fù)制文章的時(shí)候，為了防止那些”拷貝黨”不添加文章來(lái)源，自動(dòng)在復(fù)制的內(nèi)容后添加版權(quán)聲明。代碼見(jiàn)下頁(yè)：window對(duì)象的屬性4代碼：
function
modifyClipboard()
{
clipboardData.setData('Text',clipboardData.getData('Text')+'本文來(lái)自傳智播客技術(shù)專區(qū)，轉(zhuǎn)載請(qǐng)注明來(lái)源。'+location.href);}
oncopy="setTimeout('modifyClipboard()',100)“
用戶復(fù)制動(dòng)作發(fā)生0.1秒以后再去改粘貼板中的內(nèi)容。100ms只是一個(gè)經(jīng)常取值，寫(xiě)1000、10、50、200……都行。不能直接在oncopy里修改粘貼板。
不能直接在oncopy中執(zhí)行對(duì)粘貼板的操作，因此設(shè)定定時(shí)器，0.1秒以后執(zhí)行，這樣就不再oncopy的執(zhí)行調(diào)用棧上了。history操作歷史記錄。
window.history.back()后退；window.history.forward()前進(jìn)。
window.history.go(-1)后退、window.history.go(1)前進(jìn)window對(duì)象的屬性5---documentdocument屬性：
document屬性是window對(duì)象中最復(fù)雜的屬性。
因?yàn)槭褂脀indow對(duì)象成員的時(shí)候可以省略window.，所以一般直接寫(xiě)document。
document的方法：
write();//向文檔中寫(xiě)入內(nèi)容。writeln()，和write差不多，只不過(guò)最后添加一個(gè)回車(chē)。在onclick等事件中寫(xiě)的代碼會(huì)沖掉頁(yè)面中的內(nèi)容，只有在頁(yè)面加載過(guò)程中write才會(huì)與原有內(nèi)容融合在一起。writeln()是在源代碼里面換行。與<br/>不一樣。
document.write()經(jīng)常在廣告代碼、整合資源代碼中被使用。見(jiàn)備注。內(nèi)容聯(lián)盟、廣告代碼、cnzz，不需要被主頁(yè)面的站長(zhǎng)去維護(hù)內(nèi)容，只要被嵌入的js內(nèi)容提供商修改內(nèi)容，顯示的內(nèi)容就變了。
（使用pre標(biāo)簽看write()與writeln()的區(qū)別，效果，見(jiàn)備注1）
Js腳本一執(zhí)行就會(huì)訪問(wèn)服務(wù)器。超鏈接誒還需要點(diǎn)擊。window對(duì)象的屬性6---document最基本的DOM遍歷演示。見(jiàn)備注1。（*）getElementById(),（非常常用），根據(jù)元素的Id獲得對(duì)象，網(wǎng)頁(yè)中id不能重復(fù)。也可以直接通過(guò)元素的id來(lái)引用元素，但是有有效范圍、form1.textbox1之類(lèi)的問(wèn)題（當(dāng)元素放在form中的時(shí)候（在html頁(yè)面中需要通過(guò)form.元素id）），因此不建議直接通過(guò)id操作元素，而是通過(guò)getElementById。getElementsByName()，根據(jù)元素的name獲得對(duì)象，由于頁(yè)面中元素的name可以重復(fù)，比如多個(gè)RadioButton的name一樣，因此getElementsByName返回值是對(duì)象數(shù)組。getElementsByTagName()，獲得指定標(biāo)簽名稱的元素?cái)?shù)組，比如getElementsByTagName(“p”)可以獲得所有的<p>標(biāo)簽。*表示所有標(biāo)簽。此處切忌不要使用forin循環(huán)(forin循環(huán)循環(huán)的是鍵值對(duì)，不是對(duì)象本身。)。（問(wèn)題多多：radio時(shí)有相同的key,第一個(gè)key是length等等。。）建議：使用for循環(huán)。document.getElementById()/document.all[‘id’](*)window對(duì)象的屬性7---document案例：點(diǎn)擊一個(gè)按鈕，被點(diǎn)擊的按鈕顯示“嗚嗚”，其他按鈕顯示“哈哈”。案例：十秒鐘后協(xié)議文本框下的注冊(cè)按鈕才能點(diǎn)擊，時(shí)鐘倒數(shù)。(btn.disabled=“”，讓元素可用。disabled=disabled,為不可用)disabled=true;練習(xí)：加法計(jì)算器。兩個(gè)文本框中輸入數(shù)字，點(diǎn)擊【=】按鈕將相加的結(jié)果放到第三個(gè)文本框中。練習(xí)：美女時(shí)鐘。事件冒泡事件冒泡：如果元素A嵌套在元素B中，那么A被點(diǎn)擊不僅A的onclick事件會(huì)被觸發(fā)，B的onclick也會(huì)被觸發(fā)。觸發(fā)的順序是“由內(nèi)而外”。驗(yàn)證：在頁(yè)面上添加一個(gè)table、table里有tr、tr里有td，td里放一個(gè)p，在p、td、tr、table中添加onclick事件響應(yīng)，見(jiàn)備注。取消事件冒泡：window.event.cancelBubble=true;//IE下的寫(xiě)法。Span設(shè)置display:block；以后再設(shè)置height,width才會(huì)有效。window.onload與body的onload
1.二者效果完全一樣,都是在頁(yè)面內(nèi)容都加載完畢后才觸發(fā)。
2.由于網(wǎng)頁(yè)中沒(méi)有window所以在body中寫(xiě)onload
3.建議使用window.onload//使用js腳本的方式高效
4.其實(shí)應(yīng)該是document.onload，但是所有瀏覽器都實(shí)現(xiàn)到了
window對(duì)象上。事件中的this事件中的this。除了可以使用event.srcElement在事件響應(yīng)函數(shù)中，this表示發(fā)生事件的控件。只有在事件響應(yīng)函數(shù)才能使用this獲得發(fā)生事件的控件，在事件響應(yīng)函數(shù)調(diào)用的函數(shù)中不能使用（這里的this表示window對(duì)象），如果要使用則要將this傳遞給函數(shù)或者使用event.srcElement。(*)this和event.srcElement的語(yǔ)義是不一樣的，this就是表示當(dāng)前監(jiān)聽(tīng)事件的這個(gè)對(duì)象，
event.srcElement是引發(fā)事件的對(duì)象：事件冒泡。<bodyonclick=“//這個(gè)叫做事件響應(yīng)函數(shù)，在這里寫(xiě)this表示發(fā)生事件的控件。在這里調(diào)用另外一個(gè)函數(shù)F1,則F1中不能使用this表示發(fā)生事件的控件”>1.通過(guò)“事件冒泡”說(shuō)明this與window.event.srcElement的區(qū)別。2.通過(guò)onclick=f1;與onclick=“f1(this);”在f1中使用this,說(shuō)明
this在不同情況下的使用區(qū)別。動(dòng)態(tài)創(chuàng)建DOMdocument.write只能在頁(yè)面加載過(guò)程中才能動(dòng)態(tài)創(chuàng)建?？梢哉{(diào)用document的createElement方法來(lái)創(chuàng)建具有指定標(biāo)簽的DOM對(duì)象，然后通過(guò)調(diào)用某個(gè)元素的appendChild();方法將新創(chuàng)建元素添加到相應(yīng)的元素下。//父元素對(duì)象.removeChild(子元素對(duì)象);刪除元素。function
showIt()
{var
divMain
=
document.getElementById("divMain");var
btn
=
document.createElement("input");btn.type
=
"button";btn.value="我是動(dòng)態(tài)的！";divMain.appendChild(btn);}<div
id="divMain"></div><input
type="button"
value="ok"
onclick="showit()"
/>innerText（兼容IE,不兼容FF）和innerHTML(兼容所有瀏覽器)幾乎所有DOM元素都有innerText、innerHTML屬性（注意大小寫(xiě)），分別是元素標(biāo)簽內(nèi)內(nèi)容的文本表示形式和HTML源代碼，這兩個(gè)屬性是可讀可寫(xiě)的。//FF不支持innerText,在FF下用textContent屬性。也可以用innerHTML設(shè)置普通文本。//編寫(xiě)兼容的innerText,備注1.示例：代碼見(jiàn)備注1。（innerText與innerHTML區(qū)別。）用innerHTML也可以替代createElement，屬于簡(jiǎn)單、粗放型、后果自負(fù)的創(chuàng)建。示例：function
createlink()
{var
divMain
=
document.getElementById("divMain");divMain.innerHTML="<a
href=''>如鵬網(wǎng)</a>";}<span/>的innerHTML和<span></span>的innerHTML不一樣。//建議，在使用之前要保證標(biāo)簽具有開(kāi)始和結(jié)束標(biāo)記，否則，會(huì)出現(xiàn)一些意想不到的后果。（*）通過(guò)能力檢測(cè)，寫(xiě)一個(gè)可以兼容FF與IE的使用innerText與textContent的代碼。練習(xí)案例：點(diǎn)擊按鈕動(dòng)態(tài)增加網(wǎng)站列表，分兩列，第一列為網(wǎng)站的名字，第二列為帶網(wǎng)站超鏈接的網(wǎng)站名。增加三行常見(jiàn)網(wǎng)站。瀏覽器兼容性問(wèn)題，見(jiàn)備注。（先聲明一個(gè)dict集合來(lái)存鍵值對(duì)。）動(dòng)態(tài)產(chǎn)生的元素，查看源代碼是看不到的。通過(guò)DebugBar→Dom→文檔→HTML可以看到。練習(xí)：點(diǎn)擊按鈕增加一個(gè)網(wǎng)站的超鏈接(增加到body下面的某個(gè)div中。)練習(xí)：無(wú)刷新評(píng)論。<table
border="1"><tr><td>貓貓：</td><td>沙發(fā)耶！</td></tr></table>昵稱：<input
type="text"/><br/><textarea
id="txt"></textarea><br
/><input
type="button"value="評(píng)論"/>瀏覽器兼容性問(wèn)題瀏覽器兼容性的例子：ie6，ie7對(duì)table.appendChild("tr")的支持和IE8不一樣，用insertRow、insertCell來(lái)代替或者為表格添加
tbody，然后向tbody中添加tr。FF不支持innerText。所以動(dòng)態(tài)加載網(wǎng)站列表的程序修改為：
vartr=tableLinks.insertRow(-1);//FF必須加-1這個(gè)參數(shù),表追加。如果不是負(fù)數(shù)，則表示在某個(gè)索引之前插入。
var
td1
=
tr.insertCell(-1);
td1.innerText
=
key;
var
td2
=
tr.insertCell(-1);
td2.innerHTML
=
"<a
href='"
+
value
+
"'>"
+
value
+
"</a>";或者：（不建議）
<table
id="tableLinks">
<tbody></tbody>
</table>，然后tableLinks.tBodies[0].appendChild(tr);innerHTML還是操作Dom節(jié)點(diǎn)操作頁(yè)面的元素的時(shí)候是用innerHTML的方式還是createElement()、appendChild()與removeChild()的方式？
1.對(duì)于大量進(jìn)行節(jié)點(diǎn)操作時(shí)，使用innerHTML的方式性能要好于頻繁的Dom操作(有專門(mén)用C或C++寫(xiě)的html解析器。)。先將頁(yè)面的HTML代碼寫(xiě)好，然后調(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)存。代碼是否需要放置到onload中//如果js代碼需要操作頁(yè)面上的元素，則將該代碼放到onload里面。//因?yàn)楫?dāng)頁(yè)面加載完畢之后頁(yè)面上才會(huì)有相關(guān)的元素//如果js代碼中沒(méi)有操作頁(yè)面元素的語(yǔ)句，則可以將該代碼直接寫(xiě)在<script>標(biāo)簽中，//例如：聲明變量，相加求和等操作。<body><!--html標(biāo)簽--><script
type="text/javascript">//寫(xiě)在這里的代碼，由于已經(jīng)是頁(yè)面的底部，在執(zhí)行該代碼時(shí)，頁(yè)面的元素已經(jīng)都加載完畢，所以可以不放到onload里面也可以操作頁(yè)面上的元素。//建議將操作頁(yè)面元素的代碼都放到onload里面。</script></body>Js操作頁(yè)面樣式，其他易錯(cuò)：修改元素的樣式不是設(shè)置class屬性，而是className屬性。。(class是JavaScript的一個(gè)保留字，屬性不能用關(guān)鍵字、保留字所以就變成className了)案例：網(wǎng)頁(yè)開(kāi)關(guān)燈的效果。修改元素的樣式不能this.style="background-color:Red"。易錯(cuò)：?jiǎn)为?dú)修改樣式的屬性使用“style.屬性名”。注意在css中屬性名在JavaScript中操作的時(shí)候?qū)傩悦赡懿灰粯?，主要集中在那些屬性名中含?的屬性，因?yàn)镴avaScript中-是不能做屬性、類(lèi)名的。所以CSS中背景顏色是background-color，而JavaScript則是style.backgroundColor；元素樣式名是class，在JavaScript中是className屬性；
font-size→style.fontSize；margin-top→style.marginTop//駝峰命名法。單獨(dú)修改控件的樣式<input
type=“button”
value=“AAA”onclick=“this.style.color=‘red’”/>。技巧，沒(méi)有文檔的情況下的值屬性名，隨便給一個(gè)元素設(shè)定id，然后在js中就能
id.style.出來(lái)能用的屬性。操作float樣式的時(shí)候，IE與其他瀏覽器不太一樣。IE：obj.style.styleFloat=‘right’;其他瀏覽器：obj.style.cssFloat=‘right’;//通用代碼見(jiàn)備注1.案例練習(xí)案例1：創(chuàng)建三個(gè)輸入文本框，當(dāng)光標(biāo)離開(kāi)文本框的時(shí)候如果文本框?yàn)榭?，則將文本框背景色設(shè)置為紅色，如果不為空則為白色。提示：焦點(diǎn)進(jìn)入控件的事件是onfocus，焦點(diǎn)離開(kāi)控件的事件是onblur。案例2：評(píng)分控件V1，用一個(gè)單行5列的Table做評(píng)分控件，監(jiān)聽(tīng)
td的click事件，點(diǎn)擊一個(gè)td的時(shí)候，將這個(gè)td及之前的td背景變?yōu)榧t色，之后的td背景變?yōu)榘咨?。?dāng)鼠標(biāo)懸浮在評(píng)分控件上的時(shí)候顯示超鏈接形式的鼠標(biāo)圖標(biāo)?！狙菔綣Query版】。自定義簡(jiǎn)易評(píng)分控件代碼：見(jiàn)備注1.練習(xí)練習(xí)1：超鏈接的單選效果。頁(yè)還原為白色。參考：點(diǎn)擊變“嗚嗚”。頁(yè)面上若干個(gè)超鏈接，點(diǎn)擊一個(gè)超鏈接s的時(shí)候被點(diǎn)擊的超鏈接變?yōu)榧t色背景，其他超鏈接背景沒(méi)有變。window.event.returnValue=false;。難點(diǎn)“this”練習(xí)2：點(diǎn)擊按鈕，表格隔行變色：偶數(shù)行為黃色背景，奇數(shù)行為默認(rèn)顏色。通過(guò)table的getElementsByTagName取得所有的tr，依次遍歷，如果是偶數(shù)就…………。練習(xí)3：放若干文本框，獲得焦點(diǎn)的文本框黃色背景，其他控件背景顏色是白色
思路1：監(jiān)聽(tīng)所有input的onfocus事件→將背景設(shè)置為黃色，監(jiān)聽(tīng)所有input的onblur事件→將背景設(shè)置為白色。思路2：只監(jiān)聽(tīng)onfocus和練習(xí)1一樣。練習(xí)4：點(diǎn)擊表格行，被點(diǎn)擊的行高亮顯示（背景是黃色），其他行白色背景。監(jiān)聽(tīng)每個(gè)tr的onclick事件，將點(diǎn)擊的背景設(shè)置為黃色，其他的設(shè)置為白色背景。//對(duì)于table、div、span這類(lèi)型元素沒(méi)有onfocus（獲取焦點(diǎn)的事件（無(wú)法觸發(fā)這些事件。））控制層的顯示修改style.display，例子：切換層的顯示function
togglediv()
{vardiv1
=
document.getElementById('div1');if(div1.style.display
==
'')
{div1.style.display='none';//不顯示}else
{div1.style.display='';//顯示}
}//與元素對(duì)象.enabled=true或readonly=true等不一樣，這里是樣式，不是元素的直接屬性，不能用true或false。案例：按鈕、checkbox,一般想到的都是onchange事件。（使用click事件，避免使用onchange事件。）與超鏈接（3種），顯示層。//動(dòng)態(tài)創(chuàng)建層，移除。案例：鼠標(biāo)放到超鏈接上的時(shí)候顯示一個(gè)圖片或文字（放到div中。）offsetHeight\offsetWidth\offsetLeft\offsetTop動(dòng)態(tài)設(shè)置元素的位置、大小通過(guò)dom讀取元素的top、left、width、height等取到的值不是數(shù)字，而是“10px”這樣的字符串；為這些屬性設(shè)值的時(shí)候IE可以是80、90這樣的數(shù)字，F(xiàn)F、Chrome必須是“80px”、“90%”等這樣的字符串形式，為了兼容統(tǒng)一用字符串形式。left/top需要設(shè)置position易錯(cuò)：不要寫(xiě)成div1.style.width=80px，而是div1.style.width=‘80px’;如果要修改元素的大?。▽挾燃?），則首先要取出元素的寬度，然后用parseInt將寬度轉(zhuǎn)換為數(shù)字（parseInt可以將“20px”這樣數(shù)字開(kāi)頭的包含其他內(nèi)容的字符串解析為20，parseInt(‘22px’,10)，也就是解析盡可能多的部分）；然后加上一個(gè)值，再加上px賦值回去。案例：層的動(dòng)態(tài)改變大小，將層內(nèi)的內(nèi)容隱藏掉(overflow:hidden)。setInterval();IE中body的事件范圍IE中如果在body上添加onclick、onmousemove等事件響應(yīng)，那么如果頁(yè)面沒(méi)有滿，則“body中最后一個(gè)元素以下（橫向不限制）”的部分是無(wú)法響應(yīng)事件的，必須使用代碼在document上監(jiān)聽(tīng)那些事件，比如document.onmousemove=MovePicdocument.body.onmousedown=function(){}document.onmousedown=function(){}注意加文檔定義與不加文檔定義的也不一樣。如果為整個(gè)文檔注冊(cè)事件可以使用：document.onxxxx事件。層的操作元素的position
樣式值：static（無(wú)定位，顯示在默認(rèn)位置）、absolute（絕對(duì)定位）、fixed（相對(duì)于窗口的固定定位，位置不會(huì)隨著瀏覽器的滾動(dòng)而變化，IE6不支持）、relative（相對(duì)元素默認(rèn)位置的定位）。如果要通過(guò)代碼修改元素的坐標(biāo)則一般使用absolute，然后修改元素的top（上邊緣距離）、左邊緣距離）兩個(gè)樣式值。left、top都是指的層的左上角的坐標(biāo)left（案例：跟著鼠標(biāo)飛的圖片。提示：鼠標(biāo)移動(dòng)的事件是onmousemove（一邊移動(dòng)事件一邊觸發(fā)，而不是移動(dòng)開(kāi)始或者移動(dòng)完成才觸發(fā)），通過(guò)
window.event的clientX、clientY屬性獲得鼠標(biāo)的位置。案例：鼠標(biāo)放到一個(gè)超鏈接的時(shí)候，在鼠標(biāo)的位置顯示一個(gè)黃色背景，帶圖片的懸浮提示，鼠標(biāo)離開(kāi)就消失。提示：鼠標(biāo)進(jìn)入控件的事件是
onmouseover，離開(kāi)的事件是onmouseout。案例：點(diǎn)擊按鈕層動(dòng)態(tài)變大。提示：英文字母連續(xù)單詞不會(huì)在中間自動(dòng)換行的陷阱overflow、word-break:break-all;(查手冊(cè)。)問(wèn)題易錯(cuò)：不要寫(xiě)成div1.style.width=80px，而是div1.style.width='80px'修改元素的樣式不能this.style="background-color:Red"，哪怕可以的話也是把以前所有樣式都沖掉了。單獨(dú)修改控件的樣式this.style.background='red'，只修改要修改的樣式。技巧，沒(méi)有文檔的情況下的值屬性名，隨便給一個(gè)元素設(shè)定id，然后在js中就能id.style.出來(lái)能用的屬性。createElement的兩種用法，注意innerText的問(wèn)題(下面的寫(xiě)法，不推薦，不建議、知道即可（可以幫助排錯(cuò)）,只兼容IE.)在IE7及以前版本下，通過(guò)createElement(‘input’)創(chuàng)建兩個(gè)名字一樣的radio也不能選擇，這時(shí)可以通過(guò)下面的方式（把標(biāo)簽寫(xiě)全）。//參考備注1varinput=document.createElement(“<input
type=‘button’
value=‘hello’/>”)快速創(chuàng)建元素，并且賦值，但是注意設(shè)置的inner部分不會(huì)被設(shè)置var
link=
document.createElement(“<a
href=‘’>百度</a>”)（“百度”二字寫(xiě)不進(jìn)去）label.setAttribute(“for”,
“username”);//設(shè)定一些Dom元素屬性名特殊的屬性,label.for=“username”會(huì)有問(wèn)題。
label.setAttribute(“xuehao”,“33333”)//getAttribute(“name”)//removeAttribute("na
me")案例練習(xí)1練習(xí)1：點(diǎn)擊【登錄】按鈕，彈出一個(gè)顯示用戶名、密碼等的層。將用戶名、密碼等寫(xiě)到一個(gè)層中，層默認(rèn)是隱藏的，點(diǎn)擊【登錄】超鏈接以后將層顯示出來(lái)，如果點(diǎn)擊層中的關(guān)閉按鈕，則隱藏層。絕對(duì)定位，顯示到中間位置。document.body.clientWidth(獲取頁(yè)面的width)//高度，注意body的默認(rèn)范圍。（去掉<doc
type）；margin:0
auto;練習(xí)2：一幅圖片。點(diǎn)擊小圖，彈出一個(gè)層在點(diǎn)擊的位置顯示小圖對(duì)應(yīng)的大圖，并且顯示姓名、身高等信息，點(diǎn)擊層中的關(guān)閉按鈕關(guān)閉層。進(jìn)階：元素的額外屬性。動(dòng)畫(huà)效果的顯示出來(lái)。兩種：靜態(tài)；動(dòng)態(tài)載入數(shù)據(jù)。作業(yè)：評(píng)分控件V2。用一個(gè)單行5列的Table，td中默認(rèn)都是
starEmpty.jpg這個(gè)圖片。監(jiān)聽(tīng)td的mouseover事件，鼠標(biāo)在一個(gè)td的時(shí)候?qū)⑦@個(gè)td及之前的td的內(nèi)容換成starFill.jpg這個(gè)圖片。鼠標(biāo)在評(píng)分控件上的時(shí)候顯示超鏈接形式的鼠標(biāo)圖標(biāo)。獲取td中的img見(jiàn)備注3。案例：注冊(cè)頁(yè)面，點(diǎn)擊“高級(jí)”CheckBox，則顯示高級(jí)選項(xiàng)，否則隱藏補(bǔ)充問(wèn)題當(dāng)設(shè)置了層的邊框，margin，padding等問(wèn)題的時(shí)候通過(guò)offsetHeight獲取的高度問(wèn)題。document.getElementById('dv1').offsetHeight;document.getElementById('dv1').currentStyle.heightwindow.getComputedStyle(document.getElementById('dv1'),null).height案例練習(xí)2練習(xí)：界面上有幾個(gè)球隊(duì)名字的列表，將鼠標(biāo)放到球隊(duì)名字上就變?yōu)榧t色背景，其他球隊(duì)背景顏色為白色，點(diǎn)擊一個(gè)球隊(duì)的時(shí)候就將點(diǎn)擊的球隊(duì)變?yōu)閒ontSize=30字體(fontSize=‘’回到默認(rèn))。Ul→li練習(xí)：顯示數(shù)字時(shí)鐘，時(shí)間顯示到一個(gè)div中。思路：setInterval()\innerHTMl。練習(xí)：有一個(gè)搜索文本框，焦點(diǎn)不在文本框中的時(shí)候，如果文本框沒(méi)有值，則文本框中顯示灰色文本（Gray）的“輸入搜索關(guān)鍵詞”，否則顯示用戶輸入的值；焦點(diǎn)在文本框中時(shí)如果之前顯示“輸入搜索關(guān)鍵詞”則清空文本框的值，并且將文本修改為黑色。onfocus的時(shí)候如果文本框中的值為“輸入搜索關(guān)鍵詞”，則清空文本框，并且恢復(fù)文本框的顏色為Black；onblur的時(shí)候如果文本框中沒(méi)有值，則將文本框的值設(shè)置為“輸入搜索關(guān)鍵詞”并且文本框中顯示灰色文本（Gray）
style.color='Gray'。（五分鐘）form對(duì)象document.getElementById(‘btn1’).click()。搜索引擎的，智能提示，點(diǎn)擊后相當(dāng)于點(diǎn)擊了“搜索”按鈕。常用：click(),focus(),blur();//相當(dāng)于通過(guò)程序來(lái)觸發(fā)元素的單擊、獲得焦點(diǎn)以及失去焦點(diǎn)的事件。form對(duì)象是表單的Dom對(duì)象。方法：submit()提交表單，但是不會(huì)觸發(fā)onsubmit事件。實(shí)現(xiàn)autopost，也就是焦點(diǎn)離開(kāi)控件以后頁(yè)面立即提交，而不是只有提交submit按鈕以后才提交，當(dāng)光標(biāo)離開(kāi)的時(shí)候觸發(fā)onblur事件，在onblur中調(diào)用form的submit方法。代碼見(jiàn)備注。在點(diǎn)擊submit后form的onsubmit事件被觸發(fā)，在onsubmit中可以進(jìn)行數(shù)據(jù)校驗(yàn)，如果數(shù)據(jù)有問(wèn)題，返回false即可取消提交<form
name="form1"
action="a.aspx"
method="get"onsubmit="if(document.getElementById('txtname').value.length<=0){alert('姓名必填');return
false;}">不同瀏覽器的差異（*）面試題：說(shuō)說(shuō)開(kāi)發(fā)項(xiàng)目的時(shí)候不同瀏覽器的不同點(diǎn)，你是怎么解決的？appendChild,insertCell,px不同瀏覽器中對(duì)DOM支持的方法不一樣獲取網(wǎng)頁(yè)中那個(gè)元素觸發(fā)了事件：在IE里使用srcElement
；在FireFox里使用target使用Dom獲取和更改網(wǎng)頁(yè)標(biāo)簽元素內(nèi)文本：在IE里使用innerText；在FireFox里使用textContent動(dòng)態(tài)為網(wǎng)頁(yè)或元素綁定事件：在IE中綁定事件的方法是attachEvent；在FireFox中綁定事件的方法是addEventListener
（類(lèi)似于多播委托。使用該方法是還有一些其他的注意事項(xiàng)）更多。不同瀏覽器中對(duì)CSS的支持不一樣，所以出現(xiàn)在IE中顯示正常的網(wǎng)頁(yè)，在FF下全部亂掉了。哀悼網(wǎng)頁(yè)使用的CSS只有IE支持，F(xiàn)F都不支持。filter:gray;JQuery之類(lèi)的框架進(jìn)行了封裝，將不同瀏覽器的差異幫開(kāi)發(fā)人員處理了，開(kāi)發(fā)人員只要調(diào)用JQuery的方法，JQuery會(huì)幫助在不同瀏覽器中進(jìn)行翻譯。用JQuery就可以解決不同瀏覽器上Dom的不同。對(duì)于CSS的不同是美工的事，IETester、FF、Chrome。JS中的正則表達(dá)式復(fù)習(xí)C#正則表達(dá)式。JavaScript中創(chuàng)建正則表達(dá)式類(lèi)的方法：1.varregex=newRegExp(“\\d{5}”)（這種寫(xiě)法僅用于動(dòng)態(tài)生成正則表達(dá)式的情況下）或者2.var
regex=/^\d{5}$/（推薦）/表達(dá)式/是JavaScript中專門(mén)為簡(jiǎn)化正則表達(dá)式編寫(xiě)而提供的語(yǔ)法，寫(xiě)在//中的正則表達(dá)式就不用管轉(zhuǎn)義符了。RegExp對(duì)象的方法：（1）test(str)判斷字符串str是否匹配正則表達(dá)式，相當(dāng)于IsMatchvar
regex
=
/.+@.+/;alert(regex.test("
"));alert(regex.test("
"));（2）exec(str)進(jìn)行搜索匹配，返回值為匹配結(jié)果(*)，相當(dāng)于c#中match()和matches()如果exec()找到了匹配的文本，則返回一個(gè)結(jié)果數(shù)組（完全匹配的字符串以及提取組的結(jié)果。）。否則，返回null。要提取多個(gè)需要反復(fù)調(diào)用exec()類(lèi)似于
matches()方法。//注意全局模式/…../g在非全局模式下，調(diào)用一次exec()相當(dāng)于match()；在全局模式下連續(xù)多次調(diào)用相當(dāng)于matches()string的正則表達(dá)式方法String對(duì)象中提供了一些與正則表達(dá)式相關(guān)的方法，相當(dāng)于對(duì)于RegExp類(lèi)的包裝，簡(jiǎn)化調(diào)用：match(
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025至2030年中國(guó)彩印袋數(shù)據(jù)監(jiān)測(cè)研究報(bào)告
- 2025年烤鯛魚(yú)模型項(xiàng)目可行性研究報(bào)告
- 2025年中國(guó)脫磁機(jī)市場(chǎng)調(diào)查研究報(bào)告
- 2025至2030年齒桿式回轉(zhuǎn)擺動(dòng)氣缸項(xiàng)目投資價(jià)值分析報(bào)告
- 2025至2030年醋酸銅原粉項(xiàng)目投資價(jià)值分析報(bào)告
- 2025至2030年海綿毛泡項(xiàng)目投資價(jià)值分析報(bào)告
- 五年級(jí)數(shù)學(xué)(小數(shù)四則混合運(yùn)算)計(jì)算題專項(xiàng)練習(xí)及答案
- 科研設(shè)備搬運(yùn)服務(wù)協(xié)議
- 新人教版數(shù)學(xué)評(píng)估與反饋計(jì)劃
- 2024年度海南省公共營(yíng)養(yǎng)師之三級(jí)營(yíng)養(yǎng)師每日一練試卷A卷含答案
- 定額〔2025〕1號(hào)文-關(guān)于發(fā)布2018版電力建設(shè)工程概預(yù)算定額2024年度價(jià)格水平調(diào)整的通知
- 單位往個(gè)人轉(zhuǎn)賬的合同（2篇）
- 《運(yùn)營(yíng)管理》案例庫(kù)
- 醫(yī)院安全保衛(wèi)部署方案和管理制度
- 我的自我針灸記錄摘錄
- 中醫(yī)學(xué)-五臟-心-課件
- 《駱駝祥子》閱讀記錄卡
- 教育學(xué)原理完整版課件全套ppt教程(最新)
- 醫(yī)療安全不良事件報(bào)告培訓(xùn)PPT培訓(xùn)課件
- 膽管癌的護(hù)理查房
- 小學(xué)四年級(jí)奧數(shù)教程30講(經(jīng)典講解)
評(píng)論
0/150
提交評(píng)論