|
JavaScript—>Dom,C#—> .Net Framework,；JavaScript和C#都是一些基本語法,，沒有Dom和.Net類庫，JavaScript和C#也就發(fā)揮不出來它的威力來,。本文就帶你來回顧一下Dom操作,。 Dom（文檔標(biāo)簽當(dāng)作對象來處理） (1)DOM就是html頁面模型，將每個標(biāo)簽都作為一個對象,，javascript通過調(diào)用DOM中的屬性,、方法就可以對網(wǎng)頁中的文本框、層等元素進(jìn)行編程控制,。 (2)DOM就是一些讓JavaScript能操作Html頁面控件的類,、函數(shù) (3)DHtml= CSS+JavaScript+Dom 動態(tài)設(shè)置事件 <script type="text/javascript">
function F1() { alert('In F1'); }
</script>
<input type="button" value="關(guān)聯(lián)F1" onclick="document.onclick=F1;" /><input type="button" value="關(guān)聯(lián)F1" onclick="F1()" 帶()表示調(diào)用函數(shù)，直接寫函數(shù)名表示將其設(shè)置為事件的處理函數(shù),。 (1) window方法 ①調(diào)用window的方法時，可以省略window ②方法
(2) window的屬性 ① window.location
② window.event ->按下鍵,復(fù)合鍵 altKey、shiftKey,、ctrlKey if (window.event.altKey) { alert("按下了Alt鍵"); }
->鼠標(biāo)坐標(biāo)
->停止事件繼續(xù)執(zhí)行
③ window.screen
④ clipboardData
function Setclipboard() { window.clipboardData.setData('Text', window.clipboardData.getData('Text') + '霹靂烈火版權(quán)所有'); } ⑤ history（操作歷史記錄）
⑥ document -->write與writeln
補(bǔ)充：以上兩個只有在與頁面加載的時候同時使用才會保證頁面上的內(nèi)容 應(yīng)用：廣告鏈接,，服務(wù)器端js代碼一改,，其它引用它的地方全改 -->獲得dom對象
 function GetDomObject() { alert('getElementById:' + document.getElementById('txtElementById').value); var arrobjs = document.getElementsByName('abc'); for (var i = 0; i < arrobjs.length; i++) { alert('getElementsByName元素值：' + arrobjs[i].value); } var tagNameObjs = document.getElementsByTagName('p'); for (var j = 0; j < tagNameObjs.length; j++) { alert('getElementsByTagName元素值：' + tagNameObjs[j].innerHTML); } } 注： 不能用for in（鍵值對）循環(huán) ⑦ 其它屬性
