JavaScript??

?1.簡介?? ?

JavaScript簡介：
?? ??? ?JS是運行在瀏覽器端的一門腳本語言，一開始主要用來做瀏覽器驗證，但現在功能已經不止于此。
?? ??? ?所謂腳本語言就是指，代碼不需要編譯，直接運行，并且讀入一行運行一行
?? ??? ?
?? ??? ?JavaScript目前應用非常廣泛，例如：瀏覽器端的驗證，Ajax，客戶端等，甚至也有服務器端的JavaScript--node.js?? ??

2.編寫位置?? ???

?　　（1）網頁內部
?? ??? ??? ?<script type="text/javascript">
?? ??? ??? ? alert("這是啥");
?? ??? ??? ? </script>
?? ??? ? （2）外部的.js文件

　　　　JavaScript一般單獨寫在一個.js文件中，通過以下方法來引用
?? ??? ??? ?<script type="text/javascript"? src="script.js"></script>
?? ???? （3）基本語法
?? ??? ??? ? ①注釋
?? ??? ??? ? 單行注釋 //
?? ??? ??? ? 多行注釋 /**/
?? ??? ??? ? ②變量
?? ??? ??? ? Ⅰ聲明：JS是一門弱類型語言，聲明變量時不需要指定變量的類型，只需要使用var關鍵字
?? ??? ??? ??? ?例如：var a；
?? ??? ??? ??? ??? ?
?? ??? ??? ?Ⅱ賦值：
?? ??? ??? ??? ?JS是一門動態類型的語言，可以給一個變量賦任意類型的值，同時在使用過程中可以任意修改變量
?? ??? ??? ??? ?變量的類型
?? ??? ??? ??? ?a=123;
?? ??? ??? ??? ?a="hello";
?? ??? ??? ?
?? ??? ??? ?Ⅲ聲明和賦值同時進行
?? ??? ??? ??? ?var b=123;
?? ??? ??? ??? ?var c="hello";
?? ??? ??? ??? ?var d=true;
?? ??? ??? ?
?? ??? ??? ?③函數
?? ??? ??? ??? ?在JS中函數也是一個對象，也可以將一個函數的引用賦值給一個變量
?? ??? ??? ??? ?1)聲明函數使用function關鍵字
?? ??? ??? ??? ?第一種方式：
?? ??? ??? ??? ?var sum=function(a,b){
?? ??? ??? ??? ??? ?return a+b;
?? ??? ??? ??? ?};
?? ??? ??? ??? ?第二種方式：
?? ??? ??? ??? ?function sum2(a,b,c){
?? ??? ??? ??? ??? ?return a+b+c;
?? ??? ??? ??? ?};
?? ??? ??? ??? ?sum2(2,3,4);
?? ??? ??? ??? ?
?? ??? ??? ??? ?2)函數的調用：
?? ??? ??? ??? ??? ?-函數的引用+（）;
?? ??? ??? ??? ??? ?-sum(123,234)
?? ??? ??? ??? ??? ?-sum2(123,"abc",true)
?? ??? ??? ??? ?調用函數不會檢查參數類型和個數，所以在js中不存在重載這回事

例如：

?? ??? ??? ?
?? ??? ??? ?④對象
?? ??? ??? ??? ?Ⅰ對象的創建
?? ??? ??? ??? ??? ?(1)var obj=new Object();
?? ??? ??? ??? ??? ?(2)var obj ={}
?? ??? ??? ?
?? ??? ??? ??? ?Ⅱ動態的為對象添加屬性
?? ??? ??? ??? ??? ?對象.屬性名=屬性值
?? ??? ??? ??? ??? ?例：obj.name="張三";
?? ??? ??? ??? ??? ??? ?obj.age=16;
?? ??? ??? ??? ??? ??? ?obj.fun=function(){
?? ??? ??? ??? ??? ??? ??? ?alert("hello");
?? ??? ??? ??? ??? ??? ?};
?? ??? ??? ??? ?Ⅲ在創建對象時，直接添加屬性
?? ?????

　　注意：鍵值對之間使用 “ ：”隔開。

