js學習筆記（比較全）
阿新 • • 發佈：2019-01-04
什麼是JavaScript？
1. JavaScript 是一種客戶端指令碼語言（指令碼語言是一種輕量級的程式語言）。
2. JavaScript 通常被直接嵌入 HTML 頁面。
3. JavaScript 是一種解釋性語言（就是說，程式碼執行不進行預編譯）。
特點：
1. 弱型別
2. 基於物件。(因為面向物件需要具有封裝、繼承、多型的特徵)
在客戶端瀏覽器上執行的指令碼：
1. JavaScript 2. VBscript 3 applet （需要安裝JDK）
ECMAScript總稱
|
|-- JavaScript
|
|-- ActionScript
|
|-- ScriptEase
JavaScript語言中包含三個核心：ECMAScript基本語法、DOM、BOM
JavaScript是基於物件的指令碼語言。
在HTML中如何使用JavaScript
===============================================
*1. 使用<script></script>標籤：
屬性：
charset（可選）字符集設定、
defer（可選執行順序）值：defer、
language(已廢除)、
src（可選）使用外部的js指令碼檔案
type(必選)型別：值：text/javascript
<script type="text/javascript">
<!--
javaScript語言
//-->
</script>
2. 在html標籤的事件中，超級連結裡。
<button onclick="javaScript語言"></button>
<a href="javascript:alert('aa');alert('bb')">點選</a>
3. 外部匯入方式（推薦）：
<script type="text/javascript" src="my.js"></script>
JavaScript的語法：
===========================================
1.區分大小寫：變數名、函式名、運算子以及其他一切東西都是區分大小寫的。
2.他和php一樣屬於弱型別語言。
3.每行結尾的分號可有可無。(js中的每條語句之間的分割符可以是回車換行也可以是";"分號(推薦))
4.指令碼註釋：
// 單行註釋
/* 多行註釋 */
5.括號表示程式碼塊:{}
6.變數的定義：使用var關鍵字來宣告。
變數的命名規範是：字母數字，$符和下劃線構成，但是不可以以數字開始。
變數名不可以使用關鍵字.
typeof函式獲取一個變數的型別：
* undefined - 如果變數是 Undefined 型別的
* boolean - 如果變數是 Boolean 型別的
* number - 如果變數是 Number 型別的 (整數、浮點數)
* string - 如果變數是 String 型別的 （採用""、 ''）
* object - 如果變數是一種引用型別或 Null 型別的
如：new Array()/ new String()...
* funciton -- 函式型別
7.JavaScript的資料型別：
undefined 型別
null 型別（物件）
boolean 型別
number 型別
八進位制數和十六進位制數 012
浮點數
特殊的 Number 值
string 型別
var s = "hello";
document.write(s+"<br/>");
document.write(s[1]+"<br/>"); //使用下標可以取出對應的字元
document.write(s.length+"<br/>");//求長度
object引用型別
引用型別通常叫做類（class），也就是說，遇到引用值，所處理的就是物件。
Object 物件自身用處不大，不過在瞭解其他類之前，還是應該瞭解它。
因為 ECMAScript 中的 Object 物件與 Java 中的 java.lang.Object 相似，
ECMAScript 中的所有物件都由這個物件繼承而來，Object 物件中的所有屬性
和方法都會出現在其他物件中，所以理解了 Object 物件，就可以更好地理解其他物件。
8. 型別轉換：
使用：Number（）、parseInt() 和parseFloat（） 做型別轉換
Number()強轉一個數值(包含整數和浮點數)。
*parseInt()強轉整數，
*parseFloat（）強轉浮點數
函式isNaN()檢測引數是否不是一個數字。 is not a number
ECMAScript 中可用的 3 種強制型別轉換如下：
Boolean(value) - 把給定的值轉換成 Boolean 型；
Number(value) - 把給定的值轉換成數字（可以是整數或浮點數）；
String(value) - 把給定的值轉換成字串；
JavaScript的運算子
=====================================================================
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;
javaScript（語句流程控制）
====================================================================
1. 判斷語句 if語句； if... else ... if ... else if ... else...
2. 多分支語句： switch（）{。 case ：。。。。}
switch (i) {
case 20: alert("20");
break;
case 30: alert("30");
break;
case 40: alert("40");
break;
default: alert("other");
}
3. 迴圈語句（迭代語句）
for：
while
do...while
*for-in 語句: 語句是嚴格的迭代語句，用於列舉物件的屬性。
var a = [10,20,30,40,50];
//迭代的是陣列的下標。
for(i in a){
document.write(a[i]);
}
//輸出： 1020304050
4. break 和 continue 語句對迴圈中的程式碼執行提供了更嚴格的控制。
5. *with 語句用於設定程式碼在特定物件中的作用域。
//擴充知識：
1. 在網頁文件中獲取一個節點物件（HTML標籤）
document.getElementById("mid"); //獲取標籤id屬性值為mid的節點物件
2. 定時相關函式：
setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 單次定時執行指定函式
clearTimeout(iTimeoutID) -- 取消上面的單次定時
setInterval(vCode, iMilliSeconds [, sLanguage]) --無限次定時執行指定函式
clearInterval(iIntervalID)-- 取消上面的多次定時
==================================================
JS的第一天作業
=============================================
一、理論作業：
1. 什麼是JavaScript？
2. 在HTML中嵌入JavaScript的方法有幾種？
3. JavaScript的常用型別都有哪些？
4. 常用的JavaScript的型別轉換函式有那兩個？
5. 我們使用哪個函式判斷是否不是一個整數？
6. JavaScript語言的運算子都有哪些？
二、程式碼題：
1. 參考課程程式碼做一個簡單的計算器
2. （選做）一個倒計時的按鈕（10,9,8,7,...這是是個灰色不可點選的，當為0是會換成同意字樣，並可點選。）
3. （選做） 做一個倒計時（時 分 秒）。可選帶暫停效果
三、預習作業：
1. JavaScript的函式如何定義和呼叫。
2. 常用的系統函式都有哪些。
3. 物件的應用與宣告。
===================end===========================
=================================================
JavaScript 第二天內容：
=================================================
一、JavaScript的函式：
--------------------------------------------------------
標準格式： function 函式名（[引數列表..]）{
函式體。。。
[return 返回值;]
}
JavaScript三種定義函式方法：
*第一種是使用function語句定義函式
如上面格式
第二種是使用Function()建構函式來定義函式（不常用）
var 函式名 = new Function(“引數1”，”引數2”，”引數3”……”函式體”);
如：
var 函式名 = new Function(”x”,”y”,”var z=x+y;return z;”);
*第三種是在表示式中定義函式
var 函式名 = function(引數1，引數2，…){函式體};
//例如：
//定義
var add = function(a,b){
return a+b;
}
//呼叫函式
document.write(add(50,20));
arguments 物件
在函式程式碼中，使用特殊物件 arguments，開發者無需明確指出引數名，就能訪問它們。
例如，在函式 sayHi() 中，第一個引數是 message。用 arguments[0]
也可以訪問這個值，即第一個引數的值（第一個引數位於位置 0，
第二個引數位於位置 1，依此類推）。
關於變數和引數問題：
函式外面定義的變數是全域性變數，函式內可以直接使用。
在函式內部沒有使用var定義的=變數則為全域性變數，
*在函式內使用var關鍵字定義的變數是區域性變數，即出了函式外邊無法獲取。
js函式定義的引數沒有預設值（目前只有最新的火狐瀏覽器支援）
二、系統中常用的內建函式：
------------------------------------------------------
escape()
//字串編碼
unescape()
//字串反編碼
*eval()
//將引數字串作為指令碼程式碼來執行。
*isNaN()
// is not a number (不是一個數值)
*parseInt()
*parseFloat()
三、JavaScript的物件的定義和使用
-------------------------------------------------------
1.使用建構函式建立內建物件
var myObject = new Object();
myObject.name = “lijie”;
myObject.age = 20;
myObject.say = function(){...}
2.直接建立自定義物件
var 物件名 = {屬性名1：屬性值，屬性名2：屬性值2，…….}
*3.使用自定義建構函式建立物件
function pen(name,color,price){
//物件的name屬性
this.name = name;
//物件的color屬性
this.color = color;
//物件的piece屬性
this.price = price;
//物件的say方法
this.say = function(){};
}
var pen = new pen(“鉛筆”,”紅色”,20);
pen.say();
--------------------------------------------------------------
測試型別:
1.typeof() //global物件的其中一個方法，typeof()
2.物件.constructor; //檢視當前物件的建構函式是誰
if(arr.constructor==Array){
alert("陣列"); //陣列推薦用這種方法，因為typeof得到是object
}
四、常用技巧函式：
---------------------------------------------------------------
1. HTML的標籤（節點）操作
document.write(""); //輸出的
document.getElementById("id名")； //獲取html頁面標籤中，標籤id屬性等於此值的物件。
如：var id = document.getElementById("hid"); //獲取id值為hid的標籤物件
document.getElementsByTagName("標籤名"); //獲取當前文件執行的標籤物件
html標籤物件的操作：
標籤物件.innerHTML="內容"；//在標籤物件內放置指定內容
標籤物件.style.css屬性名="值" //改變標籤物件的樣式。
示例：id.style.color="red";
注意：屬性名相當於變數名,所以css屬性名中的減號要去掉，將後面的首字母大寫。
如：font-size（css）---> fontSize(JS屬性)
標籤物件.value；
//獲取標籤物件的value值
標籤物件.value=”值“；//設定標籤物件的value值
--------------------------------------------------
JS的第二天作業
--------------------------------------------------
一、理論作業：
1. JavaScript三種定義函式方法?
2. arguments物件的理解？
3. 簡述JS中全域性變數和區域性變數的作用域？
4. 系統中常用的內建函式有哪些？
二、程式碼題：
1. 作業全選/全不選/反選的例項
2. 做一個檔案進度條的特效。
3. 使用自定義建構函式建立物件
4. （選做） 做一個樹形選單的點選效果
三、預習作業：
1. JavaScript中常用內建物件都有哪些？
2. 如何使用Date獲取當前時間。
3. 如何建立一個數組物件。
4. 如何使用物件的基本操作for..in。
===================end==========================
=================================================
JavaScript 第三天內容：(內建物件)
=================================================
一、for…in語句
----------------------------------------
for(var i in window){
document.write(i+”----”+window[i]);
}
這種語句可以遍歷物件中的所有屬性或陣列中的所有元素。
二、with語句
--------------------------------------------
如果使用with語句，就可以簡化物件屬性呼叫的層次。
document.write(‘test1’);
document.write(‘test2’);
document.write(‘test3’);
可以使用with來簡化：
with(document){
write(‘test1’);
write(‘test2’);
write(‘test3’);
}
三、JavaScript內建物件
-----------------------------------------------
* Array（陣列）
var a= new Array(); //建立一個空陣列
a = new Array(10); //建立一個數組單元為10個的陣列。
a = new Array(10,20,30);//建立一個指定陣列單元的陣列。
a=['a','b','c','d']; //快捷定義陣列
常用屬性：
length--獲取長度。
常用方法：
toString() 把陣列轉換為字串，並返回結果。
sort() 對陣列的元素進行排序
join() 把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔。
pop() 刪除並返回陣列的最後一個元素
push() 向陣列的末尾新增一個或更多元素，並返回新的長度。
。。。。。
* Boolean 布林值包裝類物件
方法：toSource()
返回該物件的原始碼。
toString() 把邏輯值轉換為字串，並返回結果。
valueOf() 返回 Boolean 物件的原始值。
* Date
var dd = new Date();
getDate() 從 Date 物件返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 物件返回一週中的某一天 (0 ~ 6)。
getMonth() 從 Date 物件返回月份 (0 ~ 11)。
getFullYear()
從 Date 物件以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 物件的小時 (0 ~ 23)。
getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 物件的秒數 (0 ~ 59)。
getMilliseconds()
返回 Date 物件的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
同上還有很多set方法用來設定。
* Math 物件用於執行數學任務。方法是靜態的。
abs(x) 返回數的絕對值。
ceil(x) 對數進行上舍入。
floor(x) 對數進行下舍入。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四捨五入為最接近的整數。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
* Number
toString();
toFixed 把數字轉換為字串，結果的小數點後有指定位數的數字。
* String 子串處理物件
anchor() 建立 HTML 錨。
*charAt() 返回在指定位置的字元。
charCodeAt()返回在指定的位置的字元的 Unicode 編碼。
*indexOf() 檢索字串。
*lastIndexOf()
從後向前搜尋字串。
match() 找到一個或多個正在表示式的匹配。
*replace() 替換與正則表示式匹配的子串。
search() 檢索與正則表示式相匹配的值。
slice() 提取字串的片斷，並在新的字串中返回被提取的部分。
split() 把字串分割為字串陣列。
substr() 從起始索引號提取字串中指定數目的字元。
*substring() 提取字串中兩個指定的索引號之間的字元。
toLocaleLowerCase()
把字串轉換為小寫。
toLocaleUpperCase()
把字串轉換為大寫。
*toLowerCase()
把字串轉換為小寫。
*toUpperCase()
把字串轉換為大寫。
* RegExp
exec()正則匹配
test()
match()
* Global
escape(string) -- 可對字串進行編碼
unescape(string) -- 函式可對通過 escape() 編碼的字串進行解碼。
encodeURI(URIstring) -- 函式可把字串作為 URI 進行編碼。
decodeURI(URIstring) -- 函式可對 encodeURI() 函式編碼過的 URI 進行解碼。
*eval(string) -- 函式可計算某個字串，並執行其中的的 JavaScript 程式碼。
getClass(javaobj) -- 函式可返回一個 JavaObject 的 JavaClass。
*isNaN(x) -- 函式用於檢查其引數是否是非數字值。
Number(object) --函式把物件的值轉換為數字。
*parseFloat(string) -- 函式可解析一個字串，並返回一個浮點數。
*parseInt(string, radix)
---------------------------------------------
四、 JS的第三天作業
---------------------------------------------
一、理論作業：
1. JavaScript中常用內建物件都有哪些？
3. 如何建立一個數組物件方式有幾種。
二、程式碼題：
1. 做一個註冊的表單驗證，
2. 實時問候：如：早上好！
3. 給你一個日期"2013-06-01 12:24:36"的時間戳值。
4. 顯示中文的星期幾。
5. 做一個隨機點名系統（點名多次，也不會重複！）;
三、預習作業：
1. JavaScript中常用事件都有哪些？
===================end==========================
=================================================
JavaScript 第四天內容：(事件)
=================================================
事件處理
一、事件源: 任何一個HTML元素（節點） body, div , button p, a, h1 .......
二、事件: 你的操作
滑鼠:
* click 單擊
dblclick 雙擊
contextmenu (在body) 文字選單（滑鼠右鍵使用）
要想遮蔽滑鼠右鍵使用return false
window.document.oncontextmenu=function(ent){...}
* mouseover 放上(移入)
* mouseout 離開（移出）
mousedown 按下
mouseup 擡起
* mousemove 移動
鍵盤：
keypress 鍵盤事件
keydown 按下
文件：(主要使用在body標籤中)
* load 載入
unload 關閉(為了相容可使用下面函式)
beforeunload 關閉之前
表單：
* focus 焦點
* blur 失去焦點
* submit 提交事件
* change 改變（如下拉框選擇事件）
其它：
* scroll 滾動事件(常用延遲載入、瀑布流技術)
window.onscroll=function(){
document.documentElement.scrollTop;//獲取滾動條的上距離
document.documentElement.scrollLeft;//滾動條的左距離
}
selectd 事件
。。。。
三、事件處理程式
使用一個匿名或回撥函式
有三種方法加事件
第一種：
格式： <tag on事件="事件處理程式" />
*第二種：
<script>
物件.on事件=事件處理程式
</script>
第三種：(火狐不相容)
<script for="事件源ID" event="on事件">事件處理程式</script>
事件物件：
屬性：
1. srcElement
2. keyCode 鍵盤值
事件 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. 完善註冊的表單驗證提示，
2. 橫向的選單特效
3. 為圖片輪換播放新增按鈕
5.（選做）滾動圖片替換
6.（選做）鍵盤事件的處理（通過鍵盤事件移動圖層）
預習：1.JavaScript中的其他事件：（滾動事件，鍵盤事件。。）
2.常用的BOM都有哪些？
3.HTML中的DOM都有哪些？
第五天 講解BOM
=============================================================================
一、BOM
---------------------------------------
<button onclick="window.location=''">跳轉</button>
1. window物件
常用的屬性：
*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。
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>");
}
3. 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
4. History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。
5. 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); //火狐不相容
第六天 講解DOM
=============================================================================
一、基本概念
--------------------------------------------------------------------------
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
二、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> 元素
第七天 繼續講解DOM(重點講XML DOM)
====================================================================
一、HTML的DOM
---------------------------------------------------------
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表單中的選擇列表
Style : 代表單獨的樣式宣告
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
二、XML的DOM
---------------------------------------------------------
DOM （Document Object Model） 文件物件模型
1. document 文件 HTML XML 檔案 （標記語言)
<body>
<div>
<!-- -->
<a href="#">wwww</a>
</div>
</body>
節點：
將文件想成一個倒樹， 每一個部分（根、元素、文字（內容）， 屬性， 註釋）都是一節點。
根據 DOM，HTML 文件中的每個成分都是一個節點。
DOM 是這樣規定的：
1. 整個文件是一個文件節點(根節點)
2. 每個 HTML 標籤是一個元素節點
3. 包含在 HTML 元素中的文字是文字節點
4. 每一個 HTML 屬性是一個屬性節點
5. 註釋屬於註釋節點
2. 父、子和同級節點
節點樹中的節點彼此之間都有等級關係。
父、子和同級節點用於描述這種關係。父節點擁有子節點，位於相同層級上的子節點稱為同級節點（兄弟或姐妹）。
1. 在節點樹中，頂端的節點成為根節點
2. 根節點之外的每個節點都有一個父節點
3. 節點可以有任何數量的子節點
4. 葉子是沒有子節點的節點
5. 同級節點是擁有相同父節點的節點
只要知道一個節點， 按關係找到其它節點
父節點： parentNode
子節點（第一個， 最後一個） childNodes firstChild lastChild
同胞（同輩）節點 （上一個， 下一個）nextSibling previousSibling
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（多個）
4. 每個節點中的內容
節點型別nodeType、節點名nodeName，節點值nodeValue
節點名nodeName：
nodeName 是隻讀的
元素節點的 nodeName 與標籤名相同
屬性節點的 nodeName 是屬性的名稱
文字節點的 nodeName 永遠是 #text
文件節點的 nodeName 永遠是 #document
節點值nodeValue
元素節點的 nodeValue 是 undefined
文字節點的 nodeValue 是文字自身
屬性節點的 nodeValue 是屬性的值
nodeType（節點型別）
元素型別
節點型別
元素 1
屬性 2
文字 3
註釋 8
文件 9
4. 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.Document
2.Element
3.Event
4.HTMLElement
5.Node
6.XMLHttpRequest
第九天 Ajax
===========================================================
AJAX
---------------------------------------
var xmlhttp;
1. 建立請求物件
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 設定回撥函式（監聽）
xmlhttp.onreadystatechange=函式名；
或
xmlhttp.onreadystatechange=function(){
函式體。。。
}
3. 初始化：
xmlhttp.open("GET","gethint.php?q="+str,true); //非同步以get方式傳送到gethint.php
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");
1. JavaScript 是一種客戶端指令碼語言（指令碼語言是一種輕量級的程式語言）。
2. JavaScript 通常被直接嵌入 HTML 頁面。
3. JavaScript 是一種解釋性語言（就是說，程式碼執行不進行預編譯）。
特點：
1. 弱型別
2. 基於物件。(因為面向物件需要具有封裝、繼承、多型的特徵)
在客戶端瀏覽器上執行的指令碼：
1. JavaScript 2. VBscript 3 applet （需要安裝JDK）
ECMAScript總稱
|
|-- JavaScript
|
|-- ActionScript
|
|-- ScriptEase
JavaScript語言中包含三個核心：ECMAScript基本語法、DOM、BOM
JavaScript是基於物件的指令碼語言。
在HTML中如何使用JavaScript
===============================================
*1. 使用<script></script>標籤：
屬性：
charset（可選）字符集設定、
defer（可選執行順序）值：defer、
language(已廢除)、
src（可選）使用外部的js指令碼檔案
type(必選)型別：值：text/javascript
<script type="text/javascript">
<!--
javaScript語言
//-->
</script>
2. 在html標籤的事件中，超級連結裡。
<button onclick="javaScript語言"></button>
<a href="javascript:alert('aa');alert('bb')">點選</a>
3. 外部匯入方式（推薦）：
<script type="text/javascript" src="my.js"></script>
JavaScript的語法：
===========================================
1.區分大小寫：變數名、函式名、運算子以及其他一切東西都是區分大小寫的。
2.他和php一樣屬於弱型別語言。
3.每行結尾的分號可有可無。(js中的每條語句之間的分割符可以是回車換行也可以是";"分號(推薦))
4.指令碼註釋：
// 單行註釋
/* 多行註釋 */
5.括號表示程式碼塊:{}
6.變數的定義：使用var關鍵字來宣告。
變數的命名規範是：字母數字，$符和下劃線構成，但是不可以以數字開始。
變數名不可以使用關鍵字.
typeof函式獲取一個變數的型別：
* undefined - 如果變數是 Undefined 型別的
* boolean - 如果變數是 Boolean 型別的
* number - 如果變數是 Number 型別的 (整數、浮點數)
* string - 如果變數是 String 型別的 （採用""、 ''）
* object - 如果變數是一種引用型別或 Null 型別的
如：new Array()/ new String()...
* funciton -- 函式型別
7.JavaScript的資料型別：
undefined 型別
null 型別（物件）
boolean 型別
number 型別
八進位制數和十六進位制數 012
浮點數
特殊的 Number 值
string 型別
var s = "hello";
document.write(s+"<br/>");
document.write(s[1]+"<br/>"); //使用下標可以取出對應的字元
document.write(s.length+"<br/>");//求長度
object引用型別
引用型別通常叫做類（class），也就是說，遇到引用值，所處理的就是物件。
Object 物件自身用處不大，不過在瞭解其他類之前，還是應該瞭解它。
因為 ECMAScript 中的 Object 物件與 Java 中的 java.lang.Object 相似，
ECMAScript 中的所有物件都由這個物件繼承而來，Object 物件中的所有屬性
和方法都會出現在其他物件中，所以理解了 Object 物件，就可以更好地理解其他物件。
8. 型別轉換：
使用：Number（）、parseInt() 和parseFloat（） 做型別轉換
Number()強轉一個數值(包含整數和浮點數)。
*parseInt()強轉整數，
*parseFloat（）強轉浮點數
函式isNaN()檢測引數是否不是一個數字。 is not a number
ECMAScript 中可用的 3 種強制型別轉換如下：
Boolean(value) - 把給定的值轉換成 Boolean 型；
Number(value) - 把給定的值轉換成數字（可以是整數或浮點數）；
String(value) - 把給定的值轉換成字串；
JavaScript的運算子
=====================================================================
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;
javaScript（語句流程控制）
====================================================================
1. 判斷語句 if語句； if... else ... if ... else if ... else...
2. 多分支語句： switch（）{。 case ：。。。。}
switch (i) {
case 20: alert("20");
break;
case 30: alert("30");
break;
case 40: alert("40");
break;
default: alert("other");
}
3. 迴圈語句（迭代語句）
for：
while
do...while
*for-in 語句: 語句是嚴格的迭代語句，用於列舉物件的屬性。
var a = [10,20,30,40,50];
//迭代的是陣列的下標。
for(i in a){
document.write(a[i]);
}
//輸出： 1020304050
4. break 和 continue 語句對迴圈中的程式碼執行提供了更嚴格的控制。
5. *with 語句用於設定程式碼在特定物件中的作用域。
//擴充知識：
1. 在網頁文件中獲取一個節點物件（HTML標籤）
document.getElementById("mid"); //獲取標籤id屬性值為mid的節點物件
2. 定時相關函式：
setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 單次定時執行指定函式
clearTimeout(iTimeoutID) -- 取消上面的單次定時
setInterval(vCode, iMilliSeconds [, sLanguage]) --無限次定時執行指定函式
clearInterval(iIntervalID)-- 取消上面的多次定時
==================================================
JS的第一天作業
=============================================
一、理論作業：
1. 什麼是JavaScript？
2. 在HTML中嵌入JavaScript的方法有幾種？
3. JavaScript的常用型別都有哪些？
4. 常用的JavaScript的型別轉換函式有那兩個？
5. 我們使用哪個函式判斷是否不是一個整數？
6. JavaScript語言的運算子都有哪些？
二、程式碼題：
1. 參考課程程式碼做一個簡單的計算器
2. （選做）一個倒計時的按鈕（10,9,8,7,...這是是個灰色不可點選的，當為0是會換成同意字樣，並可點選。）
3. （選做） 做一個倒計時（時 分 秒）。可選帶暫停效果
三、預習作業：
1. JavaScript的函式如何定義和呼叫。
2. 常用的系統函式都有哪些。
3. 物件的應用與宣告。
===================end===========================
=================================================
JavaScript 第二天內容：
=================================================
一、JavaScript的函式：
--------------------------------------------------------
標準格式： function 函式名（[引數列表..]）{
函式體。。。
[return 返回值;]
}
JavaScript三種定義函式方法：
*第一種是使用function語句定義函式
如上面格式
第二種是使用Function()建構函式來定義函式（不常用）
var 函式名 = new Function(“引數1”，”引數2”，”引數3”……”函式體”);
如：
var 函式名 = new Function(”x”,”y”,”var z=x+y;return z;”);
*第三種是在表示式中定義函式
var 函式名 = function(引數1，引數2，…){函式體};
//例如：
//定義
var add = function(a,b){
return a+b;
}
//呼叫函式
document.write(add(50,20));
arguments 物件
在函式程式碼中，使用特殊物件 arguments，開發者無需明確指出引數名，就能訪問它們。
例如，在函式 sayHi() 中，第一個引數是 message。用 arguments[0]
也可以訪問這個值，即第一個引數的值（第一個引數位於位置 0，
第二個引數位於位置 1，依此類推）。
關於變數和引數問題：
函式外面定義的變數是全域性變數，函式內可以直接使用。
在函式內部沒有使用var定義的=變數則為全域性變數，
*在函式內使用var關鍵字定義的變數是區域性變數，即出了函式外邊無法獲取。
js函式定義的引數沒有預設值（目前只有最新的火狐瀏覽器支援）
二、系統中常用的內建函式：
------------------------------------------------------
escape()
//字串編碼
unescape()
//字串反編碼
*eval()
//將引數字串作為指令碼程式碼來執行。
*isNaN()
// is not a number (不是一個數值)
*parseInt()
*parseFloat()
三、JavaScript的物件的定義和使用
-------------------------------------------------------
1.使用建構函式建立內建物件
var myObject = new Object();
myObject.name = “lijie”;
myObject.age = 20;
myObject.say = function(){...}
2.直接建立自定義物件
var 物件名 = {屬性名1：屬性值，屬性名2：屬性值2，…….}
*3.使用自定義建構函式建立物件
function pen(name,color,price){
//物件的name屬性
this.name = name;
//物件的color屬性
this.color = color;
//物件的piece屬性
this.price = price;
//物件的say方法
this.say = function(){};
}
var pen = new pen(“鉛筆”,”紅色”,20);
pen.say();
--------------------------------------------------------------
測試型別:
1.typeof() //global物件的其中一個方法，typeof()
2.物件.constructor; //檢視當前物件的建構函式是誰
if(arr.constructor==Array){
alert("陣列"); //陣列推薦用這種方法，因為typeof得到是object
}
四、常用技巧函式：
---------------------------------------------------------------
1. HTML的標籤（節點）操作
document.write(""); //輸出的
document.getElementById("id名")； //獲取html頁面標籤中，標籤id屬性等於此值的物件。
如：var id = document.getElementById("hid"); //獲取id值為hid的標籤物件
document.getElementsByTagName("標籤名"); //獲取當前文件執行的標籤物件
html標籤物件的操作：
標籤物件.innerHTML="內容"；//在標籤物件內放置指定內容
標籤物件.style.css屬性名="值" //改變標籤物件的樣式。
示例：id.style.color="red";
注意：屬性名相當於變數名,所以css屬性名中的減號要去掉，將後面的首字母大寫。
如：font-size（css）---> fontSize(JS屬性)
標籤物件.value；
//獲取標籤物件的value值
標籤物件.value=”值“；//設定標籤物件的value值
--------------------------------------------------
JS的第二天作業
--------------------------------------------------
一、理論作業：
1. JavaScript三種定義函式方法?
2. arguments物件的理解？
3. 簡述JS中全域性變數和區域性變數的作用域？
4. 系統中常用的內建函式有哪些？
二、程式碼題：
1. 作業全選/全不選/反選的例項
2. 做一個檔案進度條的特效。
3. 使用自定義建構函式建立物件
4. （選做） 做一個樹形選單的點選效果
三、預習作業：
1. JavaScript中常用內建物件都有哪些？
2. 如何使用Date獲取當前時間。
3. 如何建立一個數組物件。
4. 如何使用物件的基本操作for..in。
===================end==========================
=================================================
JavaScript 第三天內容：(內建物件)
=================================================
一、for…in語句
----------------------------------------
for(var i in window){
document.write(i+”----”+window[i]);
}
這種語句可以遍歷物件中的所有屬性或陣列中的所有元素。
二、with語句
--------------------------------------------
如果使用with語句，就可以簡化物件屬性呼叫的層次。
document.write(‘test1’);
document.write(‘test2’);
document.write(‘test3’);
可以使用with來簡化：
with(document){
write(‘test1’);
write(‘test2’);
write(‘test3’);
}
三、JavaScript內建物件
-----------------------------------------------
* Array（陣列）
var a= new Array(); //建立一個空陣列
a = new Array(10); //建立一個數組單元為10個的陣列。
a = new Array(10,20,30);//建立一個指定陣列單元的陣列。
a=['a','b','c','d']; //快捷定義陣列
常用屬性：
length--獲取長度。
常用方法：
toString() 把陣列轉換為字串，並返回結果。
sort() 對陣列的元素進行排序
join() 把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔。
pop() 刪除並返回陣列的最後一個元素
push() 向陣列的末尾新增一個或更多元素，並返回新的長度。
。。。。。
* Boolean 布林值包裝類物件
方法：toSource()
返回該物件的原始碼。
toString() 把邏輯值轉換為字串，並返回結果。
valueOf() 返回 Boolean 物件的原始值。
* Date
var dd = new Date();
getDate() 從 Date 物件返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 物件返回一週中的某一天 (0 ~ 6)。
getMonth() 從 Date 物件返回月份 (0 ~ 11)。
getFullYear()
從 Date 物件以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 物件的小時 (0 ~ 23)。
getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 物件的秒數 (0 ~ 59)。
getMilliseconds()
返回 Date 物件的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
同上還有很多set方法用來設定。
* Math 物件用於執行數學任務。方法是靜態的。
abs(x) 返回數的絕對值。
ceil(x) 對數進行上舍入。
floor(x) 對數進行下舍入。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四捨五入為最接近的整數。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
* Number
toString();
toFixed 把數字轉換為字串，結果的小數點後有指定位數的數字。
* String 子串處理物件
anchor() 建立 HTML 錨。
*charAt() 返回在指定位置的字元。
charCodeAt()返回在指定的位置的字元的 Unicode 編碼。
*indexOf() 檢索字串。
*lastIndexOf()
從後向前搜尋字串。
match() 找到一個或多個正在表示式的匹配。
*replace() 替換與正則表示式匹配的子串。
search() 檢索與正則表示式相匹配的值。
slice() 提取字串的片斷，並在新的字串中返回被提取的部分。
split() 把字串分割為字串陣列。
substr() 從起始索引號提取字串中指定數目的字元。
*substring() 提取字串中兩個指定的索引號之間的字元。
toLocaleLowerCase()
把字串轉換為小寫。
toLocaleUpperCase()
把字串轉換為大寫。
*toLowerCase()
把字串轉換為小寫。
*toUpperCase()
把字串轉換為大寫。
* RegExp
exec()正則匹配
test()
match()
* Global
escape(string) -- 可對字串進行編碼
unescape(string) -- 函式可對通過 escape() 編碼的字串進行解碼。
encodeURI(URIstring) -- 函式可把字串作為 URI 進行編碼。
decodeURI(URIstring) -- 函式可對 encodeURI() 函式編碼過的 URI 進行解碼。
*eval(string) -- 函式可計算某個字串，並執行其中的的 JavaScript 程式碼。
getClass(javaobj) -- 函式可返回一個 JavaObject 的 JavaClass。
*isNaN(x) -- 函式用於檢查其引數是否是非數字值。
Number(object) --函式把物件的值轉換為數字。
*parseFloat(string) -- 函式可解析一個字串，並返回一個浮點數。
*parseInt(string, radix)
---------------------------------------------
四、 JS的第三天作業
---------------------------------------------
一、理論作業：
1. JavaScript中常用內建物件都有哪些？
3. 如何建立一個數組物件方式有幾種。
二、程式碼題：
1. 做一個註冊的表單驗證，
2. 實時問候：如：早上好！
3. 給你一個日期"2013-06-01 12:24:36"的時間戳值。
4. 顯示中文的星期幾。
5. 做一個隨機點名系統（點名多次，也不會重複！）;
三、預習作業：
1. JavaScript中常用事件都有哪些？
===================end==========================
=================================================
JavaScript 第四天內容：(事件)
=================================================
事件處理
一、事件源: 任何一個HTML元素（節點） body, div , button p, a, h1 .......
二、事件: 你的操作
滑鼠:
* click 單擊
dblclick 雙擊
contextmenu (在body) 文字選單（滑鼠右鍵使用）
要想遮蔽滑鼠右鍵使用return false
window.document.oncontextmenu=function(ent){...}
* mouseover 放上(移入)
* mouseout 離開（移出）
mousedown 按下
mouseup 擡起
* mousemove 移動
鍵盤：
keypress 鍵盤事件
keydown 按下
文件：(主要使用在body標籤中)
* load 載入
unload 關閉(為了相容可使用下面函式)
beforeunload 關閉之前
表單：
* focus 焦點
* blur 失去焦點
* submit 提交事件
* change 改變（如下拉框選擇事件）
其它：
* scroll 滾動事件(常用延遲載入、瀑布流技術)
window.onscroll=function(){
document.documentElement.scrollTop;//獲取滾動條的上距離
document.documentElement.scrollLeft;//滾動條的左距離
}
selectd 事件
。。。。
三、事件處理程式
使用一個匿名或回撥函式
有三種方法加事件
第一種：
格式： <tag on事件="事件處理程式" />
*第二種：
<script>
物件.on事件=事件處理程式
</script>
第三種：(火狐不相容)
<script for="事件源ID" event="on事件">事件處理程式</script>
事件物件：
屬性：
1. srcElement
2. keyCode 鍵盤值
事件 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. 完善註冊的表單驗證提示，
2. 橫向的選單特效
3. 為圖片輪換播放新增按鈕
5.（選做）滾動圖片替換
6.（選做）鍵盤事件的處理（通過鍵盤事件移動圖層）
預習：1.JavaScript中的其他事件：（滾動事件，鍵盤事件。。）
2.常用的BOM都有哪些？
3.HTML中的DOM都有哪些？
第五天 講解BOM
=============================================================================
一、BOM
---------------------------------------
<button onclick="window.location=''">跳轉</button>
1. window物件
常用的屬性：
*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。
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>");
}
3. 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
4. History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。
5. 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); //火狐不相容
第六天 講解DOM
=============================================================================
一、基本概念
--------------------------------------------------------------------------
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
二、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> 元素
第七天 繼續講解DOM(重點講XML DOM)
====================================================================
一、HTML的DOM
---------------------------------------------------------
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表單中的選擇列表
Style : 代表單獨的樣式宣告
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
二、XML的DOM
---------------------------------------------------------
DOM （Document Object Model） 文件物件模型
1. document 文件 HTML XML 檔案 （標記語言)
<body>
<div>
<!-- -->
<a href="#">wwww</a>
</div>
</body>
節點：
將文件想成一個倒樹， 每一個部分（根、元素、文字（內容）， 屬性， 註釋）都是一節點。
根據 DOM，HTML 文件中的每個成分都是一個節點。
DOM 是這樣規定的：
1. 整個文件是一個文件節點(根節點)
2. 每個 HTML 標籤是一個元素節點
3. 包含在 HTML 元素中的文字是文字節點
4. 每一個 HTML 屬性是一個屬性節點
5. 註釋屬於註釋節點
2. 父、子和同級節點
節點樹中的節點彼此之間都有等級關係。
父、子和同級節點用於描述這種關係。父節點擁有子節點，位於相同層級上的子節點稱為同級節點（兄弟或姐妹）。
1. 在節點樹中，頂端的節點成為根節點
2. 根節點之外的每個節點都有一個父節點
3. 節點可以有任何數量的子節點
4. 葉子是沒有子節點的節點
5. 同級節點是擁有相同父節點的節點
只要知道一個節點， 按關係找到其它節點
父節點： parentNode
子節點（第一個， 最後一個） childNodes firstChild lastChild
同胞（同輩）節點 （上一個， 下一個）nextSibling previousSibling
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（多個）
4. 每個節點中的內容
節點型別nodeType、節點名nodeName，節點值nodeValue
節點名nodeName：
nodeName 是隻讀的
元素節點的 nodeName 與標籤名相同
屬性節點的 nodeName 是屬性的名稱
文字節點的 nodeName 永遠是 #text
文件節點的 nodeName 永遠是 #document
節點值nodeValue
元素節點的 nodeValue 是 undefined
文字節點的 nodeValue 是文字自身
屬性節點的 nodeValue 是屬性的值
nodeType（節點型別）
元素型別
節點型別
元素 1
屬性 2
文字 3
註釋 8
文件 9
4. 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.Document
2.Element
3.Event
4.HTMLElement
5.Node
6.XMLHttpRequest
第九天 Ajax
===========================================================
AJAX
---------------------------------------
var xmlhttp;
1. 建立請求物件
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 設定回撥函式（監聽）
xmlhttp.onreadystatechange=函式名；
或
xmlhttp.onreadystatechange=function(){
函式體。。。
}
3. 初始化：
xmlhttp.open("GET","gethint.php?q="+str,true); //非同步以get方式傳送到gethint.php
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");