一、JavaScript
1、什么是JavaScript（JS）
（1）JavaScript是嵌入HTML中的代碼，在瀏覽器中執行的腳本語言，具有與Java和C語言類似的語法。
（2）一種網頁編程技術，用來向HTML頁面添加交互行為。
（3）直接嵌入HTML頁面中。
（4）由瀏覽器解釋代碼並執行代碼，不進行預編譯。
注：
JS是腳本語言，即沒有編譯器。JS與Java沒有任何關系。JS是基於對象的，Java是面向對象的。
面向對象：是先有一個抽象的對象描述（類）， 然后根據這個描述去構建新的對象（實例化對象）
基於對象： 是先有一個具體的對象，然后根據這個具體的對象，再去創建新的對象（實例化對象）
2、JS特點
（1）是腳本語言，可以使用任何文本編輯工具編寫。
（2）由瀏覽器內置的JavaScript引擎執行代碼。
解釋執行：事先不編譯，逐行執行。
基於對象：內置大量現成對象。
（3）使用場景：
客戶端數據的計算。
客戶端表單合法性驗證。
瀏覽器的事件觸發。
網頁特殊顯示效果制作。
服務器的異步數據提交。
3、如何使用JS（其用法類似於CSS的用法）
（1）事件定義式： 直接在事件定義時寫js。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JSDemo</title>
</head>
<body>
<!-- 注意，單雙引號不要寫錯了 -->
<!-- 事件定義式定義一個按鈕，當鼠標點擊時，跳出一個對話框-->
<input type="button" value="Sure" onclick="alert('Hello');"/>
</body>
</html>
（2）嵌入式：直接寫在<script></script>標簽中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JSDemo</title> <!-- 嵌入式的js寫在<script>標簽中 --> <script type="text/javascript"> /*要調用的JS需要定義在函數中， function 函數名（參數）{函數體} */ function show(){ alert('Hi'); } </script> </head> <body> <!-- 嵌入式需在<script>標簽中寫函數，然后調用該函數。--> <input type="button" value="Cancel" onclick="show()"/> </body> </html>
（3）文件調用式（推薦，有時也稱為無干擾腳本編程）：代碼位於獨立的（.js）文件中，然后在（.html）文件中通過<script>標簽來引用（.js）文件。其中<script>標簽可以存在於<head>或者<body>標簽中。
【舉例：】 【Test.html】 <!DOCTYPE html> <html> <head> <title>如何使用JS</title> <meta charset="utf-8" /> <!-- 引用JS需使用<script>標簽,且必須寫成雙標簽，且標簽內部不要添加任何內容 --> <script type="text/javascript" src="../js/Test.js"></script> </head> <body > <!-- 文件調用式,先使用<script>雙標簽引用js文件，然后再調用函數。--> <input type="button" value="Submit" onclick="show()" /> </body> </html> 【Test.js】 /*.js文件等價於<script>標簽 ，即寫函數即可*/ function show(){ alert("Hello World!!!"); }
二、JavaScript基礎語法
1、基本規則：
（1）語句大小寫敏感，使用分號（建議使用）或者換行結束。語句由表達式、關鍵字、運算符組成。使用Unicode字符集編寫。
（2）單行注釋（//） 、多行注釋（/* */）。
（3）標識符：
不以數字開頭，由字母、數字、下划線(_)以及美元（$）組成。JS中存在代表特定含義的保留字，不能將保留字定義為標識符。命名時最好有意義。
（4）變量：
變量聲明：統一使用關鍵字var聲明變量，但變量引用的數據是有類型的。
變量初始化：使用“=”賦值，沒有初始化的變量則自動取值為undefined。
比如：
var name = "tom";
var age = 18;
（5）數據類型（JS基於對象）：
特殊類型： null(空)、undefined(未定義)。
內置對象（基本類型）：Number(數字)，String(字符串)，Boolean(布爾)，Function(函數)，Array(數組)。
外部對象：window(瀏覽器對象)，document(文檔對象)。
自定義對象：Object(自定義對象)。
Number不區分整數與浮點數，所有數字均采用64位浮點格式存儲，類似double格式。整數默認是10進制，16進制需加上0x，八進制需加0 。浮點數默認為小數點記錄，也可以使用指數記錄。
（6）數據類型自動轉換
數字加字符串：數字轉換為字符串。
數字加布爾值：true轉換為1，false轉為0。
字符串加布爾值：布爾值轉為字符串true或false。
布爾值加布爾值：布爾值轉換為數值1或0。
（7）數據類型轉換函數
1、toString()：將所有數據類型轉換為String類型。 比如： a.toString(); 2、parseInt()：強制轉為整數，如果不能轉換，則返回NaN（not a number）。 比如： paserInt("5.5")返回5， parseInt(6.12)返回6 。 3、parseFloat()：強制轉為浮點數，如果不能轉換，則返回NaN。 比如： parseFloat("6.12")返回6.12 。 4、typeof()：查詢當前類型，返回string/number/boolean/object/function/undefined。 比如： type("test" + 3) 返回string. 5、isNaN()：判斷被檢測的表達式經過轉換后是否是一個數。不是數則返回true，否則返回false。 比如： isNaN("56")返回false。 isNaN(parseInt("56"))返回false。 isNaN(parseInt("aaa"))返回true。 6、eval()：函數用於計算表達式字符串，或者用於執行字符串中的JS代碼，如果參數中沒有合法的表達式和語句，那么會拋出異常。 【舉例：（計算平方值）】 <!DOCTYPE html> <html> <head> <title>計算平方</title> <meta charset="utf-8" /> <script> //計算輸入數字的平方 function cal(){ //獲取文本框，並從中取值 var num = document.getElementById("num"); //獲取span，並向其取值。 var result = document.getElementById("result"); //獲取文本框中的值 var n = num.value; //如果文本框沒有任何輸入內容，則從文本框中獲取的是""，不是null if(n=="" || isNaN(n)){ //如果n為空，或者n不為數字，則不計算平方並給出提示 //innerHTML是元素的內容 result.innerHTML = "請輸入數字"; }else{ //輸入的是數字，計算平方 result.innerHTML = n*n; } } </script> </head> <body> <input type="text" id="num"/> <input type="button" value="平方" onclick="cal()"/> = <span id="result"></span> </body> </html> 【舉例：】 eval("1 + 2"); eval("ad"); eval("3*3*3"); eval("a = 1, b = 3, a + b"); eval("a = 1; b = 3; a + b;"); eval(1 + 3);
（8）運算符
1、算術運算符： +，-，*，/，%，++，--。 注意： Java中5/2=2. JS中5/2=2.5 。 2、關系運算符： >, < , >=, <=, ==, != ， ===(全等，類型相同、數值相同)， !==(不全等)。 關系表達式的值為true或false。 3、邏輯運算： !（邏輯非）, &&（邏輯與）, ||（邏輯或）。 注： 1 || 2 的值為 1 2 || 1 的值為 2 2 || null 的值為 2 null || 2 的值為 2 1 && 2 的值為 2 2 && 1 的值為 1 1 && null 的值為 null null && 1 的值為 null 4、條件運算（三目/元運算）： 表達式？結果1：結果2; 先計算表達式的值，若為true，那么結果為結果1的值，若為false，那么為結果2的值。 【舉例：（猜數字）】 <!DOCTYPE html> <html> <head> <title>猜數字</title> <meta charset="utf-8" /> <script> /* 生成一個隨機數(1~100)，由於存在函數外部，故為全局變量， 此代碼在頁面加載時執行。 */ var init_num = parseInt(Math.random()*100)+1; //實現猜數字的函數 function guess(){ //獲取文本框 var input = document.getElementById("num"); //獲取段落 var p = document.getElementById("result"); //獲取文本框的值 var n = input.value; if(n=="" || isNaN(n)){ p.innerHTML="請輸入1~100間的整數"; }else{ //進行比較 if(n < init_num){ p.innerHTML="小了"; }else if(n > init_num){ p.innerHTML="大了"; } else{ p.innerHTML="對了"; } } } </script> </head> <body> <input type="text" id="num" /> <input type="button" value="猜吧" onclick="guess()" /> <p id="result" ></p> </body> </html>
（9）流程控制
程序邏輯結構：順序（默認）、循環、分支。
分支：if-else語句，switch-case語句。
循環：for語句，while語句，do-while語句。
java中的條件表達式必須返回布爾值（true或false），而JS的表達式可以返回任何類型的值（比如NaN，null，0，”“， undefined等均表示false）。即在JS中任意數據均能作為表達式，如果是非空的數據，則表示true，若為空（NaN，null，0，”“， undefined）的數據，則表示false。
"a" ? 1 : 2 的值為1 0 ? 1 : 2 的值為2 null ? 1 : 2 的值為2 【舉例：（計算階乘）】 <!DOCTYPE html> <html> <head> <title>計算階乘</title> <meta charset="utf-8" /> <script> function cal(){ //獲取文本框 var input = document.getElementById("num"); //獲取span var span = document.getElementById("result"); //獲取文本框的值,其返回的是字符串，若計算數字，內部會自動轉型 var n = input.value; if(n=="" || isNaN(n) || n<1 || n>100){ //輸入的數字不能為空，非數字，小於1，大於100 span.innerHTML = "請輸入1~100間的整數"; }else{ //計算階乘 var sum = 1; for(var i=1; i <= n; i++){ sum*=i; } span.innerHTML = sum; } } </script> </head> <body> <input type="text" id="num"/> <!-- HTML5規范，可以將按鈕寫成<button> --> <button onclick="cal()">階乘</button> = <span id="result"></span> </body> </html>
2、JS對象
（1）對象分類：
內置對象。比如String，Number等。
外部對象。window對象，document對象。
自定義對象。
（2）如何使用對象？
【對象包含屬性和方法。】
訪問對象屬性：
格式：
對象.屬性;
【訪問對象方法：】
格式：
對象.方法名();
（3）常用內置對象
1、String對象。
2、Number對象。
3、Boolean對象。
4、Array對象。
5、Math對象。
6、Date對象。
7、RegExp對象（正則表達式）。
8、Function對象。
【String對象：】
【創建格式:】
var str1 = "hello world";
var str2 = new String("hello world");
【常用方法：】
str1.toLowerCase();//將字符串全改為小寫
str1.toUpperCase();//將字符串全改為大寫
str1.charAt(index);//返回指定位置的字符，從0開始計數
str1.charCodeAt(index); //返回指定位置的Unicode編碼，index指位置。
str1.indexOf(findstr, [index]);//返回字符串所在的位置索引，如不存在，返回-1。findstr為查找的字符串，index為開始查找的位置（可以省略）
str1.lastIndexOf(findstr, [index]);//從尾部（index表示指定開始位置）開始向前查找。
str1.substring(start, [end]);//獲取字符串（包含頭不包含尾），start為開始位置，end為結束位置（可省略）。
str1.replace(findstr, tostr);//返回替換后的字符串（只換一個），替換子字符串，findstr為查找的字符串，tostr為替換的字符串。
str1.split(bystr, [howmany]);//返回分割后的字符串數組，bystr為分割的字符串，howmany指定返回數組的最大長度（可以省略）。
【舉例：】
var str1 = "hello world";
str1.toLowerCase();
str1.toUpperCase();
str1.charAt(4);
str1.charCodeAt(0);
str1.indexOf("l", 2);
str1.lastIndexOf("l", 2);
str1.substring(3, 6);
str1.replace("ll", "hihi");
str1.split(" ", 1);
【Array對象：】
數組是一種可以存儲一組信息的變量。
【創建格式：】
var a1 = new Array();
var a2 = new Array(7);
var a3 = new Array(111, "a" , true);
var a4 = [100, 200, 300];
【添加數據：】
向數組中添加數據：
可以直接使用 a1[4] = 5; 指定位置賦值。
可以使用a1.push(5);進行賦值。
可以使用a1.pop()取元素。
【常用方法：】
a1.reverse(); //將數組倒轉。
a1.toString()；//輸出數組。
a1.sort();//數組排序（由小到大排序），可能會排序錯誤。
a1.sort(compare);//自定義一個compare方法。
JS中預置的比較方法默認返回2個數相減的值，然后基於此值做出排序。比較方法可以進行置換，即修改比較方法，從而對排序產生影響。
【舉例：】
var a = [8, 5, 9, 4, 40];
a.sort();
function compare(i, j) {return j - i;}
a.sort(compare);
a.reverse();
【Math對象：】 Math對象用於執行數學任務，無需創建，直接使用Math調用其屬性與方法即可。 比如：Math.PI, Math.round(3.56)（四舍五入函數）， Math.E等。 【常用方法：】 三角函數：Math.sin(x), Math.cos(x), Math.tan(x)等。 計算函數：Math.sqrt(x), Math.log(x), Math.exp(x)等。 數值比較函數：Math.abs(x), Math.max(x,y...), Math.random(), Math.round(x)等。 【舉例：】 Math.PI Math.round(3.56) Math.E Math.sqrt(6)
【Date對象：】 Date對象用於處理日期和時間，封裝了系統時間毫秒數。 創建Date對象： var date = new Date();//當前系統時間 var date = new Date("2019/10/20");//自定義時間 【常用方法：】 getTime();//讀時間毫秒數 setTime();//寫時間毫秒數 讀時間分量：getDate(), getDay(), getFullYear()等。 寫時間分量：setDate(), setDay(), setFullYear()等。 轉為字符串：toString(), toLocaleTimeString(), toLocaleDateString(); 【舉例：】 var date1 = new Date(); date1.toString(); var date2 = new Date("2019/10/20"); date2.toString(); date1.getTime(); date1.toLocaleTimeString(); date1.toLocaleDateString();
【Function對象:】 JS中的函數即為Function對象。 函數名就是指向Function對象的引用，使用函數名可以訪問函數的對象。 【創建格式1：】 function 函數名([參數]){ 函數體; return 返回值; //可選操作，若不寫，默認為undefined } 【創建格式2：】 var functionName = function([參數]){ 函數體; return 返回值; //可選操作 } 【函數的返回值：】 默認值：undefined； 可以使用return返回具體的值。 【函數的參數：】 1、JS的函數沒有重載。 2、調用時只要函數名一樣，那么無論傳入多少個參數，那么均為同一個函數。 3、沒有接受到實參的參數值均為undefined。 4、所有的參數傳遞給arguments對象（數組對象）。 【舉例：】 舉例：（使用arguments實現類似方法的重載） //求和，計算傳入的數據和 function add(){ var sum = 0; for (var i=0; i<arguments.length; i++){ sum+=arguments[i]; } return sum; } add(1,2,3); add(1,2,3,4,5,6);
3、事件
事件是用戶在訪問頁面時執行的操作。當瀏覽器探測到一個事件時，比如用鼠標單擊或按鍵，它可以觸發與這個事件相關聯的 JavaScript 對象，這些對象稱為事件處理程序（ event handler）。
【分類：】 【鼠標事件：】 onclick(); // 鼠標點擊時觸發。相當於一次onmousedown與onmouseup。 ondblclick();// 鼠標雙擊事件。 onmousedown();// 鼠標落下事件。 onmouseup();// 鼠標彈起事件。 onmouseover();// 鼠標懸浮事件。 onmouseout();// 鼠標離開事件。 【鍵盤事件：】 onkeydown();// 鍵盤落下事件。 onkeyup();// 鍵盤彈起事件。 【狀態事件：】 onload();// 是頁面加載事件,當用戶進入頁面而且所有頁面元素都完成加載時，就會觸發這個事件。 onunload();// 當用戶離開網頁時，就會觸發 onunload 事件處理程序（慎用）。 onchange();// 是值改變事件，當值發生改變時觸發。多用於下拉選擇框（<select> <option>）的值改變事件處理。 onfocus();// 獲取光標事件/光標移入事件。（比如點擊一個文本框，那么會有一個光標在閃） onblur();// 鼠標的光標切換時觸發。（比如光標從一個文本框移入另一個文本框） onerror();// 當頁面上發生 JavaScript 錯誤時，可能會觸發 onerror 事件處理程序。 onsubmit();// 是表單提交事件，在點擊提交按鈕時觸發。提交按鈕觸發時，先調用onsubmit方法，若該方法返回true，則提交表單，返回false則不提交。 //常用於攔截提交的目的。 如果沒有此事件，那么不管輸入的數據是否正確，其都能正確跳轉頁面。
【以onload為例：】 【格式：】 <body onload="start();"></body> <!-- 圖片輪播 要求： 1、在頁面上增加一組圖片。 2、默認顯示為第一章。 3、設置每N秒切換下一張圖片並顯示。 --> <!DOCTYPE html> <html> <head> <title>圖片輪播</title> <meta charset="utf-8" /> <style type="text/css"> ul{ //去掉圖片前的點 list-style-type: none; border: 1px solid #ccc; width: 480px; height: 360px; margin: 0; padding: 0; } li{ width: 480px; height: 360px; margin: 0; padding: 0; } .show{ display: block; } .hide{ display: none; } </style> <script type="text/javascript"> var index = 0;//循環次數 /*每個一秒執行一次，先將所有圖片全部隱藏，然后在顯示一張圖片*/ function start(){ setInterval(function(){ var ul=document.getElementById("photos"); //取ul標簽下所有li子元素 var lis=ul.getElementsByTagName("li"); //將所有li隱藏 for(var i=0;i<lis.length;i++){ lis[i].className="hide"; } //顯示下一個li,將其顯示 index++; lis[index%lis.length].className="show"; }, 1000); } </script> </head> <!-- onload是頁面加載事件，表示在頁面加載后調用start函數 --> <body onload="start();"> <ul id="photos"> <li class="show"><img src="../images/f1.jpg" /></li> <li class="hide"><img src="../images/f2.jpg" /></li> <li class="hide"><img src="../images/f3.jpg" /></li> <li class="hide"><img src="../images/f4.jpg" /></li> </ul> </body> </html>
4、BOM、DOM
（1）BOM（Browser Object Model）
瀏覽器對象模型，用來訪問和操作瀏覽器窗口，使JS有能力與瀏覽器進行交互。通過使用BOM，可移動窗口，更改狀態欄文本、執行其他不與頁面內容發生直接聯系的操作。沒有相關標准，但被廣泛支持。根為window。
（2）DOM（Document Object Model）
文檔對象模型，用來操作文檔。定義了訪問與操作HTML文檔的標准方法，應用程序通過對DOM樹的操作，實現對HTML文檔數據的操作。根為Document。
（3）window對象
window表示瀏覽器窗口，所有的JS全局對象、函數以及變量均自動成為window對象的成員。能被window對象所調用。
【常用屬性（子對象）：】 document：窗口中顯示的HTML文檔對象（DOM）。 history：瀏覽過窗口的歷史記錄對象。 location：窗口文件地址對象。 screen：當前屏幕對象。 navigator：瀏覽器的相關信息。 【常用方法：】 alert(str); //提示對話框，顯示str字符串的內容。 confirm(str);//確認對話框，顯示str字符串的內容，按“確定”按鈕返回true，否則返回false。 //周期性定時器：以一定的時間間隔執行代碼，循環往復。 //常用於周期時鍾，計時器等。 setInterval(exp, time); 周期性觸發代碼exp（執行語句），time為時間周期，單位為毫秒。 clearInterval(tID); 停止啟動的定時器，tID為啟動的定時器對象。 //一次性定時器：在一個設定的時間間隔后執行代碼，而不是在函數被調用后立即執行。原理同周期性計時器，但只執行一次。 //常用於提示，比如彈出一個信息框，然后過幾秒就會隱藏掉。 setTimeout(exp, time)； //一次性觸發代碼exp。返回已經啟動的定時器。 clearTimeout(tID);//停止啟動的定時器。 【舉例：（動態時鍾，使用周期性定時器）】 <!DOCTYPE html> <html> <head> <title>動態時鍾</title> <meta charset="utf-8" /> <script type="text/javascript"> var id;//啟用的定時器id function start(){ //使用周期性定時器，每個1000ms執行一次function id = setInterval(function() { var now = new Date(); var time = now.toLocaleTimeString(); var span = document.getElementById("clock"); span.innerHTML = time; }, 1000); } function stop(){ //根據定時器id，停止定時器 clearInterval(id); } </script> </head> <body> <div> 當前時間： <span id="clock"></span> </div> <div> <input type="button" value="啟動" onclick="start()"/> <input type="button" value="停止" onclick="stop()" /> </div> </body> </html> 【舉例：（消息提示並自動消失，使用一次性定時器）】 <!DOCTYPE html> <html> <head> <title>動態提示信息並自動消失</title> <meta charset="utf-8" /> <style type="text/css"> .hide{ display:none; } .show{ display:block; } </style> <script type="text/javascript"> function del(){ //假設已刪除成功，顯示信息，並過2秒將其隱藏 var p = document.getElementById("msg"); p.className = ".show"; var id = setTimeout(function() { p.className = "hide"; clearTimeout(id); }, 2000); } </script> </head> <body> <!-- 當點擊刪除按鈕成功時，彈出一個信息框，並過了幾秒后自動消失 --> <p> <button onclick="del();">刪除</button> </p> <p class="hide" id="msg">操作成功！</p> </body> </html>
（4）window常用子對象
【screen對象：】 包含有關客戶端顯示屏幕的信息。常用於獲取屏幕的分辨率和色彩。 【常用屬性：】 width/height/availWidth/availHeight（寬、高、可用寬、可用高）。 【history對象：】 包含用戶（瀏覽器窗口中）訪問過的URL。 【常用屬性：】 length；瀏覽器歷史列表中URL數量。 【常用方法：】 history.back(), (相當於單擊一次后退按鈕) history.forward(),（相當於單擊一次前進按鈕） history.go(num),（單擊num次按鈕，num>0 則表示單擊前進按鈕， num<0 則表示單擊后退按鈕 ） 【location對象：】 包含有關當前URL的信息，常用於獲取和改變當前瀏覽的網址。 【常用屬性：】 href；當前窗口正在瀏覽的網頁地址。 location.href="http://www.baidu.com";相當於跳轉到百度頁面。 【方法：】 reload(); //重新載入當前網址，相當於按下刷新按鈕。 【navigator對象：】 包含有關瀏覽器的信息。常用於獲取客戶端瀏覽器和操作系統信息。 【常用屬性：】 navigator.userAgent; 【舉例：（以screen對象為例）】 var screen = window.screen; screen.width; screen.height; screen.availWidth; screen.availHeight;
（5）window子對象--document
當網頁被加載時，瀏覽器會掃描頁面的內容，並創建頁面的文檔對象模型（一種樹形結構），JavaScript 將文檔樹中的每一項都當做對象，並進行操作（增刪改查）。故JS能改變頁面中的所有HTML元素、屬性、CSS樣式以及對頁面所有事件做出反應。
樹中的每個對象也稱為樹的節點（ node）。如果節點包含 HTML 標簽，那么它就稱為元素節點（ element node），否則，就稱為文本節點（ text node）。再細分的話，又包括文檔節點，注釋節點，屬性節點（如下圖：從某網站上copy下來的）。
【查找節點】
1、通過id查詢。document.getElementById(String idName);若id錯誤，則返回null。
2、通過標簽名稱查詢。document.getElementsByTagName(String name);返回一個長為length的數組，根據指定標簽名返回所有元素。若標簽名錯誤，返回一個長為0的數組。
3、通過節點關系（層次）查詢。
node.parentNode遵循文檔的上下層次結構，查找單個父節點。
node.childNodes遵循文檔的上下層次結構，查找多個子節點（不常用，其將空格視為孩子）。
4、通過name屬性查詢。document.getElementByName(String name)；根據標簽的name屬性來查詢。常用於單選框、復選框。
【讀取、修改節點信息：】
1、獲取節點名稱。
格式：
節點.nodeName
其中：
元素節點和屬性節點的節點名稱為標簽或屬性名，
文本節點的名稱為#text，
文檔節點的名稱為#document。
舉例：
document.nodeName; //結果為"#document"
2、獲取節點類型。
格式：
節點.nodeType：
其中：
根據返回數值不同來判斷節點類型。
返回1為元素節點，
返回2為屬性節點，
返回3為文本節點，
返回8為注釋節點，
返回9為文檔節點。
舉例：
document.nodeType; //結果為9
3、設置元素節點的內容，
通過innerText設置或獲取位於對象起始和結束標簽內的文本（純文本）。
通過innerHTML設置或獲取位於對象起始和結束標簽內的HTML（帶標簽的文本）。
舉例：
document.getElementsByTagName("p")[1].innerHTML;
4、獲取節點屬性，
getAttribute(); //方法根據屬性名稱獲取屬性的值。
setAttrinbute(); //方法根據屬性名稱設置屬性的值。
removeAttribute(); //方法根據屬性名稱刪除屬性的值。
舉例：
document.getElementsByTagName("p")[1].getAttribute("id");
5、元素節點的樣式,
style屬性：
style.color; //設置節點標簽顏色
node.style.fontSize; //設置節點標簽的字體大小
舉例：
document.getElementsByTagName("p")[1].style.color = "red";
document.getElementsByTagName("p")[1].style.fontSize = "80px";
className屬性；（相當於改class屬性值）
node.className;
舉例：
document.getElementsByTagName("p")[1].className = "show";
【增加節點：】
增加節點步驟：
1、創建節點（此時頁面中無顯示）。
var newNode = document.createElement(elementName); //返回新創建的節點。
舉例：
var newNode = document.createElement("input"); //創建一個input標簽對象
newNode.type = "text"; //設置為文本框
newNode.value = "sure"; //設置文本框初始值為 sure
newNode.style.color = "red"; //設置文本框字體的顏色
2、添加節點（將新節點作為某個節點的子節點）。
parentNode.appendChild(newNode); //將新節點作為父節點的最后一個節點追加。
parentNode.insertBefore(newNode, refNode); //新節點位於參考節點（refNode）前。
舉例：
document.getElementsByTagName("p")[0].appendChild(newNode);
【刪除節點：】
node.removeChild(childNode); //刪除某節點（node）的子節點（childNode），若子節點B中還有子節點C，那么會將整個子節點B刪除。
一般寫成：childNode.parentNode.removeChild(childNode);
舉例：
newNode.parentNode.removeChild(newNode);
【舉例：（聯動菜單實現）】 <!-- 舉例：（聯動菜單） 要求： 1、創建省、市下拉選項框。 2、當改變省份時，重置市。 --> <!DOCTYPE html> <html> <head> <title>聯動菜單</title> <meta charset="utf-8" /> <script type="text/javascript"> //1、提前預置每個省對應的市 var cities = [ ["請選擇"], ["青島", "濟南", "煙台"], ["杭州", "寧波", "溫州"], ["南京", "無錫", "蘇州"] ]; function change() { //2、獲取當前選中的省 var province = document.getElementById("province"); var pindex = province.value; //3、刪除所有的市 //var city = document.getElementById("city"); //var options = city.getElementsByTagName("option"); //for(var i=0;i<options.length;i++){ //options[i].parentNode.removeChild(options[i]); //}等價於 city.innerHTML = ""; //4、重新添加這個省下的市 var pcities = cities[pindex]; for (var i = 0; i < pcities.length; i++) { //創建option節點 var option = document.createElement("option"); //設置新節點屬性 option.setAttribute("value", i); option.innerHTML = pcities[i]; //將新節點追加到城市下拉選項框中 city.appendChild(option); } } </script> </head> <body> <!-- option的內容時下拉選項顯示的值。 option的value是select節點的返回值。 onchange是值改變事件，當值發生改變時觸發。 --> 省： <select id="province" onchange="change();"> <option value="0">請選擇</option> <option value="1">山東省</option> <option value="2">浙江省</option> <option value="3">江蘇省</option> </select> 市： <select id="city"> <option>請選擇</option> </select> </body> </html>
5、自定義對象
（1）自定義對象是一種特殊的數據類型，由屬性和方法封裝而成。
屬性指與對象有關的值。
格式：
對象名.屬性名。
方法指對象可以執行的行為或可以完成的功能。
格式：
對象名.方法名()。
（2）創建自定義的對象的方法：
【第一種：直接創建對象：（此種方法不推薦，可復用性差，代碼維護不易）】 【格式：】 <script type="text/javascript"> function f1(){ var teacher = new Object(); //添加屬性 teacher.name = "蒼#null"; teacher.age = 40; //添加方法 teacher.work = function(){ alert("Hi"); }; alert(teacher.name+": "+teacher.age); teacher.work(); } </script> 【第二種：（利用構造器創建）】 【格式：】 <script type="text/javascript"> function f2(){ //創建對象 var s = new Student("jarry", 30); //使用對象 alert(s.name+": "+s.age); s.work(); } //預置一個帶有格式要求的對象 function Student(name, age){ this.name = name; this.age = age; this.work = function(){ alert("Hello"); }; } </script> 【第三種：（使用JSON創建對象）】 【格式：】 <script type="text/javascript"> function f3(){ var programmer = { "name" : "tom", "age" : 25, "work" : function(){alert("Hehe");} }; alert(programmer.name + ": " + programmer.age); programmer.work(); } </script> 【還有原型模式創建等...，未完待續...】 【舉例：】 <!DOCTYPE html> <html> <head> <title>創建自定義對象</title> <meta charset="utf-8" /> <script type="text/javascript"> //使用第一種方式創建對象 function f1(){ var teacher = new Object(); teacher.name = "蒼#null"; teacher.age = 40; teacher.work = function(){ alert("Hi"); }; alert(teacher.name+": "+teacher.age); teacher.work(); } //第二種方式 function f2(){ //創建對象 var s = new Student("jarry", 30); //使用對象 alert(s.name+": "+s.age); s.work(); } //預置一個帶有格式要求的對象 function Student(name, age){ this.name = name; this.age = age; this.work = function(){ alert("Hello"); }; } //使用第三種 function f3(){ var programmer = { "name" : "tom", "age" : 25, "work" : function(){alert("Hehe");} }; alert(programmer.name + ": " + programmer.age); programmer.work(); } </script> </head> <body> <!-- 第一種，直接new一個對象 --> <button onclick="f1();">按鈕1</button> <!-- 第二種，使用自定義構造函數,然后new一個構造函數 --> <button onclick="f2();">按鈕2</button> <!-- 第三種，使用JSON來創建對象,常用於服務端相關 --> <button onclick="f3();">按鈕3</button> </body> </html>