[TOC]
# 1.1 JavaScript基礎概念
JavaScript (ECMAScript) ：JavaScript 是腳本語言。JavaScript和ECMAScript通常被人用來表達相同的含義，但是JavaScript并不是這么一點含義，它是由ECMAScript 核心. DOM 文檔對象模型. BOM 瀏覽器對象模型 這三部分組成。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對于傳統編程來說，會在執行前對所有代碼進行編譯。
## 1.1.1 ECMAScript
組成部分：語法，類型，語句，關鍵字，保留字，操作符，對象。
## ECMAScript簡介
**ECMAScript**是一種由[Ecma國際](https://baike.baidu.com/item/Ecma%E5%9B%BD%E9%99%85)（前身為[歐洲計算機制造商協會](https://baike.baidu.com/item/%E6%AC%A7%E6%B4%B2%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%88%B6%E9%80%A0%E5%95%86%E5%8D%8F%E4%BC%9A/2052072),英文名稱是European Computer Manufacturers Association）通過ECMA-262標準化的腳本[程序設計語言](https://baike.baidu.com/item/%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E8%AF%AD%E8%A8%80)。這種語言在[萬維網](https://baike.baidu.com/item/%E4%B8%87%E7%BB%B4%E7%BD%91)上應用廣泛，它往往被稱為[JavaScript](https://baike.baidu.com/item/JavaScript)或[JScript](https://baike.baidu.com/item/JScript)，所以它可以理解為是JavaScript的一個標準,但實際上后兩者是ECMA-262標準的實現和擴展。
# 1.1.2 DOM
## 文檔對象模型（DOM ， Document Object Model）是針對XML但是經過拓展用于HTML的應用程序編程接口。DOM把整個頁面映射為一個多層節點結構，開發人員借助DOM Api對節點進行操作。
# HTML DOM （文檔對象模型）
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造為對象的樹。
# HTML DOM 樹
### 通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。
### · JavaScript 能夠改變頁面中的所有 HTML 元素
### · JavaScript 能夠改變頁面中的所有 HTML 屬性
### · JavaScript 能夠改變頁面中的所有 CSS 樣式
### · JavaScript 能夠對頁面中的所有事件做出反應
# 1.1.3 BOM
## 瀏覽器對象模型（Browser Object Model）使用BOM控制瀏覽器顯示頁面意外的部分。
## 1.2 在HTML中使用JavaScript方式
### 1.2.1 javaScript腳本加載的位置
1 通過在網頁中加入…標記JavaScript的開始和結束，將JavaScript代碼放到…之間
2 也可以引入一個外部的JavaScript文件，這個JavaScript文件一般以.js作為擴展名
3 原則上，放在之間。但視情況可以放在網頁的任何部分
4 一個頁面可以有幾個…</Script，不同部分的方法和變量，可以共享。
### 1.2.2 javaScript語句的注意點
（1）對大小寫敏感
（2）自動忽略多余的空格
（3）在文本字符串中使用反斜杠對代碼行進行換行
（4）單行注釋（//）多行注釋（/\* \*/）
## 1.3 JavaScript基本語法：
## 1.3.1 變量：
什么是變量？
變量是用于存儲信息的容器
變量的聲明
語法：
var 變量名
變量名 = 值;
變量要先聲明再賦值
變量可以重復賦值
變量的命名規則
變量必須以字母開頭；
變量也能以$和\_符號開頭（不過我們不推薦這么做）；
變量名稱對大小寫敏感（a和A是不同的變量)。
## 1.3.2 數據類型
### typeof操作符：用于檢測給定變量的數據類型。
### · undefined類型 只有一個特殊的值就是undefined，在使用var聲明變量但未初始化時，變量的值是undefined。
### · null類型 只有一個特殊的值就是null，null值表示一個空對象指針，使用typeof操作符檢測null值會返回“object”。
### · boolean類型 布爾值和布爾代數的表示完全一致，一個布爾值只有true、false兩種值，要么是true，要么是false，可以直接用true、false表示布爾值，也可以通過布爾運算計算出來。**boolean\*\*\*\*類型的字面值\*\*\*\*true\*\*\*\*和\*\*\*\*false\*\*\*\*是區分大小寫的**。
### · number類型 JavaScript不區分整數和浮點數，統一用Number表示，以下都是合法的Number類型：
~~~
123; // 整數123
070; //八進制的56
0xA; //十六進制的10
0.456; // 浮點數0.456
1.2345e3; // 科學計數法表示1.2345x1000，等同于1234.5
-99; // 負數
NaN; // NaN表示Not a Number，當無法計算結果時用NaN表示
Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示為Infinity
~~~
· string類型 字符串是以單引號’或雙引號”括起來的任意文本，比如’abc’，”xyz”等等。請注意，”或”“本身只是一種表示方式，不是字符串的一部分，因此，字符串’abc’只有a，b，c這3個字符。 如果’本身也是一個字符，那就可以用”“括起來，比如”I’m OK”包含的字符是I，’，m，空格，O，K這6個字符。 如果字符串內部既包含’又包含”怎么辦？可以用轉義字符\\來標識，比如：
`'I\'m \"OK\"!';`
表示的字符串內容是：I’m “OK”! 轉義字符\\可以轉義很多字符，比如\\n表示換行，\\t表示制表符，字符\\本身也要轉義，所以\\表示的字符就是\\。
· object類型 創建object類型的實例并為其添加屬性和方法，就可以創建自定義對象。
對象：由花括號分隔，。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔
對象屬性有兩種尋址方式：
~~~
name=person.lastname;
name=person["lastname"];
~~~
## 1.3.3 類型轉換：
使用：Number（）、parseInt() 和parseFloat（） 做類型轉換
~~~
Number()強轉一個數值(包含整數和浮點數)。
*parseInt()強轉整數，
*parseFloat（）強轉浮點數
~~~
函數isNaN()檢測參數是否不是一個數字。 is not a number
ECMAScript 中可用的 3 種強制類型轉換如下：
~~~
Boolean(value) - 把給定的值轉換成 Boolean 型；
Number(value) - 把給定的值轉換成數字（可以是整數或浮點數）；
String(value) - 把給定的值轉換成字符串；
~~~
## 1.3.4 運算符
1. 一元運算符
* delete：用于刪除對象中屬性的 如：delete o.name; //刪除o對象中的name屬性
void： void 運算符對任何值返回 undefined。沒有返回值的函數真正返回的都是 undefined。
* ++ --
一元加法和一元減法
2. 位運算符
位運算 NOT ~
位運算 AND &
位運算 OR |
位運算 XOR ^ (不同為1，相同則為0)
左移運算 <<
右移運算 >>
3. 邏輯運算符
邏輯 NOT ! 運算符 非
邏輯 AND && 運算符 與
邏輯 OR || 運算符 或
4. 乘性運算符：\*（ 乘） /(除) %（取模）求余
5. 加性運算符： + -
\*其中+號具有兩重意思：字串連接和數值求和。
就是加號”+“兩側都是數值則求和，否則做字串連接
6. 關系運算符 > >= < <=
7. 等性運算符 == === != !==
8. 條件運算符 ? : (三元運算符)
9. 賦值運算符 = += -= \*= /= %= >>= <<=
10 逗號運算符
用逗號運算符可以在一條語句中執行多個運算。
~~~
var iNum1=1, iNum2=2, iNum3=3;
~~~
## 1.3.5 操作符
位操作符
32位二進制表示整數，第32位為符號位
~~~
~ 按位非(NOT)
& 按位與(AND)
| 按位或(OR)
^ 按位異或(XOR)
<< 左移，不影響符號位
>> 有符號右移，保留符號位，不影響正負
<<< 無符號右移，連著符號位一起右移
~~~
關系操作符
操作符與C語言的語法基本類似，這里不詳細說明了。
## 1.3.6 語句
1. for-in 精準的迭代語句，可以用來枚舉對象的屬性
~~~
for(var propName in window){
document.write(propName);
}
~~~
輸出BOM中 window對象的所有屬性
迭代前最好先檢測對象是否為null或undefined。(ECMAScript5中不執行循環體,以前會報錯)
2. label語句，給代碼添加標簽
3. break和continue語句(break跳出循環，直接執行循環后的代碼。
continue跳出當前循環，接著進入下一次循環)
~~~
var num =0;
outer:
for(var i=0;i<10;i++){
for(var j=0;j<10;j++){
if(i == 5 && j==5){
continue outer;
}
num++;
}
}
alert(num); //95
~~~
4. with語句(不建議使用，可讀性差)
5. switch語句
~~~
var num = 15;
switch (true){ //輸出 Between 10 and 20，如果是false就輸出 Less than 0
case num<0:
alert("Less than 0");
break;
case num>=0&&num<=1:
alert("Between 0 and 1");
break;
case num>10&&num<=20:
alert("Between 10 and 20");
break;
default:
alert("More than 20");
}
~~~
## 1.3.7 數組
JavaScript的Array可以包含任意數據類型，并通過索引來訪問每個元素。
要取得Array的長度，直接訪問length屬性：
~~~
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6
~~~
這里要注意，直接給Array的length賦一個新的值會導致Array大小發生變化：
~~~
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr變為[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr變為[1, 2]
~~~
Array可以通過索引把對應的元素修改為新的值，因此，對Array的索引進行賦值會直接修改這個Array：
~~~
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr現在變為['A', 99, 'C']
~~~
請注意，如果通過索引賦值時，索引超過了范圍，同樣會引起Array大小的變化：
~~~
var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr變為[1, 2, 3, undefined, undefined, 'x']
~~~
大多數其他編程語言不允許直接改變數組的大小，越界訪問索引會報錯。然而，JavaScript的Array卻不會有任何錯誤。在編寫代碼時，不建議直接修改Array的大小，訪問索引時要確保索引不會越界。
* 轉換方法 所有對象都具有toLocaleString()，toString()，valueOf()方法。
~~~
· var colors = ["red", "blue", "green"]; //creates an array with three strings
· alert(colors.toString()); //red,blue,green
· alert(colors.valueOf()); //red,blue,green
· alert(colors); //red,blue,green
~~~
首先調用toString()方法，返回數組的字符串表示。toLocaleString()方法經常返回與toString()和valueOf()方法相同的值，但不同的是，調用的是每一項的toLocaleString()方法，而不是toString()。
~~~
var person1 = {
toLocaleString : function () {
return "Nikolaos";
},
toString : function() {
return "Nicholas";
}
};
var person2 = {
toLocaleString : function () {
return "Grigorios";
},
toString : function() {
return "Greg";
}
};
var people = [person1, person2];
alert(people); //Nicholas,Greg
alert(people.toString()); //Nicholas,Greg
alert(people.toLocaleString()); //Nikolaos,Grigorios
~~~
* indexOf
與String類似，Array也可以通過indexOf()來搜索一個指定的元素的位置：
~~~
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引為0
arr.indexOf(20); // 元素20的索引為1
arr.indexOf(30); // 元素30沒有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引為2
~~~
**數字\*\*\*\*30\*\*\*\*和字符串\*\*\*\*’30’\*\*\*\*是不同的元素。**
* slice
slice()就是對應String的substring()版本，它截取Array的部分元素，然后返回一個新的Array：
~~~
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 從索引0開始，到索引3結束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 從索引3開始到結束: ['D', 'E', 'F', 'G']
~~~
注意到slice()的起止參數包括開始索引，不包括結束索引。
如果不給slice()傳遞任何參數，它就會從頭到尾截取所有元素。利用這一點，我們可以很容易地復制一個Array：
~~~
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false
~~~
在只有一個參數時，返回從該參數指定位置開始到當前數組末尾的所有項，如果有兩個參數，返回起始和結束位置之間的一項（但不包括結束位置的項）。 **slice(\*\*\*\*）方法不會影響原始數組**
~~~
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow
~~~
* push和pop
push()向Array的末尾添加若干元素，pop()則把Array的最后一個元素刪除掉：
~~~
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的長度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 連續pop 3次
arr; // []
arr.pop(); // 空數組繼續pop不會報錯，而是返回undefined
arr; // []
~~~
* unshift和shift
如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：
~~~
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的長度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 連續shift 3次
arr; // []
arr.shift(); // 空數組繼續shift不會報錯，而是返回undefined
arr; // []
~~~
* unshift和shift
如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：
~~~
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的長度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 連續shift 3次
arr; // []
arr.shift(); // 空數組繼續shift不會報錯，而是返回undefined
arr; // []
~~~
* sort
sort()可以對當前Array進行排序，它會直接修改當前Array的元素位置，直接調用時，按照默認順序排序：
~~~
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
~~~
比較函數
~~~
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15
~~~
降序排序
~~~
function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //15,10,5,1,0
~~~
* reverse
reverse()把整個Array的元素反轉：
~~~
var arr = ['one', 'two', 'three'];
arr.reverse();
arr; // ['three', 'two', 'one']
~~~
* splice
splice()方法是修改Array的“萬能方法”，它可以從指定的索引開始刪除若干元素，然后再從該位置添加若干元素： 1.刪除：指定2個參數：要刪除的第一項和要刪除的項數。 2.插入：提供3個參數：起始位置、要刪除的項數、要插入的項數。 3.替換：指定3個參數：起始位置、要刪除的項數、要插入的任意數量的項。
~~~
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); //刪除第一項
alert(colors); //green,blue
alert(removed); //red - 返回數組中只包含一項
removed = colors.splice(1, 0, "yellow", "orange"); //從位置1開始插入兩項
alert(colors); //green,yellow,orange,blue
alert(removed); //返回的是一個空數組
removed = colors.splice(1, 1, "red", "purple"); //插入兩項，刪除一項
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow - 返回數組中只包含一項
~~~
* concat
concat()方法把當前的Array和另一個Array連接起來，并返回一個新的Array：
~~~
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
~~~
**concat()\*\*\*\*方法并沒有修改當前\*\*\*\*Array\*\*\*\*，而是返回了一個新的\*\*\*\*Array\*\*\*\*。**
實際上，concat()方法可以接收任意個元素和Array，并且自動把Array拆開，然后全部添加到新的Array里：
~~~
var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
~~~
* join
join()方法是一個非常實用的方法，它把當前Array的每個元素都用指定的字符串連接起來，然后返回連接后的字符串：
~~~
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
~~~
如果Array的元素不是字符串，將自動轉換為字符串后再連接。
## 1.3.8 對象
屬性是與對象相關的值。
方法是能夠在對象上執行的動作。
（1）創建 javaScript對象
JavaScript 中的幾乎所有事務都是對象：字符串、數字、數組、日期、函數，等等。
你也可以創建自己的對象。
~~~
person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";
~~~
(2)訪問對象的屬性
~~~
objectNamepropertyName
var message="Hello World!"; var x=message.length;
~~~
(3)訪問對象的方法
~~~
objectNamemethodNamevar message="Hello world!"; var x=message.toUpperCase();
~~~
Date對象：
創建方式：
~~~
myDate = new Date();
~~~
日期起始值:1970年1月1日00:00:00
主要方法
~~~
getYear(): 返回年數 setYear(): 設置年數
getMonth(): 返回月數 setMonth():設置月數
getDate(): 返回日數 setDate():設置日數
getDay(): 返回星期幾 setDay():設置星期數
getHours():返回小時數 setHours():設置小時數
getMinutes():返回分鐘數 setMintes():設置分鐘數
getSeconds():返回秒數 setSeconds():設置秒數
getTime() : 返回毫秒數 setTime() :設置毫秒數
~~~
## 1.3.9 異常
try 語句測試代碼塊的錯誤。 catch 語句處理錯誤。 throw 語句創建自定義錯誤。
**（\*\*\*\*1\*\*\*\*）\*\*\*\*JavaScript** **測試和捕捉** try 語句允許我們定義在執行時進行錯誤測試的代碼塊。 catch 語句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊。 JavaScript 語句 try 和 catch 是成對出現的。 **（\*\*\*\*2\*\*\*\*）\*\*\*\*Throw** **語句** throw 語句允許我們創建自定義錯誤。 正確的技術術語是：創建或拋出異常（exception）。 如果把 throw 與 try 和 catch 一起使用，那么您能夠控制程序流，并生成自定義的錯誤消息。
~~~
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
~~~
### 1.3.10 函數
（1）函數語法
~~~
function functionname()
{
這里是要執行的代碼
}
~~~
（2）帶參數的函數
~~~
function myFunction(var1,var2)
{
這里是要執行的代碼
}
~~~
（3）帶有返回值的函數
~~~
function myFunction()
{
var x=5;
return x;
}
~~~
若僅僅希望退出函數時 ，也可使用 return 語句
~~~
function myFunction(a,b)
{
if (a>b)
{
return;
}
x=a+b
}
~~~
### 1.3.11 內置函數
1. Date：日期函數
> 屬性(1): constructor 所修立對象的函數參考 prototype能夠為對象加進的屬性和方法
> getDay() 返回一周中的第幾天(0-6)
> getYear() 返回年份.2000年以前為2位,2000(包括)以后為4位
> getFullYear()返回完全的4位年份數
> getMonth()返回月份數(0-11)
> getDate() 返回日(1-31)
> getHours() 返回小時數(0-23)
> getMinutes() 返回分鐘(0-59)
> getSeconds() 返回秒數(0-59)
> getMilliseconds() 返回毫秒(0-999)
> getUTCDay() 依據國際時間來得到如今是禮拜幾(0-6)
> getUTCFullYear() 根據邦際時間來失掉完全的年份
> getUTCMonth()依據國際時間來得到月份(0-11)
> getUTCDate() 依據國際時間來失掉日(1-31)
> getUTCHours() 依據國際時間來失掉小時(0-23)
> getUTCMinutes() 根據邦際光陰來往歸分鐘(0-59)
> getUTCSeconds() 依據國際時間來返回秒(0-59)
> getUTCMilliseconds()依據國際時間來返回毫秒(0-999)
> getTime() 前往自1970年1月1號0:0:0到如今一同花來的毫秒數
> getTimezoneoffset()往歸時區偏偏差值,便格林威亂均勻時光(GMT)取運轉足原的盤算機所處時區設置之間相差的分鐘數)
> parse(dateString) 返回正在Date字符串中自從1970年1月1日00:00:00以來的毫秒數
> setYear(yearInt)設置年份.2位數或4位數
> setFullYear(yearInt)設置年份.4位數
> setMonth(monthInt)設放月份(0-11)
> setDate(dateInt) 設置日(1-31)
> setHours(hourInt) 設置小時數(0-23)
> setMinutes(minInt) 設置分鐘數(0-59)
> setSeconds(secInt) 設放秒數(0-59)
> setMilliseconds(milliInt) 設放毫秒(0-999)
> setUTCFullYear(yearInt) 依據國際時間來設置年份
> setUTCMonth(monthInt)依據國際時間來設置月(0-11)
> setUTCDate(dateInt) 依據國際時間來設置日(1-31)
> setUTCHours(hourInt) 依據國際時間來設置小時
> setUTCMinutes(minInt)依據國際時間來設置分鐘
> setUTCSeconds(secInt)依據國際時間來設置秒
> setUTCMilliseconds(milliInt)根據邦際時間來設置毫秒
> setTime(timeInt)設置自1970年1月1日開端的時間.毫秒數
> toGMTString()依據格林威亂時光將Date對于象的日期(一個數值)改變成一個GMT光陰字符串,如:Weds,15 June l997 14:02:02 GMT
> toUTCString() 依據通用時間將一個Date對象的日期轉換為一個字符串
> toLocaleString()把Date對象的日期(一個數值)改變成一個字符串,使用所在盤算機上配置使用的特定日期格局
> toSource()顯示對象的源代碼
> toString()將日期對象轉換為字符串 UTC(yyyy, mm, dd, hh, mm, ss, msec)往歸自格林威亂尺度光陰到指訂時光的差距,雙位為毫秒
> valueOf()返回日期對象的本初值
2.Math：數學函數
> constructor 所樹立對象的函數參考
> prototype可以為對于象參加的屬性和方式
> E歐推常質,天然對數的頂(約等于2.718)
> LN2 2的天然對數(約即是0.693)
> LN10 10的天然對數(約等于2.302)
> LOG2E 以2為頂的e的對數.(約等于1.442)
> LOG10E 以10為頂的e的對數(約等于0.434)
> PI ∏的值(約即是3.14159)
> SQRT1\_2 1/2(0.5)的平方根(便l除以2的平方根,約即是o.707)
> SQRT2 2的平方根(約等于1.414)
> 方法: abs(x) 返回數字的相對值
> acos(x)返回數字的反余弦值
> asin(x)返回數字的反正弦值
> atan(x)返回位于-PI/2 和 PI/2 的反正切值
> atan2(y,x)前往（x,y）位于 -PI 到 PI 之間的角度
> ceil(x)返回 x 四舍五入后的最大整數
> cos(x)前往一個數字的余弦值
> exp(x)返回 E^x 值
> floor(x)返回 x 四舍五入后的最小整數
> log(x)返回底數為E的自然對數
> max(x,y)返回 x 和 y 之間較大的數
> min(x,y)返回 x 和 y 之間較小的數
> pow(x,y)返回 y^x 的值
> random()返回位于 0 到 1 之間的隨機函數
> round(x)四舍五進后與整
> sin(x)返回數字的正弦值
> sqrt(x)返回數字的平方根
> tan(x)返回一個角度的正切值
> toSource()顯示對象的流代碼
> valueOf()返回數教對象的本初值3.Number 屬性: MAX\_VALUE
>
The largest possible value a number in JavaScript can have 1.7976931348623157E+308 MIN\_VALUE
The smallest possible value a number in JavaScript can have 5E-324 NaN Equal to a value that is not a number. NEGATIVE\_INFINITY A value that is less than MIN\_VALUE. POSOTIVE\_INFINITY A value that is greater than MAX\_VALUE. prototype A static property of the Number object 方法: toString Returns a string representing the specified object
valueOf() 返回數教對象的本初值4.Boolean屬性: constructor 所樹立對象的函數參考 prototype可以為對象參加的屬性和方式 法子: toSource() 顯示對象的流代碼 toString()將布我值轉換為字符串,并且返回成果 valueOf()返回布我對象的原始值
3. String ：字符函數
> 屬性: constructor 所樹立對象的函數參考 prototype可以為對于象參加的屬性和方式 length返回字符串的字符長度 法子(20): anchor("name")用來把字符串轉換為HTML錨面標志內() big() 把字符串中的文本變成大字體() blink() 把字符串中的文本變成閃耀字體() bold() 把字符串中的文本變成烏字體() fixed() 把字符串中的文本變成流動間距字體,便電報情勢() fontcolor(color)設置字符串中文本的色彩() Fontsize(size) 把字符串中的文本變成指定大小() italics() 把字符串中的白原變成斜字體() Link(url)用來把字符串轉換-HTML鏈交標志中() small() 把字符串中的文本變成小字體() strike() 把字符串中的文本變成劃掉字體() sub() 把字符串中的文本變成下標(subscript)字體((SUB>) sup() 把字符串中的文本變成上標(superscript)字體() charAt(index) 返回指定索引處的字符 charCodeAt(index)返回一個整數,該整數表現String對象中指定位置處的字符的Unicode編碼 concat(string2)銜接兩條或少條字符串 fromCharCode(num1, num2, …,BB霜, numN)獲取指定的Unicode值并返回字符串 indexOf(searchString, startIndex)返回字符串中第一個呈現指定字符串的地位 lastlndexOf(searchString, startIndex)返回字符串中最后一個呈現指定字符串的地位 match(regex)在字符串中查覓指定值 replace(regex, newString)將字符串中的某些字符替代成其它字符 search(regex)針對某施行值對字符串入止查覓 slice(startIndex, endIndex)將部門字符抽出并在新的字符串中返回剩余局部 split(delimiter)將字符串分配為數組 substr(startIndex, length)從startIndex與,取length個字符 substring(startIndex, endIndex)從startIndex和endIndex之間的字符,沒有包含endIndex toLowerCase() 把字符串中的文本變成小寫 toUpperCase()把字符串中的白本變成大寫 toSource()顯示對象的源代碼 valueOf()返回字符串對象的原始值
4.Array ：數組函數
> 屬性: constructor 所修立對象的函數參考 prototype能夠為對象加入的屬性和方法 index For an array created by a regular expression match, the zero-based index of the match in the string. input For an array created by a regular expression match, reflects the original string against which the regular expression was matched. length獲取數組元素的個數,即最大下標加1辦法(13):concat(array1,arrayn)將兩個或兩個以上的數組值銜接止來,合并后返回成果 join(string)將數組中元素合并為字符串,十月媽咪,string為分隔符.如省詳參數則直交合并,不再分隔 pop()移除數組中的最后一個元素并返回當元素 push(value)在數組的終尾加上一個或多個元素,并且返回新的數組長度值 reverse()倒置數組中元素的次序,反背排列 shift()移除數組中的第一個元素并返回當元素 slice(start, deleteCount, \[item1\[, item2\[,...\[,itemN\]\]\]\])返從一個數組中移除一個或少個元素,假如必要,在所移除元素的地位上拔出新元素,返回所移除的元素 sort(compare Function)在已指定排序號的情形下,依照元素的字女次序排列,假如不是字符串類型則轉換成字符串再排序,返回排序后的數組 splice()為數組刪除并加加新的元素 toSource()顯示對象的源代碼 toString()將數組一切元素返回一個字符串,其間用逗號分隔 unshift(value)為數組的開端部門加上一個或者少個元葷,并且返回當數組的新長度 valueOf()返回數組對象的原始值
5.齊局
> 屬性: Infinity 指定一個正負無限大的數值 NaN指定一個 “非數字” 值 undefined指訂一個已被賦值的變質法子:decodeURI() 為加稀的URI入止解碼 decodeURIComponent()為加稀的URI組件解碼 encodeURI()將字符串加密為URI encodeURIComponent() 將字符串加稀為URI組件 escape(string)加密一個字符串 ()使用escape()對一個字符串入止解碼 eval\_r(string)斷定一個字符串并將其以足本代碼的情勢施行 isFinite(number)檢測一個值能否為一個有限數字,返回True或False isNaN(string) 檢測一個值能否沒有是一個有限數字 Number()將一個對象的值轉換為一個數字 parseFloat(string)將一個字符串解析為一個浮面數字 parseInt(string)將一個字符串解析為一個整數,沒有是四舍五進操做,而是切尾 String(object)將一個對象值轉換為一個字符串 number(object)
6.事情
> 屬性: a.窗心事件,只在body和frameset元素中才有效 onload頁里或者圖片加載完成時 onunload用戶分開頁里時 b.表雙元素事情,正在表雙元素中才有效 onchange框內容轉變時 onsubmit點打降接按鈕時 onreset沉新點擊鼠標按鍵時 onselect白原被挑選時 onblur元素失來焦點時 onfocus該元素獲與焦面時 c.鍵盤事情,base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里皆無效 onkeydown按下鍵盤按鍵時 onkeypress按下或按住鍵盤按鍵時 onkeyup擱啟鍵盤按鍵時 d.正在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元葷里皆無效 onclick鼠標點打一個對象時 ondblclick鼠標雙打一個對象時 onmousedown鼠本被按下時 onmousemove鼠標被挪動時 onmouseout鼠本分開元葷時 onmouseover鼠標經由元素時 onmouseup開釋鼠本按鍵時
## 1.4 JavaScript常用技巧函數：
### 1.4.1 HTML的標簽（節點）操作
~~~
document.write(""); //輸出的
document.getElementById("id名")； //獲取html頁面標簽中，標簽id屬性等于此值的對象。
如：var id = document.getElementById("hid"); //獲取id值為hid的標簽對象
document.getElementsByTagName("標簽名"); //獲取當前文檔執行的標簽對象
~~~
### 1.4.2 HTML標簽對象的操作：
~~~
標簽對象.innerHTML="內容"；//在標簽對象內放置指定內容
標簽對象.style.css屬性名="值" //改變標簽對象的樣式。
示例：id.style.color="red";
注意：屬性名相當于變量名,所以css屬性名中的減號要去掉，將后面的首字母大寫。
如：font-size（css）---> fontSize(JS屬性)
標簽對象.value；
//獲取標簽對象的value值
標簽對象.value=”值“；//設置標簽對象的value值
~~~
### 1.4.3 輸出內容（document.write）
document.write()直接在網頁中輸出內容。
第一種：輸出內容用“”括起，直接輸出“”號內的內容。
~~~
document.write("I love JavaScript!");
~~~
第二種：通過變量，輸出內容
~~~
var mystr = "hello world";
document.write(mysrt);//直接寫變量名，輸出變量存儲的內容
~~~
第三種：輸出多項內容，內容之間用+號連接。
~~~
var mystr = "hello";
document.write(mystr + "I love Java Script");//多項內容之間用+號連接
~~~
第四種:輸出HTML標簽，并起作用，標簽使用“”括起來。
~~~
var mystr="hello";
document.write(mystr+"<br>");//輸出hello后，輸出一個換行符
document.write("JavaScript");
~~~
### 1.4.4 警告（alert 消息對話框）
我們在訪問網站的時候，有時會突然彈出一個小窗口，上面寫著一段提示信息文字。如果你不點擊“確定”，就不能對網頁做任何操作，這個小窗口就是使用alert實現的。
語法：alert(字符串或變量);
~~~
var mynum = 30;
alert("hello!");
alert(mynum);
~~~
結果：按順序彈出消息框（alert彈出消息對話框包含一個確定按鈕）
注意:
1\. 在點擊對話框"確定"按鈕前，不能進行任何其它操作。
2\. 消息對話框通常可以用于調試程序。
3\. alert輸出內容，可以是字符串或變量，與document.write 相似
### 1.4.5 確認選擇（confirm 消息對話框）
除了向用戶提供信息，我們還希望從用戶那里獲得信息。這里就用到了confirm 消息對話框。
confirm 消息對話框通常用于允許用戶做選擇的動作，如：“你對嗎？”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。
語法：confirm(str);
參數說明：str:在消息對話框中要顯示的文本 返回值：Boolean值
返回值：
當用戶點擊"確定"按鈕時，返回true
當用戶點擊"取消"按鈕時，返回false
注: 通過返回值可以判斷用戶點擊了什么按鈕
~~~
<script type="text/javascript">
var mymessage=confirm("你喜歡JavaScript嗎?");
if(mymessage==true){
document.write("很好,加油!");
}else{
document.write("JS功能強大，要學習噢!");
}
</script>
~~~
### 1.4.6 提問（prompt 消息對話框）
有時候，不僅希望用戶回答Yes/No。而是希望得到更特定的響應。這中情況我們可以利用prompt。
prompt彈出消息對話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對話框（包含一個確定按鈕、取消按鈕與一個文本輸入框）。
語法：
~~~
prompt(str1,str2);
~~~
參數說明：
str1:要顯示在消息對話框中的文本，不可修改
str2:文本框中的內容，可以修改
返回值：
1、點擊確定按鈕，文本框中的內容將作為函數返回值
2、點擊取消按鈕，將返回null
~~~
function rec(){
var score; //score變量，用來存儲用戶輸入的成績值。
score = prompt("請輸入你的成績","90");
if(score>=90){
document.write("你很棒!");
}else if(score>=75){
document.write("不錯吆!");
}else if(score>=60){
document.write("要加油!");
}else{
document.write("要努力了!");
};
} ;
<script>
var myName = prompt("輸入您的名字");
if(myName != null && myName != ""){
document.write("welcom to" + myName);
}else{
document.write("welcom to my friend");
}
</script>
~~~
### 1.4.7 打開新窗口（window.open）
語法：
~~~
window.open([URL], [窗口名稱], [參數字符串])
~~~
參數說明:
URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那么窗口就不顯示任何文檔。
窗口名稱：可選參數，被打開窗口的名稱。
1.該名稱由字母、數字和下劃線字符組成。
2.窗口名稱：可選,該字符串是一個由逗號分隔的特征列表，聲明了被打開窗口的名稱。可以是"\_top"、"\_blank"、"\_selft"、"\_parent"等。
~~~
_blank 在新窗口顯示目標網頁
_selft 在當前窗口顯示目標網頁
_parent 框架網頁中當前整個窗口位置顯示目標網頁
_top 框架網頁中在上部窗口中顯示目標網頁
~~~
3.相同 name 的窗口只能創建一個，要想創建多個窗口則 name 不能相同。
4.name 不能包含有空格。
參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
參數表：
~~~
top Number 窗口頂部離開屏幕頂部的像素數
left Number 窗口左端離開屏幕左端的像素數
width Number 窗口的寬度
height Number 窗口的高度
menubar yes,no 窗口有沒有菜單
toolbar yes,no 窗口有沒有工具條
scrollbars yes,no 窗口有沒有滾動條
status yes,no 窗口有沒有狀態欄
~~~
~~~
<script type="text/javascript">
window.open('http://','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
~~~
### 1.4.8 關閉窗口（window.close）
close()關閉窗口
用法：
~~~
window.close();//關閉本窗口
<窗口對象>.close();//關閉指定的窗口
~~~
例如:關閉新建的窗口。
~~~
<script type="text/javascript">
var mywin=window.open('//www.jb51.net'); //將新打的窗口對象，存儲在變量mywin中
mywin.close();
</script>
~~~
### 1.4.9 innerHTML屬性
innerHTML屬性用于獲取或替換HTML元素的內容。
語法：
~~~
Object.innerHTML
~~~
Object是獲取的元素對象，如通過document.getElementById("ID")獲取元素。
~~~
<h2 id="con">javascript</H2>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h2標簽內容
mychar.innerHTML="hello world"
document.write("修改后的標題:"+mychar.innerHTML); //輸出修改后h2標簽內容
</script>
~~~
### 1.4.10 改變HTML樣式
語法：
~~~
Object.style.property=new style;
~~~
注意：Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素
~~~
<h2 id="con">I love JavaScript</h2>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.background="#ccc";
mychar.style.width="300px";
</script>
~~~
### 1.4.11 顯示和隱藏（display屬性）
語法：
~~~
Object.style.display = value
~~~
value值：
~~~
none 此元素不會被顯示（及隱藏）
block 此元素將顯示為塊級元素（即顯示）
mychar.style.display = "block"
~~~
### 1.4.12 控制類名（className屬性）
className屬性設置或返回元素的class屬性。
語法：
~~~
object.className = classname
~~~
作用：
1、獲取元素的class屬性
2、為網頁內的某個元素指定一個css樣式來更改該元素的外觀
~~~
p2.className = "two";
~~~
以上這篇Javascript基礎學習筆記(菜鳥必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
## 1.5 JavaScript 表單驗證
JavaScript 可用來在數據被送往服務器前對HTML 表單中的這些輸入數據進行驗證
被JavaScript 驗證的這些典型的表單數據有：
· 用戶是否已填寫表單中的必填項目？
· 用戶輸入的郵件地址是否合法？
· 用戶是否已輸入合法的日期？
· 用戶是否在數據域 (numeric field) 中輸入了文本？
### 1.5.1 利用onsubmit表單認證
如下為一個javacript的一個重要功能應用，利用onsubmit表單認證
~~~
<html>
<head>
<script type="text/javascript">
fuvtion check(){
if(document.text.t.value==""){
alert("字符不能為空");
return false；
}
return true；
}
</script>
</head>
<body>
<from name="test" action="test.html" onsubmit ="return check()">
<input type="text" name="t">
<input type="submit" value="OK">
</body>
</html>
~~~
### 1.5.2 必填（或必選）項目
~~~
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
~~~
### 1.5.3 E-mail驗證
意思就是說，輸入的數據必須包含 @ 符號和點號(.)。同時，@ 不可以是郵件地址的首字符，并且 @ 之后需有至少一個點
~~~
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
~~~
說明：
with(field){};設定作用域
focus() 方法用于給予該元素焦點。這樣用戶不必點擊它，就能編輯顯示的文本了。
## 1.6 JavaScript事件處理：
### 1.6.1 使用一個匿名或回調函數添加事件
有三種方法加事件
第一種：
格式：
~~~
<tag on事件="事件處理程序" />
~~~
\*第二種：
~~~
<script>
對象.on事件=事件處理程序
</script>
~~~
第三種：(火狐不兼容)
~~~
<script for="事件源ID" event="on事件">事件處理程序</script>
~~~
### 1.6.2 事件對象：
屬性：
~~~
1\. srcElement
2\. keyCode 鍵盤值
~~~
### 1.6.3 事件 event window.event
~~~
1\. srcElement 代表事件源對象
2\. keyCode 事件發生時的鍵盤碼 keypress , keydown keyup
3\. clientX, clientY 坐標位置
4\. screenX, screenY
5\. returnValue
6\. cancelBubble;
~~~
~~~
//為頁面添加鼠標右點擊事件
window.document.oncontextmenu=function(ent){
//兼容IE和火狐瀏覽器兼容
var event=ent || window.event;
//獲取事件坐標位置
var x=event.clientX;
var y=event.clientY;
...
}
/*********************對象添加事件*******************/
function addEvent(obj,type,fun){
obj=$(obj);
if(obj.addEventListener){
obj.addEventListener(type,fun); //FF
return true;
}else if(obj.attachEvent){
return obj.attachEvent("on"+type,fun); //IE
}else{
return false;
};
};
/*********************對象刪除事件*******************/
function delEvent(obj,type,fun){
obj=$(obj);
if(obj.addEventListener){
obj.removeEventListener(type,fun);
return true;
}else if(obj.attachEvent){
obj.detachEvent("on"+type,fun);
return true;
}else{
return false;
};
};
~~~
~~~
document.getElementById("one").offsetHeight; //獲取one對應對象的高度
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
document.all ? 'IE' : 'others'：在IE下document.all值為1，而其他瀏覽器下的值為0；
~~~
## 1.7 BOM
### 1.7.1 window對象
~~~
<button onclick="window.location=''">跳轉</button>
~~~
常用的屬性：
~~~
*document ：對 Document 對象的只讀引用
*history
：對 History 對象的只讀引用。
*location：用于窗口或框架的 Location 對象
Navigator： 對 Navigator 對象的只讀引用
*parent： 返回父窗口。
length: 設置或返回窗口中的框架數量。
Screen: 對 Screen 對象的只讀引用
status: 設置窗口狀態欄的文本。
top: 返回最頂層的先輩窗口。
~~~
常用方法：
~~~
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt() 顯示可提示用戶輸入的對話框。
close() 關閉瀏覽器窗口。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
scrollTo() 把內容滾動到指定的坐標。
setTimeout() 在指定的毫秒數后調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
~~~
### 1.7.2 Navigator 對象
Navigator 對象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平臺專用的配置。
常用屬性：
~~~
with(document) {
write ("你的瀏覽器信息：<ul>");
write ("<li>代碼："+navigator.appCodeName+"</li>");
write ("<li>名稱："+navigator.appName+"</li>");
write ("<li>版本："+navigator.appVersion+"</li>");
write ("<li>語言："+navigator.language+"</li>");
write ("<li>編譯平臺："+navigator.platform+"</li>");
write ("<li>用戶表頭："+navigator.userAgent+"</li>");
write ("</ul>");
}
~~~
### 1.7.3 Screen 對象
Screen 對象包含有關客戶端顯示屏幕的信息
常用屬性：
~~~
document.write( "屏幕寬度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
document.write( "屏幕可用寬度："+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度："+screen.availHeight+"px" );
~~~
參考了解其他屬性信息獲取方式
~~~
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
~~~
### 1.7.4 History 對象
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
### 1.7.5 Location 對象
Location 對象包含有關當前 URL 的信息。
~~~
//獲取頁面中第二form表單中，一個username輸入框的值（7種方式）
//alert(document.forms[1].username.value);
alert(document.myform.username.value);
//alert(document.forms.myform.username.value);
//alert(document.forms.item(1).username.value);
//alert(document.forms['myform'].username.value);
//alert(document['myform'].username.value);
//alert(document.forms.item('myform').username.value); //火狐不兼容
~~~
## 1.8 DOM
### 1.8.1 基本概念
HTML DOM 定義了訪問和操作HTML文檔的標準方法。
HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
DOM 被分為不同的部分：
1.Core DOM
定義了一套標準的針對任何結構化文檔的對象
2.XML DOM
定義了一套標準的針對 XML 文檔的對象
3.HTML DOM
定義了一套標準的針對 HTML 文檔的對象。
節點：根據 DOM，HTML 文檔中的每個成分都是一個節點。
DOM 是這樣規定的：
> 整個文檔是一個文檔節點
> 每個 HTML 標簽是一個元素節點
> 包含在 HTML 元素中的文本是文本節點
> 每一個 HTML 屬性是一個屬性節點
> 注釋屬于注釋節點
節點彼此間都存在關系。
> 除文檔節點之外的每個節點都有父節點。
> 大部分元素節點都有子節點。
> 當節點分享同一個父節點時，它們就是同輩（同級節點）。
> 節點也可以擁有后代，后代指某個節點的所有子節點，或者這些子節點的子節點
> 節點也可以擁有先輩。先輩是某個節點的父節點，或者父節點的父節點
查找并訪問節點
你可通過若干種方法來查找您希望操作的元素：
> 通過使用 getElementById() 和 getElementsByTagName() 方法
> 通過使用一個元素節點的 parentNode、firstChild 以及 lastChild childNodes屬性
節點信息
每個節點都擁有包含著關于節點某些信息的屬性。這些屬性是：
~~~
nodeName（節點名稱）
nodeValue（節點值）
nodeType（節點類型）
nodeName 屬性含有某個節點的名稱。
元素節點的 nodeName 是標簽名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
~~~
### 1.8.2 HTML DOM 對象參考
~~~
Document: 代表整個 HTML 文檔，可被用來訪問頁面中的所有元素
常用集合屬性：forms
Anchor : 代表 <a> 元素
Area : 代表圖像映射中的 <area> 元素
Base : 代表 <base> 元素
Body : 代表 <body> 元素
Button : 代表 <button> 元素
Event : 代表某個事件的狀態
Form : 代表 <form> 元素
Frame : 代表 <frame> 元素
Frameset: 代表 <frameset> 元素
Iframe : 代表 <iframe> 元素
Image : 代表 <img> 元素
Input button : 代表 HTML 表單中的一個按鈕
Input checkbox
: 代表 HTML 表單中的復選框
Input file : 代表 HTML 表單中的文件上傳
Input hidden : 代表 HTML 表單中的隱藏域
Input password : 代表 HTML 表單中的密碼域
Input radio : 代表 HTML 表單中的單選按鈕
Input reset : 代表 HTML 表單中的重置按鈕
Input submit : 代表 HTML 表單中的確認按鈕
Input text : 代表 HTML 表單中的文本輸入域（文本框）
Link : 代表 <link> 元素
Meta : 代表 <meta> 元素
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表單中的選擇列表
Style : 代表單獨的樣式聲明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
~~~
### 1.8.3 HTML的DOM
~~~
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表單中的選擇列表
Style : 代表單獨的樣式聲明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
~~~
## 1.9 XML的DOM
DOM （Document Object Model） 文檔對象模型
### 1.9.1 document 文檔 HTML XML 文件 （標記語言)
~~~
<body>
<div>
<!-- -->
<a href="#">wwww</a>
</div>
</body>
~~~
節點：
將文檔想成一個倒樹， 每一個部分（根、元素、文本（內容）， 屬性， 注釋）都是一節點。
根據 DOM，HTML 文檔中的每個成分都是一個節點。
DOM 是這樣規定的：
~~~
1\. 整個文檔是一個文檔節點(根節點)
2\. 每個 HTML 標簽是一個元素節點
3\. 包含在 HTML 元素中的文本是文本節點
4\. 每一個 HTML 屬性是一個屬性節點
5\. 注釋屬于注釋節點
~~~
### 1.9.2 父、子和同級節點
節點樹中的節點彼此之間都有等級關系。
父、子和同級節點用于描述這種關系。父節點擁有子節點，位于相同層級上的子節點稱為同級節點（兄弟或姐妹）。
~~~
1\. 在節點樹中，頂端的節點成為根節點
2\. 根節點之外的每個節點都有一個父節點
3\. 節點可以有任何數量的子節點
4\. 葉子是沒有子節點的節點
5\. 同級節點是擁有相同父節點的節點
~~~
只要知道一個節點， 按關系找到其它節點
父節點： parentNode
子節點（第一個， 最后一個） childNodes firstChild lastChild
同胞（同輩）節點 （上一個， 下一個）nextSibling previousSibling
### 1.9.3 獲取節點的方式：
~~~
array getElementsByTagName("節點名"); //獲取所對應節點名（所有），返回的是數組
object getElementById("id名"); //獲取id名的唯一節點對象
~~~
示例：(找節點)
~~~
document.getElementsByTagName("li"); //所有所有li節點
document.getElementById("lid"); //獲取id值為lid的唯一節點
document.getElementById("uid").getElementsByTagName("li");
//獲取id值為uid中所有li子節點
document.getElementsByTagName("ul")[0].getElementsByTagName("li");
//獲取第一個ul節點中所有li子節點
~~~
獲取到的標記名(多個)、 id（唯一）、 name（多個）
### 1.9.4 每個節點中的內容
~~~
節點類型nodeType、節點名nodeName，節點值nodeValue
節點名nodeName：
nodeName 是只讀的
元素節點的 nodeName 與標簽名相同
屬性節點的 nodeName 是屬性的名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
節點值nodeValue
元素節點的 nodeValue 是 undefined
文本節點的 nodeValue 是文本自身
屬性節點的 nodeValue 是屬性的值
nodeType（節點類型）
元素類型
節點類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
~~~
### 1.9.5 Object 對象 （HTML元素 轉成的對象(js對象)）
注意： 如果使用js操作HTML文檔， 就需要選將HTML文檔結構轉成Js對象
a. 操作屬性:
~~~
nodeName（節點名稱）
nodeValue（節點值）
nodeType（節點類型）
其他屬性：（針對于節點）
childNodes 返回節點到子節點的節點列表。
firstChild 返回節點的首個子節點。
lastChild 返回節點的最后一個子節點。
nextSibling 返回節點之后緊跟的同級節點。
previousSibling 屬性可返回某節點之前緊跟的節點（處于同一樹層級）
parentNode 返回節點的父節點。
textContent設置或返回節點及其后代的文本內容。
~~~
b. 操作內容
~~~
innerText(IE) textContent(FF) //獲取的是顯示的內容，不包含HTML標簽
innerHTML //獲取的是顯示的內容，會包含HTML
outerText
outerHTML
表單
value
~~~
c. 操作樣式
~~~
aobj.style.backgroundColor="red";
aobj.style.fontSize="3cm";
className
aobj.className="test";
aobj.className+=" demo";
aobj.className="";
~~~
e. 操作節點：
~~~
appendChild()
向節點的子節點列表的結尾添加新的子節點。
cloneNode()
復制節點。
removeChild()
刪除（并返回）當前節點的指定子節點。
replaceChild()
用新節點替換一個子節點。
hasAttributes() 判斷當前節點是否擁有屬性。
hasChildNodes() 判斷當前節點是否擁有子節點。
insertBefore() 在指定的子節點前插入新的子節點。
~~~
f. 創建節點：
~~~
* createElement() 創建元素節點
createAttribute() 來創建屬性節點 可以：元素節點.屬性名=值；
createTextNode() 來創建新的文本節點 可以：元素節點.innerHTML=文本內容；
~~~
有了以上三點的操作之前先轉成對象
轉成對象的兩種形式：
1\. 標記名(多個)、 id（唯一）、 name（多個）
document中的三個方法
~~~
var objs=document.getElementsByTagName("div"); //獲取多個
var objs=document.getElementById("one");
//獲取一個
var objs=document.getElementsByName("two");
~~~
## 1.10 Ajax
var xmlhttp;
### 1.10.1 創建請求對象
~~~
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
~~~
### 1.10.2 設置回調函數（監聽）
~~~
xmlhttp.onreadystatechange=函數名；
或
xmlhttp.onreadystatechange=function(){
函數體。。。
}
~~~
### 1.10.3 初始化：
~~~
xmlhttp.open("GET","gethint.php?q="+str,true); //異步以get方式發送到gethint.php
~~~
### 1.10.4 發送：
~~~
xmlhttp.send();
~~~
其中：xmlhttp請求對象：
\*\*屬性：
~~~
*readyState //請求狀態：0,1,2,3,4
*responseText//響應內容
responseXML //xml響應對象
*status
//瀏覽器響應狀態：200正常， 404 請求地址不存在 ,,
statusText //狀態內容
*onreadystatechange //回調函數屬性
~~~
方法：
~~~
abort() //取消當前響應，關閉連接并且結束任何未決的網絡活動。
getAllResponseHeaders() //把 HTTP 響應頭部作為未解析的字符串返回。
getResponseHeader() //返回指定的 HTTP 響應頭部的值
*open()
//初始化 HTTP 請求參數
*send() //發送 HTTP 請求，使用傳遞給 open() 方法的參數
*setRequestHeader() //向一個打開但未發送的請求設置或添加一個 HTTP 請求。
~~~
模擬POST提交代碼：
~~~
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
~~~
