JavaScript

1.簡介

JavaScript簡介：
JS是運行在瀏覽器端的一門腳本語言，一開始主要用來做瀏覽器驗證，但現在功能已經不止於此。
所謂腳本語言就是指，代碼不需要編譯，直接運行，並且讀入一行運行一行

JavaScript目前應用非常廣泛，例如：瀏覽器端的驗證，Ajax，客戶端等，甚至也有服務器端的JavaScript--node.js

2.編寫位置

　　（1）網頁內部
<script type="text/javascript">
alert("這是啥");

　　　　JavaScript一般單獨寫在一個.js文件中，通過以下方法來引用
<script type="text/javascript" src="script.js"></script>
（3）基本語法
①註釋
單行註釋 //
多行註釋 /**/
②變量
Ⅰ聲明：JS是一門弱類型語言，聲明變量時不需要指定變量的類型，只需要使用var關鍵字

例如：

④對象
Ⅰ對象的創建
(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 onclick="alert(‘hello‘)">按鈕</button>
-這種方式叫做結構與行為耦合，不推薦使用這種方式
2)在<script>標簽來設置
<button id="btn">按鈕</button>
<script>
//獲取到按鈕的對象
var btn =document.getElementById("btn");
//為btn綁定一個單擊響應函數
btn.onclick=function(){
alert("hello");
}
</script>
3)幾種鼠標事件
//鼠標單擊事件
<button id="btn" onclick="alert(‘你點我幹嘛‘)">點我</button>

　　　　　　鼠標單擊按鈕事件觸發

　　　　
//鼠標雙擊事件
<button id="btn" ondblclick="alert(‘你點我幹嘛‘)">點我</button>
//鼠標移到按鈕上事件觸發
<button id="btn" onmouseover="alert(‘鼠標移動上來了！‘)">點我</button>
//鼠標從按鈕上移走事件觸發
<button id="btn" onmouseout="alert(‘鼠標移走！‘)">點我</button>

4.加載方式

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

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

那麽在執行的時候是找不到body裏面的id="btn1",因此window.onload=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.onclick=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 = 新值

需要註意點：在設置元素節點時有以下兩種方式：

　　　　1.document.getElementById("bj").innerHTML = "天津";
2.document.getElementById("bj").firstChild.nodeValue="天津";

請參照以上（4）元素節點的屬性中其他屬性部分。

JavaScript知識概要