javascript基礎二JavaScript DOM編程
今天講解的內容更多的是要求大家要細心。
好，我們接着來看下JS中的字符串
substr(startIndex,len)//從startIndex開始，截取len個字符。
一、substr
substring(startIndex,stopIndex)//從startIndex開始，截取到stopIndex位置（不包括stopIndex所在的字符）。
二、substring
toUpperCase()//轉換大寫、toLowerCase();//轉換小寫 這個就不用講了
match()、replace()、search()方法，正則表達式相關（在JS Dom課程里講）。
接下來我們看下JS當中數組的使用：
三、數組的基本寫法
需要注意的是，JS中的大小寫一定要寫對。否則，瀏覽器報錯。
本次出錯是在arrVal，V沒有大寫。
四、數組推薦寫法
當然JS中數組還有幾種變態的寫法，在這里列舉一下，就不一一演示了。
new Array();
new Array(size);
new Array(element0, element0, ..., elementn);
var arr[‘China’,2008,true,’Hello’];(推薦。)
在js中也有類似於C#中foreach的循環
五、forin循環遍歷的是數組的索引
forin主要是用來遍歷鍵值對數組的，forin循環其實遍歷的就是鍵值對中的鍵，普通數組也可以把索引看做是鍵，把元素內容看做是值。
現在我就想用forin循環遍歷里面的內容，腫么辦？
六、通過forin循環遍歷值
七、forin循環可以遍歷對象
八、打開瀏覽器的錯誤提示功能
九、快速糾錯
下面我們一起做幾個數組的案例題：
求一個整數組中的最大值。定義成函數。
想下，這個數組有沒有參數？有參數。有沒有返回值呢？返回值就是我們求的結果。
十、求數組中的最大值
十一、豎線划分問題
十二、豎線划分
十三、交換字符串中的元素
接下來我們看下js中的鍵值對集合
十四、js中的鍵值對輸出
十五、取不到值的原因
for循環只記普通數組的個數。
十六、鍵值對數組通過forin來遍歷輸出
十七、鍵值對集合的簡寫方式
十八、在js里寫鍵值對的注意事項
十九、Array的簡化聲明
二十、鍵值對的嵌套寫法
二十一、鍵值對的嵌套寫法二
接下來我們看下擴展方法
大家想想C#的擴展方法都是什么？
靜態類，靜態類中寫幾個靜態方法，這些方法中必須有一個this數據類型。this后面跟什么數據類型，表示給哪個方法擴展的。
這里所有的擴展方法就是原型 → prototype
js本身並不是面向對象的,但是js也能實現繼承,就是通過原型來實現的.
原型又是跟作用域鏈相關,就實現類似於繼承的東西.我們這里只給大家說下原型是什么東西就可以了.
二十二、驗證e-mail的方法
但是我現在有個問題，每次驗證e-mail的時候，我自己都要寫個方法，非常的不爽。我們希望這樣，字符串天生就帶一個方法驗證是不是e-mail，如果是返回true，不是的話返回false。但是現在字符串沒有這個方法，需要我添加這么一個方法。
字符串都屬於string這個類型，給string添加一個方法：
二十三、給原型中添加方法
接下來我們就來看下JavaScript DOM編程
對於之前我們介紹的JS當中的高效的好用的語法，我們以后可以經常去用。對於其中不高效也不好用的部分，我們不用花太多的精力進行研究，甚至可以不知道。
接下來我們就學習怎么應用JavaScript DOM來操作網頁上的元素，什么是dom呢？一篇網頁我們就可以把它看成是一個dom。把這個網頁我們模擬成根節點，子節點，屬性我們就叫做一個dom。就是模擬成一個對象來進行操作。
二十四、DOM模型
在介紹之前我們先說獲取頁面元素的問題：
二十五、整個頁面就是一個window對象
二十六、實現點擊按鈕的時候，讓文本框顯示一個值
二十七、用document.getElementById實現對頁面元素的控制
推薦：document.getElementById(‘元素的Id’);
為什么不讓使用window.呢？接下來我們就看一下。
二十八、用window的時候這樣是可以的
二十九、當加入一個表單的時候就報錯了
三十、最終推薦的寫法
接下來我們在看下dom中的綁定方法：
三十一、以后推薦使用動態注冊事件
三十二、兩種寫法完全的不一樣
三十三、兩種寫法的作用域不一樣
下面我們介紹下window里面其它的常用方法：
三十四、window.confirm
寫的時候window是可以省略的。
window.confirm演示
三十五、window.location.href
setInterval演示
三十六、setInterval代碼
實現每隔1秒鍾text里面自動加1.
累加之后點停就停止了。
三十七、自動增加秒數和停止的代碼
自動增加秒數和停止的演示
下面我們做個標題欄走馬燈：
三十八、標題欄走馬燈效果
標題欄走馬燈效果演示
下面我們插入一個大家在用dom編程過程中經常遇到的問題
請看下面代碼：
四十、設置對應的兩個值
四十一、運行結果報錯
代碼是從上到下依次運行的，當程序運行到script后面的內容還沒有，所以頁面上沒有叫btn1的。所以不能設置值。
解決辦法1：
四十二、解決辦法1
四十三、解決辦法2
好，現在我們繼續說下上面的跑馬燈那個練習。
四十四、向左滾，向右滾代碼
向左滾，向右滾演示
四十五、setTimeout的用法
四十六、動態注冊事件
onunload（頁面卸載后觸發）
onbeforeunload（頁面卸載前觸發）如：在我們寫日志的時候，關閉頁面，就會有提示，您確定要關閉頁面嗎？
四十七、onbeforeunload代碼
我們接下來說下window的屬性
四十八、window.location屬性
四十九、window.event
鼠標移動的時候顯示當前的坐標演示
我們在窗體上按下一個按鈕的時候,點擊層的時候直接點是一種效果,按下ctrl鍵又是一種效果.按下alt鍵又是一種效果.這樣可以提高用戶的體驗效果.
五十、按下不同鍵執行不同效果的代碼
按下不同鍵執行不同效果的演示
用到window.event在IE瀏覽器下支持，但這個不是標准。上面的代碼在火狐下就不支持。因為火狐最標准。待會我們再去介紹不同瀏覽器怎么去寫event對象。
// document.title = window.event.screenX + ',' + window.event.screenY + '' + this.id;
這是相對於屏幕的坐標。
還有個offsetX,offsetY,offset是偏移量的意思。下面我寫一段代碼，大家猜一下offsetX，offsetY是什么意思？
插一句，在我們用js編程的過程中，有的地方它不給你報錯。所以，我們在糾錯的時候，需要耐心。
五十一、相對於當前元素的坐標
相對於當前元素的坐標演示
下面我再說下returnValue
五十二、returnValue
在火狐下FireFox preventDefault();取消事件的默認動作。
直接寫return false也可以。
最初觸發事件源的對象srcElement：
五十三、srcElement.value
button，發生事件時鼠標按鍵，1為左鍵，2為右鍵，4為中滑輪。
五十四、button
button演示
接下來我們介紹下screen對象;獲取屏幕的信息：
當用戶的電腦分辨率太低的時候，我們要用js檢測一下用戶的電腦的分辨率是多少。如果低於1024*768提示一下用戶。
檢測用戶的分辨率演示
五十五、檢測用戶電腦的分辨率的代碼
五十六、復制網址的值，讀取網址的值
復制網址的值，讀取網址的值演示
clearData(“Text”)清空粘貼板。
接下來再給大家說幾個事件。
比如有些網站，不讓大家復制。
看下我下面的復制過程，
五十七、復制過程一
打開個高級記事本，復制-粘貼。然后ctrl+B（快速瀏覽）。
要是復制html帶很多的html標簽，不想要html標簽，直接粘文字就可以了。
所以，不要迷戀哥，哥只是傳說！
接下來咱們就看一下，這種網站是怎么不讓我們復制的，為什么通過上面的方法就能復制了。
不想讓別人復制的話，就用到JS當中的幾個事件。
五十八、禁止復制代碼
當這種方式實現的時候，用戶禁用腳本就能復制了，所以，像百度文庫用flash實現的。
五十九、禁止粘貼的代碼
禁止復制，禁止粘貼演示
讓大家復制，最后加個文章的出處。
六十、允許用戶復制，但是需要在最后加一個出處代碼
history操作歷史記錄。
window.history.back()后退；window.history.forward()前進。
window.history.go(-1)后退一步；window.history.go(1)前進一步。
允許用戶復制，但是需要在最后加一個出處演示
接下來我們說下document屬性：
document屬性是window對象中最復雜的屬性。
六十一、直接寫write和writeln
六十二、直接寫write和writeln效果
六十三、寫在onload里面的代碼
六十四、寫在onload里面的效果
六十五、write和writeln的區別
六十六、用document.write()動態創建元素會遇到一些個問題
那么，在什么時候會用到document.write()和document.writeln()呢？
在嵌入外部的小模塊的時候會用到，假如自己做了個網頁。
六十七、嵌入外部小模塊
http://news.baidu.com/newscode.html網址為：在百度找到新聞的代碼的網址。
六十八、看下外部js文件是什么
六十九、打開js文件
七十、document.write動態生成div
那么為什么要這么去實現呢？為什么不直接給我們個div代碼呢？如果是div代碼，網頁上肯定會顯示這段新聞。第二天百度想變一變，變了之后，我們還要重新拿一段代碼復制到這里。如果是引入外部js的話，百度只要一概js對應document.write動態生成的div，所有的用戶就都改了。非常的靈活而且非常的方便。
看起來不起眼的東西，作用還是非常的大的。
接下來我們就說下訪問頁面上元素的其它方式：
七十一、獲取根節點下每個節點的js寫法
但是這樣做太麻煩，瀏覽器為我們封裝了三個方法。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload = function () { 8 //1.根據頁面上的元素的name的值，獲取元素 9 var eles = document.getElementsByName('a'); 10 //2.根據標簽，獲取元素 11 var eles = document.getElementsByTagName('input'); 12 //3.問題：現在要求獲取所有table下的input標簽。 13 var else=document.getElementById('t1').getElementsByTagName('input'); 14 //對於元素遍歷，使用for循環 15 for (var i = 0; i < eles.length; i++) { 16 alert(eles[i].value); 17 } 18 19 }; 20 </script> 21 </head> 22 <body> 23 <input type="button" name="a" value="btn1" id="btn1"/> 24 <input type="text" name="name" value="txt1" /> 25 <input type="radio" name="a" value="男" /> 26 <table id="t1" border="1"> 27 <tr> 28 <td> 29 <input type="button" name="name" value="按鈕1" /> 30 </td> 31 <td> 32 <input type="button" name="name" value="按鈕2" /> 33 </td> 34 </tr> 35 <tr> 36 <td> 37 <input type="text" name="name" value="文本框3" /> 38 </td> 39 <td> 40 <input type="password" name="name" value="按鈕1" /> 41 </td> 42 </tr> 43 </table> 44 </body> 45 </html>
七十二、documnet.getElementsByName和documnet.getElementsByTagName的區別
案例：點擊一個按鈕，被點擊的按鈕顯示“嗚嗚”，其他按鈕顯示“哈哈”。
七十三、案例代碼
插入案例代碼位置：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload = function () { 8 //1.獲取頁面上所有的input元素 9 var inputEles = document.getElementsByTagName('input'); 10 //為每個按鈕注冊一個onclick事件 11 for (var i = 0; i < inputEles.length; i++) { 12 //2.找buton-按鈕 13 if (inputEles[i].type == 'button') { 14 //3.為每個按鈕注冊一個單擊事件 15 inputEles[i].onclick = function () { 16 //5.將所有按鈕初始化為笑 17 //再獲取所有的按鈕 18 var inputsObj = document.getElementsByTagName('input'); 19 for (var j = 0; j < inputsObj.length; j++) { 20 if (inputsObj[j].type=='button') { 21 inputsObj[j].value = '哈哈'; 22 } 23 } 24 //4.設置當前被點擊的按鈕為嗚嗚 25 this.value = '嗚嗚'; 26 }; 27 } 28 } 29 }; 30 </script> 31 </head> 32 <body> 33 <input type="button" name="name" value="哈哈" /> 34 <input type="button" name="name" value="哈哈" /> 35 <input type="text" name="name" value="哈哈" /> 36 <input type="text" name="name" value="哈哈" /> 37 <input type="radio" name="name" value="哈哈" /> 38 <input type="checkbox" name="name" value="哈哈"/> 39 <input type="button" name="name" value="哈哈" /> 40 <input type="button" name="name" value="哈哈" /> 41 <input type="button" name="name" value="哈哈" /> 42 <input type="button" name="name" value="哈哈" /> 43 <input type="button" name="name" value="哈哈" /> 44 <input type="button" name="name" value="哈哈" /> 45 <input type="button" name="name" value="哈哈" /> 46 <input type="button" name="name" value="哈哈" /> 47 <input type="button" name="name" value="哈哈" /> 48 <input type="button" name="name" value="哈哈" /> 49 <input type="button" name="name" value="哈哈" /> 50 <input type="button" name="name" value="哈哈" /> 51 </body> 52 </html>
七十四、案例1演示
課后練習：
案例：十秒鍾后協議文本框下的注冊按鈕才能點擊，時鍾倒數。(btn.disabled = “” ，讓元素可用。disabled=disabled,為不可用)disabled=true;（用到計時器控件）
練習：加法計算器。兩個文本框中輸入數字，點擊【=】按鈕將相加的結果放到第三個文本框中。
七十五、練習圖解
練習：美女時鍾。
七十六、這么獲取時分秒
作者近期文章列表:
| C#中級進階教程（完全免費，獻給代碼愛好者的最好禮物。注：本作者分享自己精心整理的C#中級進階教程，無任何商業目的。 希望與更多的代碼愛好者交流心得，也請高手多多指點！！！） |
|
| 三層及其它內容 | 遞歸 |
| 三層（一） | |
| 三層相關案例（及常見的錯誤） | |
| 三層實例（內涵Sql CRUD） | |
| 手寫代碼生成器 | |
| SQL數據庫 ADO.net | 數據庫的應用圖解一 |
| 數據庫的應用詳解二 | |
| ADO.NET（內涵效率問題） | |
| ADO.NET實例教學一 | |
| ADO.NET（內含存儲過程講解） | |
| 面向過程，面向對象中高級 | 面向過程，面向對象的深入理解一 |
| 面向過程，面向對象的深入理解二 | |
| 面向對象的深入理解三 | |
| 無處不在的XML | |
| winform基礎 | Winform基礎 |
| winform中常用的控件 | |
| 面向過程 | 三種循環的比較 |
| C#中的方法（上） | |
| 我們常見的數組 | |
| 面向對象 | 思想的轉變 |
| C#中超級好用的類 | |
| C#中析構函數和命名空間的妙用 | |
| C#中超級好用的字符串 | |
| C#中如何快速處理字符串 | |
| 值類型和引用類型及其它 | |
| ArrayList和HashTable妙用一 | |
| ArrayList和HashTable妙用二 | |
| 文件管理File類 | |
| 多態 | |
| C#中其它一些問題的小節 | |
| GDI+ | 這些年我收集的GDI+代碼 |
| 這些年我收集的GDI+代碼2 | |
| HTML概述以及CSS | 你不能忽視的HTML語言 |
| 你不能忽視的HTML語言2精編篇 | |
| 你不能忽視的HTML語言3 | |
| CSS基本相關內容--中秋特別奉獻 | |
| CSS基本相關內容2 | |
| JavaScript基礎 | JavaScript基礎一 |
| jQuery | jQuery(內涵: jquery選擇器) |