3.事件

　　(1)用戶操作網頁或者瀏覽器所發生的交互行為稱為事件。比如：點擊按鈕，最小化窗口，修改文本框內容等。
?? ??? (2)JS為我們定義許多瀏覽器中的事件。比如：單擊、雙擊、移動等。
?? ??? (3)我們可以通過為事件設置一個響應函數來對事件進行響應。可以通過兩種方式為元素綁定響應函數：
?? ??? ??? ?1)直接通過標簽的屬性來設置，這種方式是結構與行為耦合，不推薦使用
?? ??? ??? ??? ? <button οnclick="alert('hello')">按鈕</button>
?? ??? ??? ??? ? -這種方式叫做結構與行為耦合，不推薦使用這種方式
?? ??? ??? ?2)在<script>標簽來設置
?? ??? ??? ??? ?<button id="btn">按鈕</button>
?? ??? ??? ??? ?<script>
?? ??? ??? ??? ??? ?//獲取到按鈕的對象
?? ??? ??? ??? ??? ?var btn =document.getElementById("btn");
?? ??? ??? ??? ??? ?//為btn綁定一個單擊響應函數
?? ??? ??? ??? ??? ?btn.οnclick=function(){
?? ??? ??? ??? ??? ??? ?alert("hello");
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?</script>
?? ??? ??? ?3)幾種鼠標事件
?? ??? ??? ??? ?//鼠標單擊事件
?? ??? ??? ??? ?<button id="btn" οnclick="alert('你點我干嘛')">點我</button>
?? ??? ??? ??? ?

　　　　　　鼠標單擊按鈕事件觸發

　　　　
?? ??? ??? ??? ?//鼠標雙擊事件
?? ??? ??? ??? ?<button id="btn" οndblclick="alert('你點我干嘛')">點我</button>
?? ??? ??? ??? ?//鼠標移到按鈕上事件觸發
?? ??? ??? ??? ?<button id="btn" οnmοuseοver="alert('鼠標移動上來了！')">點我</button>
?? ??? ??? ??? ?//鼠標從按鈕上移走事件觸發
?? ??? ??? ??? ?<button id="btn" οnmοuseοut="alert('鼠標移走！')">點我</button>
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?

4.加載方式?

??????? (1)瀏覽器加載網頁代碼時是由上到下依次加載的。
?? ??? ?(2)如果我們在瀏覽器還尚未加載網頁中的元素，那么將無法確定，控制臺將會報錯。
?? ??? ?解決該問題有兩種方式：
?? ??? ??? ?1)將JS代碼編寫到body標簽的下邊。但是我們習慣上將JS、CSS等代碼都編寫在head標簽中，
?? ??? ??? ?這種形式不符合使用規則
?? ??? ??? ?2)將js代碼編寫到window.οnlοad=function(){}中，推薦使用方式
?? ??? ??? ?注意：編寫js時，上來就把window.οnlοad=function(){}寫上

?? ??? ???? 程序是一行一行執行的，如果var btn=document.getElementById("btn1");代碼之前沒有寫window.οnlοad=function(){}

那么在執行的時候是找不到body里面的id="btn1",因此window.οnlοad=function(){}作用就是加載完整個頁面之后再執行里面的內容。

　　但是如果將javascript寫在body里面，之前已經加載完了id="btn1"，所以var btn=document.getElementById("btn1");再運行就沒有問題了。

　　注意：<button>標簽只能寫在body里面。

5.DOM編程?

??? DOM全稱：Document Object Model?? ?

??? DOM編程是JavaScript中非常重要的一部分內容。??
?? ?DOM主要是通過JavaScript來控制網頁中的各種元素，從而達到使網頁可以和用戶進行動態交互的作用。
?? ?DOM的操作主要分為四部分：增、刪、改、查。
?? ?

?　（1）document對象:
?? ??? 　　?document是一個文檔節點，代表整個文檔，所有節點都是它的后代節點。
?? ??? 　　?document也是window的對象的屬性，可以直接使用。

