什麼是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 οnclick="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.οncοntextmenu=function(ent){...}
* mouseover 放上(移入)
* mouseout 離開（移出）
mousedown 按下
mouseup 擡起
* mousemove 移動
鍵盤：
keypress 鍵盤事件
keydown 按下
文檔：(主要使用在body標籤中)
* load 加載
unload 關閉(爲了兼容可使用下面函數)
beforeunload 關閉之前
表單：
* focus 焦點
* blur 失去焦點
* submit 提交事件
* change 改變（如下拉框選擇事件）
其它：
* scroll 滾動事件(常用延遲加載、瀑布流技術)
window.οnscrοll=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.οncοntextmenu=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 οnclick="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 οnclick="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.οncοntextmenu=function(ent){...}
* mouseover 放上(移入)
* mouseout 離開（移出）
mousedown 按下
mouseup 擡起
* mousemove 移動
鍵盤：
keypress 鍵盤事件
keydown 按下
文檔：(主要使用在body標籤中)
* load 加載
unload 關閉(爲了兼容可使用下面函數)
beforeunload 關閉之前
表單：
* focus 焦點
* blur 失去焦點
* submit 提交事件
* change 改變（如下拉框選擇事件）
其它：
* scroll 滾動事件(常用延遲加載、瀑布流技術)
window.οnscrοll=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.οncοntextmenu=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 οnclick="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");
