JavaScript概述
JavaScript的歷史
- 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).后將其改名ScriptEase.(客戶端執行的語言)
- Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.后改名叫Javascript
- 微軟隨后模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
- 為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規范.國際標准化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標准（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有着不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規范.
ECMAScript
盡管 ECMAScript 是一個重要的標准，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標准化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：
- 核心（ECMAScript）
- 文檔對象模型（DOM） Document object model (整合js，css，html)
- 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
- Javascript 在開發中絕大多數情況是基於對象的.也是面向對象的.
簡單地說，ECMAScript 描述了以下內容：
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象 (封裝 繼承 多態) 基於對象的語言.使用對象.
JavaScript的引入方式
{#1 直接編寫#}
<script>
alert('hello yuan')
</script>
{#2 導入文件#}
<script src="hello.js"></script>
二 JavaScript的基礎
2.1 變量
x=5 y=6 z=x+y
在代數中，我們使用字母（比如 x）來保存值（比如 5）。
通過上面的表達式 z=x+y，我們能夠計算出 z 的值為 11。
在 JavaScript 中，這些字母被稱為變量。
0 變量是弱類型的(很隨便)；
1 聲明變量時不用聲明變量類型. 全都使用var關鍵字;
var a;
2 一行可以聲明多個變量.並且可以是不同類型.
var name="yuan", age=20, job="lecturer";
3 (了解) 聲明變量時 可以不用var. 如果不用var 那么它是全局變量.
4 變量命名,首字符只能是字母,下划線,$美元符 三選一，且區分大小寫，x與X是兩個變量
5 變量還應遵守以下某條著名的命名規則：
Camel 標記法 首字母是小寫的，接下來的字母都以大寫字符開頭。例如： var myTestValue = 0, mySecondValue = "hi"; Pascal 標記法 首字母是大寫的，接下來的字母都以大寫字符開頭。例如： Var MyTestValue = 0, MySecondValue = "hi"; 匈牙利類型標記法 在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，如下所示“ Var iMyTestValue = 0, sMySecondValue = "hi";
注意：
function func1(){ var a = 123; b=456 } func1(); // alert(a); // alert(b); // 不推薦
2.2 基礎規范
1 每行結束可以不加分號. 沒有分號會以換行符作為每行的結束
a=1;b=2; a=1 b=2;------錯誤 a=1 b=2 //推薦 a=1; b=2; { a=1; b=2; //推薦加tab a=1; b=2; }
2 注釋 支持多行注釋和單行注釋. /* */ //
3 使用{}來封裝代碼塊
2.3 常量和標識符
常量 ：直接在程序中出現的數據值
標識符：
- 由不以數字開頭的字母、數字、下划線(_)、美元符號($)組成
- 常用於表示函數、變量等的名稱
- 例如：_abc,$abc,abc,abc123是標識符，而1abc不是
- JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符
2.4 數據類型
數字類型(Number)
簡介 最基本的數據類型 不區分整型數值和浮點型數值 所有數字都采用64位浮點格式存儲，相當於Java和C語言中的double格式 能表示的最大值是±1.7976931348623157 x 10308 能表示的最小值是±5 x 10 -324
整數：
在JavaScript中10進制的整數由數字的序列組成
精確表達的范圍是
-9007199254740992 (-253) 到 9007199254740992 (253)
超出范圍的整數，精確度將受影響
浮點數：
使用小數點記錄數據
例如：3.4，5.6
使用指數記錄數據
例如：4.3e23 = 4.3 x 1023
16進制和8進制數的表達
16進制數據前面加上0x，八進制前面加0
16進制數是由0-9,A-F等16個字符組成
8進制數由0-7等8個數字組成
16進制和8進制與2進制的換算
# 2進制: 1111 0011 1101 0100 <-----> 16進制:0xF3D4 <-----> 10進制:62420 # 2進制: 1 111 001 111 010 100 <-----> 8進制:0171724
字符串(String)
簡介
是由Unicode字符、數字、標點符號組成的序列
字符串常量首尾由單引號或雙引號括起
JavaScript中沒有字符類型
常用特殊字符在字符串中的表達
字符串中部分特殊字符必須加上右划線\
常用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右划線
String數據類型的使用
- 特殊字符的使用方法和效果
- Unicode的插入方法
<script>
var str="\u4f60\u597d\n歡迎來到\"JavaScript世界\"";
alert(str);
</script>
布爾型(Boolean)
簡介 Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0 布爾值也可以看作on/off、yes/no、1/0對應true/false Boolean值主要用於JavaScript的控制語句，例如 if (x==1){ y=y+1; }else { y=y-1; }
Null & Undefined
Undefined 類型
Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。
當函數無明確返回值時，返回的也是值 "undefined";
Null 類型
另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。
盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那么找不到該對象時，返回的通常是 null。
var person=new Person()
var person=null
數據類型轉換
JavaScript屬於松散類型的程序語言
變量在聲明的時候並不需要指定數據類型
變量只有在賦值的時候才會確定數據類型
表達式中包含不同類型數據則在計算過程中會強制進行類別轉換
數字 + 字符串：數字轉換為字符串
數字 + 布爾值：true轉換為1，false轉換為0
字符串 + 布爾值：布爾值轉換為字符串true或false
強制類型轉換函數
函數parseInt： 強制轉換成整數 例如parseInt("6.12")=6 ; parseInt(“12a")=12 ; parseInt(“a12")=NaN ;parseInt(“1a2")=1
函數parseFloat： 強制轉換成浮點數 parseFloat("6.12")=6.12
函數eval： 將字符串強制轉換為表達式並返回結果 eval("1+1")=2 ; eval("1<2")=true
類型查詢函數(typeof)
ECMAScript 提供了 typeof 運算符來判斷一個值是否在某種類型的范圍內。可以用這種運算符判斷一個值是否表示一種原始類型：如果它是原始類型，還可以判斷它表示哪種原始類型。
函數typeof ：查詢數值當前類型 (string / number / boolean / object )
例如typeof("test"+3) "string" 例如typeof(null) "object " 例如typeof(true+1) "number" 例如typeof(true-false) "number"
ECMAScript 運算符
ECMAScript 算數運算符
加(＋)、 減(－)、 乘(*) 、除(/) 、余數(% ) 加、減、乘、除、余數和數學中的運算方法一樣 例如：9/2=4.5，4*5=20，9%2=1
-除了可以表示減號還可以表示負號 例如：x=-y
+除了可以表示加法運算還可以用於字符串的連接 例如："abc"+"def"="abcdef"
遞增(＋＋) 、遞減(－－)
假如x=2，那么x++表達式執行后的值為3，x--表達式執行后的值為1
i++相當於i=i+1，i--相當於i=i-1
遞增和遞減運算符可以放在變量前也可以放在變量后：--i
var i=1;
console.log(i++);
console.log(++i);
console.log(i--);
console.log(--i);
一元加減法：
var a=1;
var b=1;
a=-a; //a=-1
var c="10";
alert(typeof (c));
c=+c; //類型轉換
alert(typeof (c));
// -------------------
var d="yuan";
d=+d;
alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會得到一個NaN數據
alert(typeof(d));//Number
//NaN特點:
var n=NaN;
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=
ECMAScript 邏輯運算符
等於 ( == ) 、不等於( != ) 、 大於( > ) 、 小於( < )
大於等於(>=) 、小於等於(<=)
與 (&&) 、或(||) 、非(!)
1 && 1 = 1 1 || 1 = 1
1 && 0 = 0 1 || 0 = 1
0 && 0 = 0 0 || 0 = 0
!0=1
!1=0
邏輯 AND 運算符(&&)
邏輯 AND 運算的運算數可以是任何類型的，不止是 Boolean 值。
如果某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不一定返回 Boolean 值：
- 如果某個運算數是 null，返回 null。
- 如果某個運算數是 NaN，返回 NaN。
- 如果某個運算數是 undefined，返回undefined。
邏輯 OR 運算符(||)
與邏輯 AND 運算符相似，如果某個運算數不是 Boolean 值，邏輯 OR 運算並不一定返回 Boolean 值
ECMAScript 賦值運算符
賦值 = JavaScript中=代表賦值，兩個等號==表示判斷是否相等 例如，x=1表示給x賦值為1 if (x==1){...}程序表示當x與1相等時 if(x==“on”){…}程序表示當x與“on”相等時 配合其他運算符形成的簡化表達式 例如i+=1相當於i=i+1，x&=y相當於x=x&y
實例：
2 == “2” 2 === “2” 4 != “4” 4 !== “4” var a = 2; var b = 4; var c = a<b | --b>--a; var c = a<b || --b>--a; var c = a<b &&--b>--a; var c = a<b & --b>--a;
ECMAScript等性運算符
執行類型轉換的規則如下：
- 如果一個運算數是 Boolean 值，在檢查相等性之前，把它轉換成數字值。false 轉換成 0，true 為 1。
- 如果一個運算數是字符串，另一個是數字，在檢查相等性之前，要嘗試把字符串轉換成數字。
- 如果一個運算數是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉換成字符串。
- 如果一個運算數是對象，另一個是數字，在檢查相等性之前，要嘗試把對象轉換成數字。
在比較時，該運算符還遵守下列規則：
- 值 null 和 undefined 相等。
- 在檢查相等性時，不能把 null 和 undefined 轉換成其他值。
- 如果某個運算數是 NaN，等號將返回 false，非等號將返回 true。
- 如果兩個運算數都是對象，那么比較的是它們的引用值。如果兩個運算數指向同一對象，那么等號返回 true，否則兩個運算數不等。
ECMAScript 關系運算符(重要)
var bResult = "Blue" < "alpha"; alert(bResult); //輸出 true
在上面的例子中，字符串 "Blue" 小於 "alpha"，因為字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。
比較數字和字符串
另一種棘手的狀況發生在比較兩個字符串形式的數字時，比如：
var bResult = "25" < "3"; alert(bResult); //輸出 "true"
上面這段代碼比較的是字符串 "25" 和 "3"。兩個運算數都是字符串，所以比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）。
不過，如果把某個運算數該為數字，那么結果就有趣了：
var bResult = "25" < 3; alert(bResult); //輸出 "false"
這里，字符串 "25" 將被轉換成數字 25，然后與數字 3 進行比較，結果不出所料。
總結：
比較運算符兩側如果一個是數字類型,一個是其他類型,會將其類型轉換成數字類型. 比較運算符兩側如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.
Boolean運算符(重要)
var temp=new Object();// false;[];0; null; undefined;object(new Object();) if(temp){ console.log("yuan") }else { console.log("alex") }
全等號和非全等號
等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所做的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。
控制語句
if 控制語句
if-else基本格式 if (表達式){ 語句１; ...... }else{ 語句２; ..... } 功能說明 如果表達式的值為true則執行語句1, 否則執行語句2
var x= (new Date()).getDay(); //獲取今天的星期值，0為星期天 var y; if ( (x==6) || (x==0) ) { y="周末"; }else{ y="工作日"; } alert(y); //等價於 y="工作日"; if ( (x==6) || (x==0) ) { y="周末"; }
if 可以單獨使用
if語句嵌套格式 if (表達式1) { 語句1; }else if (表達式2){ 語句2; }else if (表達式3){ 語句3; } else{ 語句4; }
if (x==1){ y="星期一"; }else if (x==2){ y="星期二"; ... }else if (x==6){ y="星期六"; }else if (x==0){ y="星期日"; }else{ y="未定義";
switch 選擇控制語句
switch基本格式 switch (表達式) { case 值1:語句1;break; case 值2:語句2;break; case 值3:語句3;break; default:語句4; }
switch(x){ case 1:y="星期一"; break; case 2:y="星期二"; break; case 3:y="星期三"; break; case 4:y="星期四"; break; case 5:y="星期五"; break; case 6:y="星期六"; break; case 7:y="星期日"; break; default: y="未定義";
}
switch比else if結構更加簡潔清晰，使程序可讀性更強,效率更高。
首先要看一個問題，if 語句適用范圍比較廣，只要是 boolean 表達式都可以用 if 判斷；而 switch 只能對基本類型進行數值比較。兩者的可比性就僅限在兩個基本類型比較的范圍內。 說到基本類型的數值比較，那當然要有兩個數。然后重點來了—— if 語句每一句都是獨立的，看下面的語句： if (a == 1) ... else if (a == 2) ... 這樣 a 要被讀入寄存器兩次，1 和 2 分別被讀入寄存器一次。於是你是否發現其實 a 讀兩次是有點多余的，在你全部比較完之前只需要一次讀入寄存器就行了，其余都是額外開銷。但是 if 語句必須每次都把里面的兩個數從內存拿出來讀到寄存器，它不知道你其實比較的是同一個 a。 於是 switch case 就出來了，把上面的改成 switch case 版本： switch (a) { case 0: break; case 1: } 總結: 1.switch用來根據一個整型值進行多路分支，並且編譯器可以對多路分支進行優化 2.switch-case只將表達式計算一次,然后將表達式的值與每個case的值比較,進而選 擇執行哪一個case的語句塊 3.if..else 的判斷條件范圍較廣，每條語句基本上獨立的，每次判斷時都要條件加載 一次。 所以在多路分支時用switch比if..else if .. else結構要效率高。
for 循環控制語句
for循環基本格式 for (初始化;條件;增量){ 語句1; ... } 功能說明 實現條件循環，當條件成立時，執行語句1，否則跳出循環體
for (var i=1;i<=7;i++){ document.write("<H"+i+">hello</H "+i+"> "); document.write("<br>"); } ---------------------------------------------- var arr=[1,"hello",true]//var dic={"1":"111"} for (var i in arr){ console.log(i) console.log(arr[i]) }
注意：
doms=document.getElementsByTagName("p"); for (var i in doms){ console.log(i); // 0 1 2 length item namedItem //console.log(doms[i]) } //循環的是你獲取的th一個DOM元素集，for in用來循環對象的所有屬性，dom元素集包含了你上面輸出的屬性。 //如果你只要循環dom對象的話，可以用for循環: for (var i=0;i<doms.length;i++){ console.log(i) ; // 0 1 2 //console.log(doms[i]) }
結論：for i in 不推薦使用.
while 循環控制語句
while循環基本格式 while (條件){ 語句1； ... } 功能說明 運行功能和for類似，當條件成立循環執行語句花括號{}內的語句，否則跳出循環
var i=1; while (i<=7) { document.write("<H"+i+">hello</H "+i+"> "); document.write("<br>"); i++; } //循環輸出H1到H7的字體大小
<script language="JavaScript"> /* sayhello是定義的函數名，前面必須加上function和空格*/ function sayHello(){ var hellostr; var myname=prompt("請問您貴姓？","苑"); hellostr="您好，"+myname+'先生，歡迎進入"探索之旅"！'; alert(hellostr); document.write(hellostr); } //這里是對前面定義的函數進行調用 sayHello(); </script>
練習：分別用for循環和while循環計算出1-100的和？
異常處理
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {
//無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
注：主動拋出異常 throw Error('xxxx')
ECMA對象
從傳統意義上來說，ECMAScript 並不真正具有類。事實上，除了說明不存在類，在 ECMA-262 中根本沒有出現“類”這個詞。ECMAScript 定義了“對象定義”，邏輯上等價於其他程序設計語言中的類。
var o = new Object();
對象的概念與分類：
- 由ECMAScript定義的本地對象.獨立於宿主環境的 ECMAScript 實現提供的對象.(native object)
- ECMAScript 實現提供的、獨立於宿主環境的所有對象，在 ECMAScript 程序開始執行時出現.這意味着開發者不必明確實例化內置對象，它已被實例化了。ECMA-262 只定義了兩個內置對象，即 Global 和 Math （它們也是本地對象，根據定義，每個內置對象都是本地對象）。（built-in object）
- 所有非本地對象都是宿主對象（host object），即由 ECMAScript 實現的宿主環境提供的對象。所有 BOM 和 DOM 對象都是宿主對象。
object對象：ECMAScript 中的所有對象都由這個對象繼承而來；Object 對象中的所有屬性和方法都會出現在其他對象中
ToString() : 返回對象的原始字符串表示。
ValueOf() : 返回最適合該對象的原始值。對於許多對象，該方法返回的值都與 ToString() 的返回值相同。
11種內置對象
包括：
Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object
簡介：
在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是通過對象實現的
<script language="javascript"> var aa=Number.MAX_VALUE; //利用數字對象獲取可表示最大數 var bb=new String("hello JavaScript"); //創建字符串對象 var cc=new Date(); //創建日期對象 var dd=new Array("星期一","星期二","星期三","星期四"); //數組對象 </script>
String對象
自動創建字符串對象：
var str1="hello world"; alert(str1.length); alert(str1.substr(1,5));
調用字符串的對象屬性或方法時自動創建對象，用完就丟棄
手工創建字符串對象
var str1= new String("hello word");
alert(str1.length);
alert(str1.substr(1,3));
采用new創建字符串對象str1，全局有效
String對象的屬性
獲取字符串長度 length
var str1="String對象";
var str2="";
alert("str1長度 "+str1.length);
alert("str2長度 "+str2.length);
String對象的方法(1) —— 格式編排方法
格式編排方法返回值列表
書寫格式: String對象提供了一組針對HTML格式的方法，如x.anchor()返回錨定義字符串<a>x</a>， x.bold()返回粗體表示字符串<b>x</b>，x.sup()返回上標格式字符串<sup>x</sup>。 ----------------------------------------- var x="yuan"; var y="x.italics():"+x.italics(); document.write(y.fontsize(10));//<font size="10">x.italics():<i>yuan</i></font>
String對象的方法(2)—— 大小寫轉換
var str1="AbcdEfgh"; var str2=str1.toLowerCase(); var str3=str1.toUpperCase(); alert(str2); //結果為"abcdefgh" alert(str3); //結果為"ABCDEFGH"
String對象的方法(3) —— 獲取指定字符
書寫格式 x.charAt(index) x.charCodeAt(index) 使用注解 x代表字符串對象 index代表字符位置 index從0開始編號 charAt返回index位置的字符 charCodeAt返回index位置的Unicode編碼 ---------------------- var str1="welcome to the world of JS! 苑昊"; var str2=str1.charAt(28); var str3=str1.charCodeAt(28); alert(str2); //結果為"苑" alert(str3); //結果為33489
String對象的方法(4)—— 查詢字符串
//書寫格式 // //x.indexOf(findstr,index) //x.lastIndexOf(findstr) //------------------------------------- var str1="welcome to the world of JS!"; var str2=str1.indexOf("l"); var str3=str1.lastIndexOf("l"); alert(str2); //結果為2 alert(str3); //結果為18 //-------*********************************************************------- //書寫格式 // //x.match(regexp) // //x.search(regexp) // //使用注解 // //x代表字符串對象 // //regexp代表正則表達式或字符串 // //match返回匹配字符串的數組，如果沒有匹配則返回null // //search返回匹配字符串的首字符位置索引 //------------------------------------- var str1="welcome to the world of JS!"; var str2=str1.match("world"); var str3=str1.search("world"); alert(str2[0]); //結果為"world" alert(str3); //結果為15
String對象的方法(5) ——子字符串處理
截取子字符串
//截取子字符串 // //書寫格式 // //x.substr(start, length) // //x.substring(start, end) // //使用注解 // //x代表字符串對象 // //start表示開始位置 // //length表示截取長度 // //end是結束位置加1 // //第一個字符位置為0 var str1="abcdefgh"; var str2=str1.substr(2,4); var str3=str1.substring(2,4); alert(str2); //結果為"cdef" alert(str3); //結果為"cd" //-------*********************************************************------- //x.slice(start, end) var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //結果為"cd" alert(str3); //結果為"efgh" alert(str4); //結果為"cdefg" alert(str5); //結果為"fg"
替換子字符串
//x.replace(findstr,tostr) var str1="abcdefgh"; var str2=str1.replace("cd","aaa"); alert(str2); //結果為"abaaaefgh"
分割字符串
var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]); //結果為"二"
連接字符串
//y=x.concat(addstr) // //使用注解 // //x代表字符串對象 //addstr為添加字符串 //返回x+addstr字符串 var str1="abcd"; var str2=str1.concat("efgh"); alert(str2); //結果為"abcdefgh"
Array對象
創建數組對象
Array 對象用於在單個的變量中存儲多個值。 語法: 創建方式1: var a=[1,2,3]; 創建方式2: new Array(); // 創建數組時允許指定元素個數也可以不指定元素個數。 new Array(size);//if 1個參數且為數字,即代表size,not content 初始化數組對象: var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六"; new Array(element0, element1, ..., elementn)//也可以直接在建立對象時初始化數組元素，元素類型允許不同 var test=new Array(100,"a",true);
創建二維數組
var cnweek=new Array(7); for (var i=0;i<=6;i++){ cnweek[i]=new Array(2); } cnweek[0][0]="星期日"; cnweek[0][1]="Sunday"; cnweek[1][0]="星期一"; cnweek[1][1]="Monday"; ... cnweek[6][0]="星期六"; cnweek[6][1]="Saturday";
Array對象的屬性
獲取數組元素的個數：length
var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; cnweek[2]="星期二"; cnweek[3]="星期三"; cnweek[4]="星期四"; cnweek[5]="星期五"; cnweek[6]="星期六"; for (var i=0;i<cnweek.length;i++){ document.write(cnweek[i]+" | "); }
Array對象的方法
連接數組-join方法
//書寫格式 //x.join(bystr) //使用注解 // //x代表數組對象 //bystr作為連接數組中元素的字符串 //返回連接后的字符串 //與字符串的split功能剛好相反 var arr1=[1, 2, 3, 4, 5, 6, 7]; var str1=arr1.join("-"); alert(str1); //結果為"1-2-3-4-5-6-7"
連接數組-concat方法
//連接數組-concat方法 // //x.concat(value,...) var a = [1,2,3]; var a = new Array(1,2,3); var b=a.concat(4,5) ; alert(a.toString()); //返回結果為1,2,3 alert(b.toString()); //返回結果為1,2,3,4,5
數組排序-reverse sort
//x.reverse() //x.sort() var arr1=[32, 12, 111, 444]; //var arr1=["a","d","f","c"]; arr1.reverse(); //顛倒數組元素 alert(arr1.toString()); //結果為444,111,12,32 arr1.sort(); //排序數組元素 alert(arr1.toString()); //結果為111,12,32,444 //------------------------------ arr=[1,5,2,100]; //arr.sort(); //alert(arr); //如果就想按着數字比較呢? function intSort(a,b){ if (a>b){ return 1;//-1 } else if(a<b){ return -1;//1 } else { return 0 } } arr.sort(intSort); alert(arr); function IntSort(a,b){ return a-b; }
數組切片-slice
//x.slice(start, end) // //使用注解 // //x代表數組對象 //start表示開始位置索引 //end是結束位置下一數組元素索引編號 //第一個數組元素索引為0 //start、end可為負數，-1代表最后一個數組元素 //end省略則相當於從start位置截取以后所有數組元素 var arr1=['a','b','c','d','e','f','g','h']; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString()); //結果為"c,d" alert(arr3.toString()); //結果為"e,f,g,h" alert(arr4.toString()); //結果為"c,d,e,f,g"
刪除子數組
//x. splice(start, deleteCount, value, ...) // //使用注解 // //x代表數組對象 //splice的主要用途是對數組指定位置進行刪除和插入 //start表示開始位置索引 //deleteCount刪除數組元素的個數 //value表示在刪除位置插入的數組元素 //value參數可以省略 var a = [1,2,3,4,5,6,7,8]; a.splice(1,2); //a變為 [1,4,5,6,7,8] alert(a.toString()); a.splice(1,1); //a變為[1,5,6,7,8] alert(a.toString()); a.splice(1,0,2,3); //a變為[1,2,3,5,6,7,8] alert(a.toString());
數組的進出棧操作(1)
//push pop這兩個方法模擬的是一個棧操作 //x.push(value, ...) 壓棧 //x.pop() 彈棧 //使用注解 // //x代表數組對象 //value可以為字符串、數字、數組等任何值 //push是將value值添加到數組x的結尾 //pop是將數組x的最后一個元素刪除 var arr1=[1,2,3]; arr1.push(4,5); alert(arr1); //結果為"1,2,3,4,5" arr1.push([6,7]); alert(arr1) //結果為"1,2,3,4,5,6,7" arr1.pop(); alert(arr1); //結果為"1,2,3,4,5"
數組的進出棧操作(2)
// unshift shift //x.unshift(value,...) //x.shift() //使用注解 // //x代表數組對象 //value可以為字符串、數字、數組等任何值 //unshift是將value值插入到數組x的開始 //shift是將數組x的第一個元素刪除 var arr1=[1,2,3]; arr1.unshift(4,5); alert(arr1); //結果為"4,5,1,2,3" arr1. unshift([6,7]); alert(arr1); //結果為"6,7,4,5,1,2,3" arr1.shift(); alert(arr1); //結果為"4,5,1,2,3"
總結js的數組特性：
// js中數組的特性 //java中數組的特性, 規定是什么類型的數組,就只能裝什么類型.只有一種類型. //js中的數組特性1: js中的數組可以裝任意類型,沒有任何限制. //js中的數組特性2: js中的數組,長度是隨着下標變化的.用到多長就有多長. var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')]; /* alert(arr5.length);//8 arr5[10] = "hahaha"; alert(arr5.length); //11 alert(arr5[9]);// undefined */
Date對象
創建Date對象
//方法1：不指定參數 var nowd1=new Date(); alert(nowd1.toLocaleString( )); //方法2：參數為日期字符串 var nowd2=new Date("2004/3/20 11:12"); alert(nowd2.toLocaleString( )); var nowd3=new Date("04/03/20 11:12"); alert(nowd3.toLocaleString( )); //方法3：參數為毫秒數 var nowd3=new Date(5000); alert(nowd3.toLocaleString( )); alert(nowd3.toUTCString()); //方法4：參數為年月日小時分鍾秒毫秒 var nowd4=new Date(2004,2,20,11,12,0,300); alert(nowd4.toLocaleString( )); //毫秒並不直接顯示
Date對象的方法—獲取日期和時間
獲取日期和時間 getDate() 獲取日 getDay () 獲取星期 getMonth () 獲取月（0-11） getFullYear () 獲取完整年份 getYear () 獲取年 getHours () 獲取小時 getMinutes () 獲取分鍾 getSeconds () 獲取秒 getMilliseconds () 獲取毫秒 getTime () 返回累計毫秒數(從1970/1/1午夜)
練習實例：
function getCurrentDate(){ //1. 創建Date對象 var date = new Date(); //沒有填入任何參數那么就是當前時間 //2. 獲得當前年份 var year = date.getFullYear(); //3. 獲得當前月份 js中月份是從0到11. var month = date.getMonth()+1; //4. 獲得當前日 var day = date.getDate(); //5. 獲得當前小時 var hour = date.getHours(); //6. 獲得當前分鍾 var min = date.getMinutes(); //7. 獲得當前秒 var sec = date.getSeconds(); //8. 獲得當前星期 var week = date.getDay(); //沒有getWeek // 2014年06月18日 15:40:30 星期三 return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week); } alert(getCurrentDate()); //解決 自動補齊成兩位數字的方法 function changeNum(num){ if(num < 10){ return "0"+num; }else{ return num; } } //將數字 0~6 轉換成 星期日到星期六 function parseWeek(week){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // 0 1 2 3 ............. return arr[week]; }
Date對象的方法—設置日期和時間
//設置日期和時間 //setDate(day_of_month) 設置日 //setMonth (month) 設置月 //setFullYear (year) 設置年 //setHours (hour) 設置小時 //setMinutes (minute) 設置分鍾 //setSeconds (second) 設置秒 //setMillliseconds (ms) 設置毫秒(0-999) //setTime (allms) 設置累計毫秒(從1970/1/1午夜) var x=new Date(); x.setFullYear (1997); //設置年1997 x.setMonth(7); //設置月7 x.setDate(1); //設置日1 x.setHours(5); //設置小時5 x.setMinutes(12); //設置分鍾12 x.setSeconds(54); //設置秒54 x.setMilliseconds(230); //設置毫秒230 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日5點12分54秒 x.setTime(870409430000); //設置累計毫秒數 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日12點23分50秒
Date對象的方法—日期和時間的轉換
日期和時間的轉換: getTimezoneOffset():8個時區×15度×4分/度=480; 返回本地時間與GMT的時間差，以分鍾為單位 toUTCString() 返回國際標准時間字符串 toLocalString() 返回本地格式時間字符串 Date.parse(x) 返回累計毫秒數(從1970/1/1午夜到本地時間) Date.UTC(x) 返回累計毫秒數(從1970/1/1午夜到國際時間)
RegExp對象
//RegExp對象 // 在表單驗證時使用該對象驗證用戶填入的字符串是否符合規則. //創建正則對象方式1 參數1 正則表達式 參數2 驗證模式 g global / i 忽略大小寫. //參數2一般填寫g就可以，也有“gi”. // 用戶名 首字母必須是英文, 除了第一位其他只能是英文數字和_ . 長度最短不能少於6位 最長不能超過12位 //----------------------------創建方式1 /* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g"); // //驗證字符串 var str = "bc123"; alert(reg1.test(str));// true //----------------------------創建方式2 /填寫正則表達式/匹配模式; var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g; alert(reg2.test(str));// true */ //-------------------------------正則對象的方法------------------- //test方法 ==> 測試一個字符串是否復合 正則規則. 返回值是true 和false. //-------------------------String 中與正則結合的4個方法------------------. // macth search split replace var str = "hello world"; //alert(str.match(/o/g)); //查找字符串中 復合正則的 內容. //alert(str.search(/h/g));// 0 查找字符串中符合正則表達式的內容位置 //alert(str.split(/o/g)); // 按照正則表達式對字符串進行切割. 返回數組; alert(str.replace(/o/g, "s")); // hells wsrld 對字符串按照正則進行替換.
Math對象
//Math對象 //該對象中的屬性方法 和數學有關. //Math是內置對象 , 與Global的不同之處是, 在調用時 需要打出 "Math."前綴. //屬性學習: //alert(Math.PI); //方法學習: //alert(Math.random()); // 獲得隨機數 0~1 不包括1. //alert(Math.round(1.5)); // 四舍五入 //練習：獲取1-100的隨機整數，包括1和100 //var num=Math.random(); //num=num*10; //num=Math.round(num); // alert(num) //============max min========================= /* alert(Math.max(1,2));// 2 alert(Math.min(1,2));// 1 */ //-------------pow-------------------------------- alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方. abs(x) 返回數的絕對值。 exp(x) 返回 e 的指數。 floor(x)對數進行下舍入。 log(x) 返回數的自然對數（底為e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數。 round(x) 把數四舍五入為最接近的整數。 sin(x) 返回數的正弦。 sqrt(x) 返回數的平方根。 tan(x) 返回角的正切。
Function 對象(重點)
函數的定義：
function 函數名 (參數){
函數體;
return 返回值;
}
功能說明：
- 可以使用變量、常量或表達式作為函數調用的參數
- 函數由關鍵字function定義
- 函數名的定義規則與標識符一致，大小寫是敏感的
- 返回值必須使用return
Function 類可以表示開發者定義的任何函數。
用 Function 類直接創建函數的語法如下：
function 函數名 (參數){
函數體;
return 返回值;
}
//another way:
var 函數名 = new Function("參數1","參數n","function_body");
雖然由於字符串的關系，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行為與用 Function 類明確創建的函數行為是相同的。
實例：
alert(1);
function func1(){
alert('hello yuan!');
return 8
}
ret=func1();
alert(ret)
－－－－－－－－－－－－－－－－
var func1=new Function("name","alert(\"hello\"+name);")
func1("yuan")
注意：js的函數加載執行與python不同，它是整體加載完才會執行，所以執行函數放在函數聲明上面或下面都可以：
<script>
//f(); --->OK
function f(){
console.log("hello")
}
f() //----->OK
</script>
Function 對象的 length 屬性
如前所述，函數屬於引用類型，所以它們也有屬性和方法。
比如，ECMAScript 定義的屬性 length 聲明了函數期望的參數個數。
alert(func1.length)
Function 對象的方法
Function 對象也有與所有對象共享的 valueOf() 方法和 toString() 方法。這兩個方法返回的都是函數的源代碼，在調試時尤其有用。
alert(void(fun1(1,2)))
運算符void()作用：攔截方法的返回值
函數的調用
function func1(a,b){ alert(a+b); } func1(1,2); //3 func1(1,2,3);//3 func1(1); //NaN func1(); //NaN //只要函數名寫對即可,參數怎么填都不報錯. -------------------面試題----------- function a(a,b){ alert(a+b); } var a=1; var b=2; a(a,b)
函數的內置對象arguments
function add(a,b){ console.log(a+b);//3 console.log(arguments.length);//2 console.log(arguments);//[1,2] } add(1,2) ------------------arguments的用處1 ------------------ function nxAdd(){ var result=0; for (var num in arguments){ result+=arguments[num] } alert(result) } nxAdd(1,2,3,4,5) // ------------------arguments的用處2 ------------------ function f(a,b,c){ if (arguments.length!=3){ throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments") } else { alert("success!") } } f(1,2,3,4,5)
匿名函數
// 匿名函數 var func = function(arg){ return "tony"; } // 匿名函數的應用 (function(){ alert("tony"); } )() (function(arg){ console.log(arg); })('123')
函數的作用域鏈和閉包
作用域
js的作用域和py相似，if while等控制語句並沒有自己作用域；而函數是有自己的作用域的；
if(1==1){
var s=12; } console.log(s);//12 // ---------------------- function f(){ var temp=666; } f(); console.log(temp);//Uncaught ReferenceError: temp is not defined
嵌套函數的作用域：
例1:
var city = 'beijing'; function func(){ var city = 'shanghai'; function inner(){ var city = 'shenzhen'; console.log(city); } inner(); } func();
例2:
var city = 'beijing'; function Bar(){ console.log(city); } function func(){ var city = 'shanghai'; return Bar; } var ret = func(); ret(); //beijing
閉包：
var city = 'beijing'; function func(){ var city = "shanghai"; function inner(){ // var city = "langfang"; console.log(city); } return inner; } var ret = func(); ret();
思考題1：
var city = 'beijing'; function func(){ var city = "shanghai"; function inner(){ // var city = "langfang"; console.log(city); } return inner; } var ret = func(); ret(); var city = 'beijing'; function Bar(){ console.log(city); } function func(){ var city = 'shanghai'; return Bar; } var ret = func(); ret(); //beijing
作用域鏈(Scope Chain)：
在JavaScript中，函數也是對象，實際上，JavaScript里一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標准第三版定義，該內部屬性包含了函數被創建的作用域中對象的集合，這個集合被稱為函數的作用域鏈，它決定了哪些數據能被函數訪問。
var x=1; function foo() { var y = 2; function bar() { var z = 3; } } #bar的作用域鏈： barScopeChain=[bar.AO, foo.AO, global.VO];
#foo的作用域鏈： fooScopeChain=[foo.Ao, global.VO];
什么是AO,VO?
在函數創建時，每個函數都會創建一個活動對象Active Object(AO)，全局對象為Global Object(VO)，創建函數的過程也就是為這個對象添加屬性的過程，作用域鏈就是由這些綁定了屬性的活動對象構成的。
例如：找x變量；bar函數在搜尋變量x的過程中，先從自身AO對象上找，如果bar.AO存在這個屬性，那么會直接使用這個屬性的值，如果不存在，則會轉到父級函數的AO對象，也就是foo.AO
如果找到x屬性則使用，找不到繼續 在global.VO對象查找，找到x的屬性，返回屬性值。如果在global.VO中沒有找到，則會拋出異常ReferenceError
執行上下文。
函數在執行時會創建一個稱為“執行上下文（execution context）”的內部對象，執行上下文定義了函數
執行時的環境。每個執行上下文都有自己的作用域鏈，用於標識符解析，當執行上下文被創建時，而它的作用
域鏈初始化為當前運行函數的[[Scope]]所包含的對象。
函數執行
在函數執行過程中，每遇到一個變量，都會檢索從哪里獲取和存儲數據，該過程從作用域鏈頭部，也就是從活
動對象開始搜索，查找同名的標識符，如果找到了就使用這個標識符對應的變量，如果沒有則繼續搜索作用域
鏈中的下一個對象，如果搜索完所有對象都未找到，則認為該標識符未定義，函數執行過程中，每個標識符都
要經歷這樣的搜索過程。
創建作用域鏈的過程
函數進入全局，創建VO對象，綁定x屬性<入棧> global.VO={x=underfind; foo:reference of function}(這里只是預解析，為AO對象綁定聲明的屬性，函數執行時才會執行賦值語句，所以值是underfind) 遇到foo函數，創建foo.AO，綁定y屬性<入棧> foo.AO={y=underfind, bar:reference of function} 遇到bar函數，創建bar.AO，綁定z屬性<入棧> bar.AO={z:underfind} 作用域鏈和執行上下文都會保存在堆棧中，所以： bar函數的scope chain為：[0]bar.AO-->[1]foo.AO-->[2]global.VO foo函數的scope chain為：[0]foo.AO-->[1]global.Vo //建議：少定義全局變量 //理由：因為作用域鏈是棧的結構，全局變量在棧底，每次訪問全局變量都會遍歷一次棧，//這樣會影響效率
函數的scope等於自身的AO對象加上父級的scope，也可以理解為一個函數的作用域等於自身活動對象加上父級作用域.
函數執行前后的作用域鏈：
注意：作用域鏈的非自己部分在函數對象被建立（函數聲明、函數表達式）的時候建立，而不需要等到執行
思考題2:
for (var i=1; i<=9; i++) { setTimeout( function timer(){ console.log( i ); },1000 ); } //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ for (var i=1; i<=9; i++) { (function(){ var j = i; setTimeout( function timer(){ console.log( j ); }, 1000 ); })();
BOM對象
BOM（瀏覽器對象模型），可以對瀏覽器窗口進行訪問和操作。使用 BOM，開發者可以移動窗口、改變狀態欄中的文本以及執行其他與頁面內容不直接相關的動作。
使 JavaScript 有能力與瀏覽器“對話”。
window對象
window對象
所有瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不需要創建對象,直接使用即可.
Window 對象方法
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt() 顯示可提示用戶輸入的對話框。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close() 關閉瀏覽器窗口。
setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout。
setTimeout() 在指定的毫秒數后調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
scrollTo() 把內容滾動到指定的坐標。
交互方法：
方法講解: //----------alert confirm prompt---------------------------- //alert('aaa'); /* var result = confirm("您確定要刪除嗎?"); alert(result); */ //prompt 參數1 : 提示信息. 參數2:輸入框的默認值. 返回值是用戶輸入的內容. // var result = prompt("請輸入一個數字!","haha"); // alert(result); 方法講解: //open方法 打開和一個新的窗口 並 進入指定網址.參數1 : 網址. //調用方式1 //open("http://www.baidu.com"); //參數1 什么都不填 就是打開一個新窗口. 參數2.填入新窗口的名字(一般可以不填). 參數3: 新打開窗口的參數. open('','','width=200,resizable=no,height=100'); // 新打開一個寬為200 高為100的窗口 //close方法 將當前文檔窗口關閉. //close();
練習：
var num = Math.round(Math.random()*100); function acceptInput(){ //2.讓用戶輸入(prompt) 並接受 用戶輸入結果 var userNum = prompt("請輸入一個0~100之間的數字!","0"); //3.將用戶輸入的值與 隨機數進行比較 if(isNaN(+userNum)){ //用戶輸入的無效(重復2,3步驟) alert("請輸入有效數字!"); acceptInput(); } else if(userNum > num){ //大了==> 提示用戶大了,讓用戶重新輸入(重復2,3步驟) alert("您輸入的大了!"); acceptInput(); }else if(userNum < num){ //小了==> 提示用戶小了,讓用戶重新輸入(重復2,3步驟) alert("您輸入的小了!"); acceptInput(); }else{ //答對了==>提示用戶答對了 , 詢問用戶是否繼續游戲(confirm). var result = confirm("恭喜您!答對了,是否繼續游戲?"); if(result){ //是 ==> 重復123步驟. num = Math.round(Math.random()*100); acceptInput(); }else{ //否==> 關閉窗口(close方法). close(); } }
setInterval clearInterval
<input id="ID1" type="text" onclick="begin()"> <button onclick="end()">停止</button> <script> function showTime(){ var nowd2=new Date().toLocaleString(); var temp=document.getElementById("ID1"); temp.value=nowd2; } var clock; function begin(){ if (clock==undefined){ showTime(); clock=setInterval(showTime,1000); } } function end(){ clearInterval(clock); } </script>
setTimeout clearTimeout
var ID = setTimeout(abc,2000); // 只調用一次對應函數. clearTimeout(ID); function abc(){ alert('aaa'); }
History 對象
History 對象屬性
History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。
History 對象是 window 對象的一部分，可通過 window.history 屬性對其進行訪問。
length 返回瀏覽器歷史列表中的 URL 數量。
History 對象方法
back() 加載 history 列表中的前一個 URL。
forward() 加載 history 列表中的下一個 URL。
go() 加載 history 列表中的某個具體頁面。
<a href="rrr.html">click</a> <button onclick=" history.forward()">>>></button> <button onclick="history.back()">back</button> <button onclick="history.go()">back</button>
Location 對象
Location 對象包含有關當前 URL 的信息。
Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問。
Location 對象方法
location.assign(URL)
location.reload()
location.replace(newURL)//注意與assign的區別
DOM對象(DHTML)
7.1 什么是 DOM？
DOM 是 W3C（萬維網聯盟）的標准。DOM 定義了訪問 HTML 和 XML 文檔的標准：
"W3C 文檔對象模型（DOM）是中立於平台和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。"
W3C DOM 標准被分為 3 個不同的部分：
- 核心 DOM - 針對任何結構化文檔的標准模型
- XML DOM - 針對 XML 文檔的標准模型
- HTML DOM - 針對 HTML 文檔的標准模型
- 什么是 XML DOM？ －－－－>XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。
- 什么是 HTML DOM？－－－－>HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
7.2 DOM 節點
根據 W3C 的 HTML DOM 標准，HTML 文檔中的所有內容都是節點(NODE)：
- 整個文檔是一個文檔節點(document對象)
- 每個 HTML 元素是元素節點(element 對象)
- HTML 元素內的文本是文本節點(text對象)
- 每個 HTML 屬性是屬性節點(attribute對象)
- 注釋是注釋節點(comment對象)
畫dom樹是為了展示文檔中各個對象之間的關系，用於對象的導航。
節點(自身)屬性:
- attributes - 節點（元素）的屬性節點
- nodeType – 節點類型
- nodeValue – 節點值
- nodeName – 節點名稱
- innerHTML - 節點（元素）的文本值
導航屬性:
- parentNode - 節點（元素）的父節點 (推薦)
- firstChild – 節點下第一個子元素
- lastChild – 節點下最后一個子元素
- childNodes - 節點（元素）的子節點
注意：
<div id="div1">
<div id="div2"></div>
<p>hello yuan</p>
</div>
<script>
var div=document.getElementById("div2");
console.log(div.nextSibling.nodeName); //思考:為什么不是P?
</script>
推薦導航屬性：
parentElement // 父節點標簽元素 children // 所有子標簽 firstElementChild // 第一個子標簽元素 lastElementChild // 最后一個子標簽元素 nextElementtSibling // 下一個兄弟標簽元素 previousElementSibling // 上一個兄弟標簽元素
節點樹中的節點彼此擁有層級關系。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱為根（root）
- 每個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關系：
訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素：
頁面查找：
- 通過使用 getElementById() 方法
- 通過使用 getElementsByTagName() 方法
- 通過使用 getElementsByClassName() 方法
- 通過使用 getElementsByName() 方法
局部查找：
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>
7.3 HTML DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素獲得焦點。 //練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並松開。
onkeyup 某個鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onmouseleave 鼠標從元素離開
onselect 文本被選中。
onsubmit 確認按鈕被點擊。
兩種為元素附加事件屬性的方式
<div onclick="alert(123)">點我呀</div>
<p id="abc">試一試!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
alert("hi");
};
</script>
注意：
<div id="abc" onclick="func1(this)">事件綁定方式1</div>
<div id="id123">事件綁定方式2</div>
<script>
function func1(self){
console.log(self.id)
}
//jquery下是$(self), 這種方式this參數必須填寫;
//------------------------------------------
var ele=document.getElementById("id123").onclick=function(){
console.log(this.id);
//jquery下是$(this), 這種方式不需要this參數;
}
</script>
onload：
onload 屬性開發中 只給 body元素加.
這個屬性的觸發 標志着 頁面內容被加載完成.
應用場景: 當有些事情我們希望頁面加載完立刻執行,那么可以使用該事件屬性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// window.onload=function(){
// var ele=document.getElementById("ppp");
// ele.onclick=function(){
// alert(123)
// };
// };
function fun1() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}
</script>
</head>
<body onload="fun1()">
<p id="ppp">hello p</p>
</body>
</html>
onsubmit:
是當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交.
<form id="form">
<input type="text"/>
<input type="submit" value="點我!" />
</form>
<script type="text/javascript">
//阻止表單提交方式1().
//onsubmit 命名的事件函數,可以接受返回值. 其中返回false表示攔截表單提交.其他為放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("驗證失敗 表單不會提交!");
// return false;
// 阻止表單提交方式2 event.preventDefault(); ==>通知瀏覽器不要執行與事件關聯的默認動作。
alert("驗證失敗 表單不會提交!");
event.preventDefault();
}
Event 對象
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.
比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這里就時KeyCode；
思考：onclick＝function(event){};這個方法是誰調用的？
事件傳播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
}
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外層div傳播.
}
</script>
7.4 增刪改查演示
7.4.1 node的CURD：
增:
createElement(name)創建元素 appendChild();將元素添加
刪:
獲得要刪除的元素 獲得它的父元素 使用removeChild()方法刪除
改:
第一種方式:
使用上面增和刪結合完成修改
第二中方式:
使用setAttribute();方法修改屬性
使用innerHTML屬性修改元素的內容
查: 使用之前介紹的方法.
<script type="text/javascript"> //在第一個div中動態增加一個a標簽. 該a標簽點擊之后跳轉到百度首頁. function addNode(){ //1.獲得 第一個div var div = document.getElementById("div_1"); //2.創建a標簽 createElement==>創建一個a標簽 <a></a> var eleA = document.createElement("a"); //3.為a標簽添加屬性 <a href="http://www.baidu.com"></a> eleA.setAttribute("href", "http://www.baidu.com"); //4.為a標簽添加內容 <a href="http://www.baidu.com">百度</a> eleA.innerHTML = "百度"; //5.將a標簽添加到div中 div.appendChild(eleA); } //點擊后 刪除div區域2 function deleteNode(){ //1 獲得要刪除的div區域 var div = document.getElementById("div_2"); //2.獲得父親 var parent = div.parentNode; //3 由父親操刀 parent.removeChild(div); } //點擊后 替換div區域3 為一個美女 function updateNode(){ //1 獲得要替換的div區域3 var div = document.getElementById("div_3"); //2創建img標簽對象 <img /> var img = document.createElement("img"); //3添加屬性 <img src="001.jpg" /> img.setAttribute("src", "001.JPG"); //4.獲得父節點 var parent = div.parentNode; //5.替換 parent.replaceChild(img, div); } //點擊后 將div區域4 克隆一份 添加到頁面底部 function copyNode(){ //1.獲取要克隆的div var div = document.getElementById("div_4"); //2.克隆 參數為true 那么克隆時克隆所有子元素. false 只克隆自己 var div_copy = div.cloneNode(true); //3.獲得父親 var parent = div.parentNode; //4.添加 parent.appendChild(div_copy); } </script>
7.4.2 修改 HTML DOM
- 改變 HTML 內容
改變元素內容的最簡答的方法是使用 innerHTML ，innerText。
- 改變 CSS 樣式
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
- 改變 HTML 屬性
elementNode.setAttribute(name,value)
elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
- 創建新的 HTML 元素
createElement(name)
- 刪除已有的 HTML 元素
elementNode.removeChild(node)
- 關於class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
8 實例練習
1 搜索框
<input id="ID1" type="text" value="請輸入用戶名" onblur="Blurs()" onfocus="Focus()"> <script> function Focus(){ var input=document.getElementById("ID1"); if (input.value=="請輸入用戶名"){ input.value=""; } }; function Blurs(){ var ele=document.getElementById("ID1"); var val=ele.value; if(!val.trim()){ ele.value="請輸入用戶名"; } } </script>
2 模態對話框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action('show')">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action('hide')">
</div>
<script>
function action(act){
var ele=document.getElementsByClassName("shade")[0];
var ele2=document.getElementsByClassName("models")[0];
if(act=="show"){
ele.classList.remove("hide");
ele2.classList.remove("hide");
}else {
ele.classList.add("hide");
ele2.classList.add("hide");
}
}
</script>
</body>
</html>
3 全選反選取消
<button onclick="select('all');">全選</button>
<button onclick="select('cancel');">取消</button>
<button onclick="select('reverse');">反選</button>
<table border="1" id="Table">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
<script>
function select(choice){
var ele=document.getElementById("Table");
var inputs=ele.getElementsByTagName("input");
for (var i=0;i<inputs.length;i=i+1){
var ele2=inputs[i];
if (choice=="all"){
ele2.checked=true;
}else if(choice=="cancel"){
ele2.checked=false;
}
else {
if (ele2.checked){
ele2.checked=false;
}else {
ele2.checked=true;
}
}
}
}
</script>
4 兩級聯動
<select id="province">
<option>請選擇省:</option>
</select>
<select id="city">
<option>請選擇市:</option>
</select>
<script>
data={"河北省":["廊坊","邯鄲"],"北京":["朝陽區","海淀區"]};
var p=document.getElementById("province");
var c=document.getElementById("city");
for(var i in data){
var option_pro=document.createElement("option");
option_pro.innerHTML=i;
p.appendChild(option_pro);
}
p.onchange=function(){
pro=(this.options[this.selectedIndex]).innerHTML;
citys=data[pro];
c.options.length=0;
for (var i in citys){
var option_city=document.createElement("option");
option_city.innerHTML=citys[i];
c.appendChild(option_city);
}
}
</script>
5 select左右移
<div id="box1">
<select multiple="multiple" size="10" id="left">
<option>book</option>
<option>book2</option>
<option>book3</option>
<option>book4</option>
<option>book5</option>
<option>book6</option>
</select>
</div>
<div id="choice">
<input class="add" type="button" value="--->" onclick="add()"><br>
<input class="remove" type="button" value="<---" onclick="remove();"><br>
<input class="add-all" type="button" value="====>" onclick="ADDall()"><br>
<input class="remove-all" type="button" value="<===" onclick="remall()">
</div>
<div>
<select multiple="multiple" size="10" id="right">
<option>book9</option>
</select>
</div>
<script>
function add(){
var right=document.getElementById("right");
var options=document.getElementById("left").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
if(option.selected==true){
right.appendChild(option);
i--;
}
}
}
function ADDall(){
var right=document.getElementById("right");
var options=document.getElementById("left").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
right.appendChild(option);
i--;
}
}
</script>