??? （2）節點類型：
?? ?? ? ? ? ?? ① 元素節點：HTML文檔中的HTML標簽
?? ??? ??????? ②文本節點：元素的屬性
?? ??? ? ? ? ? ③ 屬性節點：HTML標簽中的文本內容

　　（3）節點屬性

　　（4）元素節點的屬性：?? ??? ??? ??? ?

　　　　1.獲取元素對象.屬性名?? ??? ??? ???

?　　　　例：element.value
?? ??? ??? ??? ??? ?element.id
?? ??? ??? ??? ??? ?element.className
?? ??? ??? ??? 　 2.設置元素對象.屬性名=新的值
?? ??? ??? ??? ?例：element.value="hello"
?? ??? ??? ??? ??? ?element.id="id01"
?? ??? ??? ??? ??? ?element.className="newClass"

?? ??? ??? ?其它屬性：
?? ??? ??? ??? ?innerHTML:元素節點通過該屬性獲取和設置標簽內部的html代碼
?? ??? ??? ??? ?nodeValue：文本節點可以通過nodeValue屬性獲取和設置文本節點的內容

?? ? （5）***DOM查詢
?? ??? ? 通過document對象查詢：
?? ??? ????? document.getElementById()
?? ??? ??? ?-通過id屬性獲取一個元素節點對象
?? ??? ???? document.getElementsByTagName()
?? ??? ??? ?-通過標簽名獲取一組元素節點對象
?? ??? ???? document.getElementByName()
?? ??? ??? ?-通過name屬性獲取一組元素節點對象,一般用來獲取表單項
?? ?
?? ??? ?通過具體的元素對象查詢：
?? ??? ??? ?element.getElementsByTagName
?? ??? ??? ?-查找當前元素節點內指定標簽名的子節點
?? 　　 element.childNodes
?? ??? ???? -查找當前節點的所有子節點
?? ??? ???? element.firstChild
?? ??? ???? -查找當前節點的第一個子節點
?? ??? ???? element.lastChild
?? ??? ???? -查找當前節點的最后一個子節點
?? ??? ???? element.parentNode
?? ??? ???? -查找當前節點的父節點
?? ??? ???? element.previousSibling
?? ??? ???? -查找當前節點的前一個兄弟節點
?? ??? ???? element.nextSibling
?? ??? ???? -查找當前節點的后一個兄弟節點
?? ?? 例： ????

注意：1.function myQuery(idStr,func){
?? ??? 　　?var btn=document.getElementById(idStr);
?? ??? ?　　btn.οnclick=func;
?? ?? ? }

這段代碼為4個查詢中共有的內容，所以封裝成一個方法，下面直接調用就可以了，避免寫重復代碼，起到了簡化代碼的作用。

　　2.在查詢? “#city的所有子節點” 的時候，其實只有四個--北京，上海，東京，首爾；但是在用火狐瀏覽器和谷歌瀏覽器運行時會把

節點與節點之間的空格也當作了一個節點，所有此時應該根據元素節點的屬性，用if語句判斷一下if(liEle5[i].nodeType==1){} ，當nodeType==1時才是元素節點。

??
?? （6）***DOM增刪改
?? ??? ??? ??? ①創建元素節點
?? ??? ??? ??? ?document.createElement(標簽名)
?? ??? ??? ? ②添加子節點
?? ??? ??? ??? ?父節點.appendChild(子節點)
?? ??? ??? ? ③插入節點
?? ??? ??? ??? ?父節點.insertBefore(新節點,舊節點)
?? ??? ??? ? ④替換節點
?? ??? ??? ??? ?父節點.replaceChild(新節點,舊節點)
?? ??? ??? ? ⑤刪除節點
?? ??? ??? ??? ?父節點.removeChild(子節點)
?? ??? ??? ??? ?子節點.parentNode.removeChild(子節點) *****
?? ??? ??? ? ⑥讀寫元素內部HTML代碼
?? ??? ??? ??? ?讀取
?? ??? ??? ??? ??? ?元素.innerHTML
?? ??? ??? ??? ?設置
?? ??? ??? ??? ???? 元素.innerHTML = 新值