注：要為整個頁面注冊事件就用document,不要用body onclick（單擊）,、ondblclick（雙擊）、onkeydown（按鍵按下）,、onkeypress（點擊按鍵）,、onkeyup（按鍵釋放）、onmousedown（鼠標(biāo)按下）,、onmousemove（鼠標(biāo)移動）,、onmouseout（鼠標(biāo)離開元素范圍）、onmouseover（鼠標(biāo)移動到元素范圍）,、onmouseup（鼠標(biāo)按鍵釋放）,、oncontextmenu（在瀏覽器中單擊鼠標(biāo)右鍵顯示”右鍵菜單”時觸發(fā)） 事件冒泡：如果元素A嵌套在元素B中，那么A被點擊不僅A的onclick事件會被觸發(fā),，B的onclick也會被觸發(fā),。觸發(fā)的順序是“由內(nèi)而外” 。 <table onclick="alert('table onclick');"> <tr onclick="alert('tr onclick');"> <td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td> <td>bbb</td> </tr> </table> 取消事件冒泡： window.event.cancelBubble = true; //IE下 this：表示發(fā)生事件的控件,。只有在事件響應(yīng)函數(shù)才能使用this獲得發(fā)生事件的控件,，在事件響應(yīng)函數(shù)調(diào)用的函數(shù)中不能使用 window.event.srcElement：指最初引發(fā)事件的事件源對象 fuction method(){ alert(this.value); } <input type="text" onblur="method()"/> 這樣是不正確的，可以采用 fuction method(btn){
alert(btn.value);
}
<input type="text" onblur="method(this)"/>補(bǔ)充：this表示當(dāng)前觸發(fā)事件的對象,，表示當(dāng)前誰在執(zhí)行事件,，發(fā)生事件的控件； event.srcElement是引發(fā)事件的對象：事件冒泡,。 如果要直接使用this.屬性,，此時的函數(shù)不能是被調(diào)用的而必須是響應(yīng)函數(shù)，而window.event.srcElement則無此限制,。
(1) 幾乎所有DOM元素都有innerText、innerHTML屬性（注意大小寫）,，分別是元素標(biāo)簽內(nèi)內(nèi)容的文本表示形式和HTML源代碼,，這兩個屬性是可讀可寫的。 (2) FF不支持innerText,，使用textContent (3) innerHTML可以代替createElement,，屬于簡單、粗放型,、后果自負(fù)的創(chuàng)建 ① 大量進(jìn)行節(jié)點操作時，使用innerHTML的性能要好于頻繁的Dom操作 ② 使用innerTHML=‘’來刪除節(jié)點可能會造成內(nèi)存問題
3. 操作樣式 (1)通過操作style屬性來修改元素的樣式 css中屬性名在JavaScript中操作的時候?qū)傩悦赡懿灰粯?，比如：font-size→style.fontSize；margin-top→style.marginTop //駝峰命名法 改邊框：dvoObj.style.width 改背景：dvoObj.style.backgroundColor 改寬高：dvoObj.style.width|height--需要加px 注：不要寫成div1.style.width=80px,，而是div1.style.width=‘80px’ (2)設(shè)置元素樣式 修改元素的樣式不是設(shè)置class屬性,，而是className屬性 <style type="text/css"> .emptyfield { background-color:Red; } .normal { background-color:inherit; } </style> <script type="text/javascript"> function check(txt) { var s = txt.value; if (s.length <= 0) { txt.className = "emptyfield"; alert('這個字段必填！'); } else { txt.className = "normal"; } } </script> <input type="text" onblur="check(this)" /> <input type="text" onblur="check(this)" /> <input type="text" onblur="check(this)" /> visibility設(shè)置隱藏后,，隱藏部分仍然占位 click(),focus(),blur();//相當(dāng)于通過程序來觸發(fā)元素的單擊,、獲得焦點以及失去焦點的事件。 (1) 創(chuàng)建正則表達(dá)式類的方法 var regex = new RegExp(“\\d{5}”); var regex = /\d{5}/; -->推薦寫法 /表達(dá)式/是JavaScript中專門為簡化正則表達(dá)式編寫而提供的語法,，寫在//中的正則表達(dá)式就不用管轉(zhuǎn)義符了,。 (2) RegExp對象的方法 ① 匹配 test(str)判斷字符串str是否匹配正則表達(dá)式，相當(dāng)于C#中的IsMatch ② 提取 exec(str)進(jìn)行搜索匹配,，返回值為匹配結(jié)果(*),，是一個對象，該對象包含所提取到的第一個字符串的“完成匹配結(jié)果”,，以及所有的“提取組”;相當(dāng)于c#中match()和matches() ③ 替換 replace() 能力檢測： if (typeof td1.innerText == 'string') { td1.innerText = txt; } else { td1.textContent = txt; } (1)取消事件：window.event.returnValue不兼容FF 解決：用火狐特有 e. preventDefault()或者return false (2)window.event.altKey：if(event.altKey)不兼容FF 解決： function BodyClickHandlerOnFF(e) { if (e.altKey) { alert('按下alt鍵'); } else { alert('普通點擊,！'); } } <body onclick="BodyClickHandlerOnFF(event);"> (3) 獲取位置：window.event.ClientX、ScreenX,、OffsetX不兼容FF 解決：arguments[0].clientX… (4) 獲得事件源對象：window.event.srcElement 不兼容FF function MyClickHandlerOnFF(e) { var obj = e.target; alert(obj.value); } <input type="button" value="FF下事件源對象" onclick="MyClickHandlerOnFF(event);"/> (5) innerText：不兼容FF 解決：textContent (6) 擴(kuò)展《FF與IE對JavaScript和CSS的區(qū)別》 (1) 聲明變量賦初值 (2) 盡量避免直接聲明全局變量,，比如要聲明全局變量name,但是它有可能與window.name沖突，所以全局變量一般都會聲明在一個全局對象中：var itcast={name:’zxh’,num:10};使用這些全局變量的時候通過itcast.name或者itcast.num,，就可以減少與系統(tǒng)的重名了,。 (3) 當(dāng)編寫大量Js代碼的時候難免會遇到命名沖突的問題，這時可以通過模擬命名空間的方式來避免命名沖突,。例如： var itcast={}; var itcast.net={}; var itcast.net.net0405={name:’zxh’,sayHi=function(){}}; (4) 盡量避免使用全局變量,。（搜索全局變量時，會一層一層的搜索每個作用域范圍，耗時,，低效,，命名沖突） (5) 使用減值循環(huán)或者優(yōu)化循環(huán)條件，不要在循環(huán)條件中寫i<xxx.length而要用一個變量來代替,，i<len,。因為循環(huán)條件每次都會執(zhí)行，這樣的話每次都會計算xxx.length,。 (6) 避免使用eval(“alert(10);”);或setInterval(“myFunc();”,1000);這種雙重解析的代碼,。低效！ (7) 使用原生的方法,，比如內(nèi)置的join(),、reverse()，使用這些本來瀏覽器就有的方法不要自己寫myJoin()之類的,，性能低,。原生方法都是用c或者c++寫的，性能高,。 (8) 盡可能使用switch來代替多個if-else (9) 盡量減少語句數(shù)量 var arr=[1,2,’a’,true]; var p1={name:’zxh’,age:18};//創(chuàng)建對象 (10) 當(dāng)大量操作dom元素時使用文檔碎片,，避免多次更新頁面。 var fragment=document.createDocumentFragment();以下是一些練習(xí)題（試題來源--傳智播客）,，看你能做出來幾個呢 (1) 標(biāo)題欄走馬燈效果-->瀏覽器標(biāo)題文字向左右滾動 (2) 點擊一個按鈕，被點擊的按鈕顯示“嗚嗚”,，其他按鈕顯示“哈哈” (3) 十秒鐘后協(xié)議文本框下的注冊按鈕才能點擊,，時鐘倒數(shù)。 (4) 加法計算器,。兩個文本框中輸入數(shù)字,，點擊【=】按鈕將相加的結(jié)果放到第三個文本框中 (5) 點擊按鈕動態(tài)增加網(wǎng)站列表，分兩列,，第一列為網(wǎng)站的名字,，第二列為帶網(wǎng)站超鏈接的網(wǎng)站名。增加三行常見網(wǎng)站,。 (6) 實現(xiàn)無刷新評論 (7) 創(chuàng)建三個輸入文本框,，當(dāng)光標(biāo)離開文本框的時候如果文本框為空，則將文本框背景色設(shè)置為紅色,，如果不為空則為白色 (8) 評分控件V1,，用一個單行5列的Table做評分控件，監(jiān)聽td的click事件,，點擊一個td的時候,，將這個td及之前的td背景變?yōu)榧t色,，之后的td背景變?yōu)榘咨?/p> (9) 超鏈接的單選效果-->頁面上若干個超鏈接，點擊一個超鏈接s的時候被點擊的超鏈接變?yōu)榧t色背景,，其他超鏈接背景沒有變 (10) 點擊按鈕,，表格隔行變色：偶數(shù)行為黃色背景，奇數(shù)行為默認(rèn)顏色 (11) 放若干文本框,，獲得焦點的文本框黃色背景,，其他控件背景顏色是白色 (12) 點擊表格行，被點擊的行高亮顯示（背景是黃色）,，其他行白色背景 (13) 跟著鼠標(biāo)飛的圖片效果 (14) 點擊【登錄】按鈕,，彈出一個顯示用戶名、密碼等的層 (15) 一幅圖片,。點擊小圖,，彈出一個層在點擊的位置顯示小圖對應(yīng)的大圖，并且顯示姓名,、身高等信息，點擊層中的關(guān)閉按鈕關(guān)閉層 (16) 界面上有幾個球隊名字的列表,，將鼠標(biāo)放到球隊名字上就變?yōu)榧t色背景,，其他球隊背景顏色為白色，點擊一個球隊的時候就將點擊的球隊變?yōu)閒ontSize=30字體 (17) 顯示數(shù)字時鐘,，時間顯示到一個div (18) 有一個搜索文本框,，焦點不在文本框中的時候，如果文本框沒有值,，則文本框中顯示灰色文本（Gray）的“輸入搜索關(guān)鍵詞”,，否則顯示用戶輸入的值；焦點在文本框中時如果之前顯示“輸入搜索關(guān)鍵詞”則清空文本框的值,，并且將文本修改為黑色 (19) 密碼的安全級別,密碼強(qiáng)度顯示 (20) 歌曲列表 （CheckBox+Label）全選,、全不選、反選 (21) 實現(xiàn)省市選擇界面,。請選擇省的處理,，從后向前刪 (22) 權(quán)限選擇頁面，選擇,、撤回,、全部選擇、全部撤回 (23) 百度搜索時的自動完成功能 |
|
|
