什么是JavaScript棺棵？
1. JavaScript 是一種客戶端腳本語言（腳本語言是一種輕量級(jí)的編程語言）苛聘。
2. JavaScript 通常被直接嵌入 HTML 頁面敏储。
3. JavaScript 是一種解釋性語言（就是說仅叫，代碼執(zhí)行不進(jìn)行預(yù)編譯）。
特點(diǎn)：
1. 弱類型
2. 基于對(duì)象徐绑。(因?yàn)槊嫦驅(qū)ο笮枰哂蟹庋b、繼承莫辨、多態(tài)的特征)
在客戶端瀏覽器上執(zhí)行的腳本：
1. JavaScript 2. VBscript 3 applet （需要安裝JDK）
ECMAScript總稱
|
|-- JavaScript
|
|-- ActionScript
|
|-- ScriptEase
JavaScript語言中包含三個(gè)核心：ECMAScript基本語法傲茄、DOM、BOM
JavaScript是基于對(duì)象的腳本語言沮榜。
在HTML中如何使用JavaScript
===============================================
*1. 使用<script></script>標(biāo)簽：
屬性：
charset（可選）字符集設(shè)置盘榨、
defer（可選執(zhí)行順序）值：defer、
language(已廢除)、
src（可選）使用外部的js腳本文件
type(必選)類型：值：text/javascript
<script type="text/javascript">
<!--
javaScript語言
//-->
</script>
2. 在html標(biāo)簽的事件中，超級(jí)鏈接里钥平。
<button onclick="javaScript語言"></button>
<a href="javascript:alert('aa');alert('bb')">點(diǎn)擊</a>
3. 外部導(dǎo)入方式（推薦）：
<script type="text/javascript" src="my.js"></script>
JavaScript的語法：
===========================================
1.區(qū)分大小寫：變量名誓琼、函數(shù)名频伤、運(yùn)算符以及其他一切東西都是區(qū)分大小寫的乌昔。
2.他和php一樣屬于弱類型語言密幔。
3.每行結(jié)尾的分號(hào)可有可無姆另。(js中的每條語句之間的分割符可以是回車換行也可以是";"分號(hào)(推薦))
4.腳本注釋：
// 單行注釋
/* 多行注釋 */
5.括號(hào)表示代碼塊:{}
6.變量的定義：使用var關(guān)鍵字來聲明萍歉。
變量的命名規(guī)范是：字母數(shù)字侣颂，$符和下劃線構(gòu)成，但是不可以以數(shù)字開始枪孩。
變量名不可以使用關(guān)鍵字.
typeof函數(shù)獲取一個(gè)變量的類型：
* undefined - 如果變量是 Undefined 類型的
* boolean - 如果變量是 Boolean 類型的
* number - 如果變量是 Number 類型的 (整數(shù)憔晒、浮點(diǎn)數(shù))
* string - 如果變量是 String 類型的 （采用""、 ''）
* object - 如果變量是一種引用類型或 Null 類型的
如：new Array()/ new String()...
* funciton -- 函數(shù)類型
7.JavaScript的數(shù)據(jù)類型：
undefined 類型
null 類型（對(duì)象）
boolean 類型
number 類型
八進(jìn)制數(shù)和十六進(jìn)制數(shù) 012
浮點(diǎn)數(shù)
特殊的 Number 值
string 類型
var s = "hello";
document.write(s+"<br/>");
document.write(s[1]+"<br/>"); //使用下標(biāo)可以取出對(duì)應(yīng)的字符
document.write(s.length+"<br/>");//求長(zhǎng)度
object引用類型
引用類型通常叫做類（class）蔑舞，也就是說拒担，遇到引用值，所處理的就是對(duì)象攻询。
Object 對(duì)象自身用處不大从撼，不過在了解其他類之前，還是應(yīng)該了解它钧栖。
因?yàn)?ECMAScript 中的 Object 對(duì)象與 Java 中的 java.lang.Object 相似低零，
ECMAScript 中的所有對(duì)象都由這個(gè)對(duì)象繼承而來，Object 對(duì)象中的所有屬性
和方法都會(huì)出現(xiàn)在其他對(duì)象中拯杠，所以理解了 Object 對(duì)象掏婶，就可以更好地理解其他對(duì)象。
8. 類型轉(zhuǎn)換：
使用：Number（）潭陪、parseInt() 和parseFloat（） 做類型轉(zhuǎn)換
Number()強(qiáng)轉(zhuǎn)一個(gè)數(shù)值(包含整數(shù)和浮點(diǎn)數(shù))雄妥。
*parseInt()強(qiáng)轉(zhuǎn)整數(shù)，
*parseFloat（）強(qiáng)轉(zhuǎn)浮點(diǎn)數(shù)
函數(shù)isNaN()檢測(cè)參數(shù)是否不是一個(gè)數(shù)字依溯。 is not a number
ECMAScript 中可用的 3 種強(qiáng)制類型轉(zhuǎn)換如下：
Boolean(value) - 把給定的值轉(zhuǎn)換成 Boolean 型老厌；
Number(value) - 把給定的值轉(zhuǎn)換成數(shù)字（可以是整數(shù)或浮點(diǎn)數(shù)）；
String(value) - 把給定的值轉(zhuǎn)換成字符串誓沸；
JavaScript的運(yùn)算符
=====================================================================
1. 一元運(yùn)算符
* delete：用于刪除對(duì)象中屬性的 如：delete o.name; //刪除o對(duì)象中的name屬性
void： void 運(yùn)算符對(duì)任何值返回 undefined梅桩。沒有返回值的函數(shù)真正返回的都是 undefined。
* ++ --
一元加法和一元減法
2. 位運(yùn)算符
位運(yùn)算 NOT ~
位運(yùn)算 AND &
位運(yùn)算 OR |
位運(yùn)算 XOR ^ (不同為1拜隧，相同則為0)
左移運(yùn)算 <<
右移運(yùn)算 >>
3. 邏輯運(yùn)算符
邏輯 NOT ! 運(yùn)算符 非
邏輯 AND && 運(yùn)算符 與
邏輯 OR || 運(yùn)算符 或
4. 乘性運(yùn)算符：*（ 乘） /(除) %（取模）求余
5. 加性運(yùn)算符： + -
*其中+號(hào)具有兩重意思：字串連接和數(shù)值求和宿百。
就是加號(hào)”+“兩側(cè)都是數(shù)值則求和，否則做字串連接
6. 關(guān)系運(yùn)算符 > >= < <=
7. 等性運(yùn)算符 == === != !==
8. 條件運(yùn)算符 ? : (三元運(yùn)算符)
9. 賦值運(yùn)算符 = += -= *= /= %= >>= <<=
10 逗號(hào)運(yùn)算符
用逗號(hào)運(yùn)算符可以在一條語句中執(zhí)行多個(gè)運(yùn)算洪添。
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. 循環(huán)語句（迭代語句）
for：
while
do...while
*for-in 語句: 語句是嚴(yán)格的迭代語句薄啥，用于枚舉對(duì)象的屬性辕羽。
var a = [10,20,30,40,50];
//迭代的是數(shù)組的下標(biāo)。
for(i in a){
document.write(a[i]);
}
//輸出： 1020304050
4. break 和 continue 語句對(duì)循環(huán)中的代碼執(zhí)行提供了更嚴(yán)格的控制垄惧。
5. *with 語句用于設(shè)置代碼在特定對(duì)象中的作用域刁愿。
//擴(kuò)充知識(shí)：
1. 在網(wǎng)頁文檔中獲取一個(gè)節(jié)點(diǎn)對(duì)象（HTML標(biāo)簽）
document.getElementById("mid"); //獲取標(biāo)簽id屬性值為mid的節(jié)點(diǎn)對(duì)象
2. 定時(shí)相關(guān)函數(shù)：
setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 單次定時(shí)執(zhí)行指定函數(shù)
clearTimeout(iTimeoutID) -- 取消上面的單次定時(shí)
setInterval(vCode, iMilliSeconds [, sLanguage]) --無限次定時(shí)執(zhí)行指定函數(shù)
clearInterval(iIntervalID)-- 取消上面的多次定時(shí)
補(bǔ)充方法:
1、now Date():獲取當(dāng)前時(shí)間
js中單獨(dú)調(diào)用new Date()到逊，例如document.write(new Date());
顯示的結(jié)果是：Mar 31 10:10:43 UTC+0800 2012
這種格式的時(shí)間
但是用new Date() 參與計(jì)算會(huì)自動(dòng)轉(zhuǎn)換為從1970.1.1開始的毫秒數(shù)铣口。
2、getTime():
方法可返回距 1970 年 1 月 1 日之間的毫秒數(shù)觉壶。
用法:
end_date=now Date(“2019/2/27 06:44:43”)
d=now Date;
end_date=d.end Date
3脑题、math floor(x):返回小于參數(shù)x的最大整數(shù)
==================================================
JS的第一天作業(yè)
=============================================
一、理論作業(yè)：
1. 什么是JavaScript铜靶？
2. 在HTML中嵌入JavaScript的方法有幾種叔遂？
3. JavaScript的常用類型都有哪些？
4. 常用的JavaScript的類型轉(zhuǎn)換函數(shù)有那兩個(gè)争剿？
5. 我們使用哪個(gè)函數(shù)判斷是否不是一個(gè)整數(shù)掏熬？
6. JavaScript語言的運(yùn)算符都有哪些？
二秒梅、代碼題：
1. 參考課程代碼做一個(gè)簡(jiǎn)單的計(jì)算器
2. （選做）一個(gè)倒計(jì)時(shí)的按鈕（10,9,8,7,...這是是個(gè)灰色不可點(diǎn)擊的，當(dāng)為0是會(huì)換成同意字樣舌胶，并可點(diǎn)擊捆蜀。）
3. （選做） 做一個(gè)倒計(jì)時(shí)（時(shí) 分 秒）♂Ｉ可選帶暫停效果
三辆它、預(yù)習(xí)作業(yè)：
1. JavaScript的函數(shù)如何定義和調(diào)用。
2. 常用的系統(tǒng)函數(shù)都有哪些履恩。
3. 對(duì)象的應(yīng)用與聲明锰茉。
===================end===========================
=================================================
JavaScript 第二天內(nèi)容：
=================================================
一、JavaScript的函數(shù)：
--------------------------------------------------------
標(biāo)準(zhǔn)格式： function 函數(shù)名（[參數(shù)列表..]）{
函數(shù)體切心。飒筑。。
[return 返回值;]
}
JavaScript三種定義函數(shù)方法：
*第一種是使用function語句定義函數(shù)
如上面格式
第二種是使用Function()構(gòu)造函數(shù)來定義函數(shù)（不常用）
var 函數(shù)名 = new Function(“參數(shù)1”绽昏，”參數(shù)2”协屡，”參數(shù)3”……”函數(shù)體”);
如：
var 函數(shù)名 = new Function(”x”,”y”,”var z=x+y;return z;”);
*第三種是在表達(dá)式中定義函數(shù)
var 函數(shù)名 = function(參數(shù)1，參數(shù)2全谤，…){函數(shù)體};
//例如：
//定義
var add = function(a,b){
return a+b;
}
//調(diào)用函數(shù)
document.write(add(50,20));
arguments 對(duì)象
在函數(shù)代碼中肤晓，使用特殊對(duì)象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們补憾。
例如漫萄，在函數(shù) sayHi() 中，第一個(gè)參數(shù)是 message盈匾。用 arguments[0]
也可以訪問這個(gè)值腾务，即第一個(gè)參數(shù)的值（第一個(gè)參數(shù)位于位置 0，
第二個(gè)參數(shù)位于位置 1威酒，依此類推）窑睁。
關(guān)于變量和參數(shù)問題：
函數(shù)外面定義的變量是全局變量，函數(shù)內(nèi)可以直接使用葵孤。
在函數(shù)內(nèi)部沒有使用var定義的=變量則為全局變量担钮，
*在函數(shù)內(nèi)使用var關(guān)鍵字定義的變量是局部變量，即出了函數(shù)外邊無法獲取尤仍。
js函數(shù)定義的參數(shù)沒有默認(rèn)值（目前只有最新的火狐瀏覽器支持）
二箫津、系統(tǒng)中常用的內(nèi)置函數(shù)：
------------------------------------------------------
escape()
//字串編碼
unescape()
//字串反編碼
*eval()
//將參數(shù)字符串作為腳本代碼來執(zhí)行。
*isNaN()
// is not a number (不是一個(gè)數(shù)值)
*parseInt()
*parseFloat()
三宰啦、JavaScript的對(duì)象的定義和使用
-------------------------------------------------------
1.使用構(gòu)造函數(shù)創(chuàng)建內(nèi)置對(duì)象
var myObject = new Object();
myObject.name = “l(fā)ijie”;
myObject.age = 20;
myObject.say = function(){...}
2.直接創(chuàng)建自定義對(duì)象
var 對(duì)象名 = {屬性名1：屬性值苏遥，屬性名2：屬性值2，…….}
*3.使用自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象
function pen(name,color,price){
//對(duì)象的name屬性
this.name = name;
//對(duì)象的color屬性
this.color = color;
//對(duì)象的piece屬性
this.price = price;
//對(duì)象的say方法
this.say = function(){};
}
var pen = new pen(“鉛筆”,”紅色”,20);
pen.say();
--------------------------------------------------------------
測(cè)試類型:
1.typeof() //global對(duì)象的其中一個(gè)方法赡模，typeof()
2.對(duì)象.constructor; //查看當(dāng)前對(duì)象的構(gòu)造函數(shù)是誰
if(arr.constructor==Array){
alert("數(shù)組"); //數(shù)組推薦用這種方法田炭，因?yàn)閠ypeof得到是object
}
四、常用技巧函數(shù)：
---------------------------------------------------------------
1. HTML的標(biāo)簽（節(jié)點(diǎn)）操作
document.write(""); //輸出的
document.getElementById("id名")漓柑； //獲取html頁面標(biāo)簽中教硫，標(biāo)簽id屬性等于此值的對(duì)象。
如：var id = document.getElementById("hid"); //獲取id值為hid的標(biāo)簽對(duì)象
document.getElementsByTagName("標(biāo)簽名"); //獲取當(dāng)前文檔執(zhí)行的標(biāo)簽對(duì)象
html標(biāo)簽對(duì)象的操作：
標(biāo)簽對(duì)象.innerHTML="內(nèi)容"辆布；//在標(biāo)簽對(duì)象內(nèi)放置指定內(nèi)容
標(biāo)簽對(duì)象.style.css屬性名="值" //改變標(biāo)簽對(duì)象的樣式瞬矩。
示例：id.style.color="red";
注意：屬性名相當(dāng)于變量名,所以css屬性名中的減號(hào)要去掉，將后面的首字母大寫锋玲。
如：font-size（css）---> fontSize(JS屬性)
標(biāo)簽對(duì)象.value景用；
//獲取標(biāo)簽對(duì)象的value值
標(biāo)簽對(duì)象.value=”值“；//設(shè)置標(biāo)簽對(duì)象的value值
--------------------------------------------------
JS的第二天作業(yè)
--------------------------------------------------
一惭蹂、理論作業(yè)：
1. JavaScript三種定義函數(shù)方法?
2. arguments對(duì)象的理解伞插？
3. 簡(jiǎn)述JS中全局變量和局部變量的作用域？
4. 系統(tǒng)中常用的內(nèi)置函數(shù)有哪些剿干？
二蜂怎、代碼題：
1. 作業(yè)全選/全不選/反選的實(shí)例
2. 做一個(gè)文件進(jìn)度條的特效。
3. 使用自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象
4. （選做） 做一個(gè)樹形菜單的點(diǎn)擊效果
三置尔、預(yù)習(xí)作業(yè)：
1. JavaScript中常用內(nèi)置對(duì)象都有哪些杠步？
2. 如何使用Date獲取當(dāng)前時(shí)間。
3. 如何創(chuàng)建一個(gè)數(shù)組對(duì)象。
4. 如何使用對(duì)象的基本操作for..in幽歼。
===================end==========================
=================================================
JavaScript 第三天內(nèi)容：(內(nèi)置對(duì)象)
=================================================
一朵锣、for…in語句
----------------------------------------
for(var i in window){
document.write(i+”----”+window[i]);
}
這種語句可以遍歷對(duì)象中的所有屬性或數(shù)組中的所有元素。
二甸私、with語句
--------------------------------------------
如果使用with語句诚些，就可以簡(jiǎn)化對(duì)象屬性調(diào)用的層次。
document.write(‘test1’);
document.write(‘test2’);
document.write(‘test3’);
可以使用with來簡(jiǎn)化：
with(document){
write(‘test1’);
write(‘test2’);
write(‘test3’);
}
三皇型、JavaScript內(nèi)置對(duì)象
-----------------------------------------------
* Array（數(shù)組）
var a= new Array(); //創(chuàng)建一個(gè)空數(shù)組
a = new Array(10); //創(chuàng)建一個(gè)數(shù)組單元為10個(gè)的數(shù)組诬烹。
a = new Array(10,20,30);//創(chuàng)建一個(gè)指定數(shù)組單元的數(shù)組。
a=['a','b','c','d']; //快捷定義數(shù)組
常用屬性：
length--獲取長(zhǎng)度弃鸦。
常用方法：
toString() 把數(shù)組轉(zhuǎn)換為字符串绞吁，并返回結(jié)果。
sort() 對(duì)數(shù)組的元素進(jìn)行排序
join() 把數(shù)組的所有元素放入一個(gè)字符串唬格。元素通過指定的分隔符進(jìn)行分隔家破。
pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素
push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度购岗。
汰聋。。喊积。烹困。。
* Boolean 布爾值包裝類對(duì)象
方法：toSource()
返回該對(duì)象的源代碼乾吻。
toString() 把邏輯值轉(zhuǎn)換為字符串韭邓，并返回結(jié)果。
valueOf() 返回 Boolean 對(duì)象的原始值溶弟。
* Date
var dd = new Date();
getDate() 從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。
getDay() 從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)瞭郑。
getMonth() 從 Date 對(duì)象返回月份 (0 ~ 11)辜御。
getFullYear()
從 Date 對(duì)象以四位數(shù)字返回年份。
getYear() 請(qǐng)使用 getFullYear() 方法代替屈张。
getHours() 返回 Date 對(duì)象的小時(shí) (0 ~ 23)擒权。
getMinutes() 返回 Date 對(duì)象的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 對(duì)象的秒數(shù) (0 ~ 59)阁谆。
getMilliseconds()
返回 Date 對(duì)象的毫秒(0 ~ 999)碳抄。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數(shù)。
同上還有很多set方法用來設(shè)置场绿。
* Math 對(duì)象用于執(zhí)行數(shù)學(xué)任務(wù)剖效。方法是靜態(tài)的。
abs(x) 返回?cái)?shù)的絕對(duì)值。
ceil(x) 對(duì)數(shù)進(jìn)行上舍入璧尸。
floor(x) 對(duì)數(shù)進(jìn)行下舍入咒林。
random() 返回 0 ~ 1 之間的隨機(jī)數(shù)。
round(x) 把數(shù)四舍五入為最接近的整數(shù)爷光。
max(x,y) 返回 x 和 y 中的最高值垫竞。
min(x,y) 返回 x 和 y 中的最低值。
* Number
toString();
toFixed 把數(shù)字轉(zhuǎn)換為字符串蛀序，結(jié)果的小數(shù)點(diǎn)后有指定位數(shù)的數(shù)字欢瞪。
* String 子串處理對(duì)象
anchor() 創(chuàng)建 HTML 錨。
*charAt() 返回在指定位置的字符徐裸。
charCodeAt()返回在指定的位置的字符的 Unicode 編碼遣鼓。
*indexOf() 檢索字符串。
*lastIndexOf()
從后向前搜索字符串倦逐。
match() 找到一個(gè)或多個(gè)正在表達(dá)式的匹配譬正。
*replace() 替換與正則表達(dá)式匹配的子串。
search() 檢索與正則表達(dá)式相匹配的值檬姥。
slice() 提取字符串的片斷曾我，并在新的字符串中返回被提取的部分。
split() 把字符串分割為字符串?dāng)?shù)組健民。
substr() 從起始索引號(hào)提取字符串中指定數(shù)目的字符抒巢。
*substring() 提取字符串中兩個(gè)指定的索引號(hào)之間的字符。
toLocaleLowerCase()
把字符串轉(zhuǎn)換為小寫秉犹。
toLocaleUpperCase()
把字符串轉(zhuǎn)換為大寫蛉谜。
*toLowerCase()
把字符串轉(zhuǎn)換為小寫。
*toUpperCase()
把字符串轉(zhuǎn)換為大寫崇堵。
* RegExp
exec()正則匹配
test()
match()
* Global
escape(string) -- 可對(duì)字符串進(jìn)行編碼
unescape(string) -- 函數(shù)可對(duì)通過 escape() 編碼的字符串進(jìn)行解碼型诚。
encodeURI(URIstring) -- 函數(shù)可把字符串作為 URI 進(jìn)行編碼。
decodeURI(URIstring) -- 函數(shù)可對(duì) encodeURI() 函數(shù)編碼過的 URI 進(jìn)行解碼鸳劳。
*eval(string) -- 函數(shù)可計(jì)算某個(gè)字符串狰贯，并執(zhí)行其中的的 JavaScript 代碼。
getClass(javaobj) -- 函數(shù)可返回一個(gè) JavaObject 的 JavaClass赏廓。
*isNaN(x) -- 函數(shù)用于檢查其參數(shù)是否是非數(shù)字值涵紊。
Number(object) --函數(shù)把對(duì)象的值轉(zhuǎn)換為數(shù)字。
*parseFloat(string) -- 函數(shù)可解析一個(gè)字符串幔摸，并返回一個(gè)浮點(diǎn)數(shù)摸柄。
*parseInt(string, radix)
---------------------------------------------
四、 JS的第三天作業(yè)
---------------------------------------------
一既忆、理論作業(yè)：
1. JavaScript中常用內(nèi)置對(duì)象都有哪些驱负？
3. 如何創(chuàng)建一個(gè)數(shù)組對(duì)象方式有幾種嗦玖。
二、代碼題：
1. 做一個(gè)注冊(cè)的表單驗(yàn)證电媳，
2. 實(shí)時(shí)問候：如：早上好踏揣！
3. 給你一個(gè)日期"2013-06-01 12:24:36"的時(shí)間戳值。
4. 顯示中文的星期幾匾乓。
5. 做一個(gè)隨機(jī)點(diǎn)名系統(tǒng)（點(diǎn)名多次捞稿，也不會(huì)重復(fù)！）;
三拼缝、預(yù)習(xí)作業(yè)：
1. JavaScript中常用事件都有哪些娱局？
===================end==========================
=================================================
JavaScript 第四天內(nèi)容：(事件)
=================================================
事件處理
一、事件源: 任何一個(gè)HTML元素（節(jié)點(diǎn)） body, div , button p, a, h1 .......
二咧七、事件: 你的操作
鼠標(biāo):
* click 單擊
dblclick 雙擊
contextmenu (在body) 文本菜單（鼠標(biāo)右鍵使用）
要想屏蔽鼠標(biāo)右鍵使用return false
window.document.oncontextmenu=function(ent){...}
* mouseover 放上(移入)
* mouseout 離開（移出）
mousedown 按下
mouseup 抬起
* mousemove 移動(dòng)
鍵盤：
keypress 鍵盤事件
keydown 按下
文檔：(主要使用在body標(biāo)簽中)
* load 加載
unload 關(guān)閉(為了兼容可使用下面函數(shù))
beforeunload 關(guān)閉之前
表單：
* focus 焦點(diǎn)
* blur 失去焦點(diǎn)
* submit 提交事件
* change 改變（如下拉框選擇事件）
其它：
* scroll 滾動(dòng)事件(常用延遲加載衰齐、瀑布流技術(shù))
window.onscroll=function(){
document.documentElement.scrollTop;//獲取滾動(dòng)條的上距離
document.documentElement.scrollLeft;//滾動(dòng)條的左距離
}
selectd 事件
。继阻。耻涛。。
三瘟檩、事件處理程序
使用一個(gè)匿名或回調(diào)函數(shù)
有三種方法加事件
第一種：
格式： <tag on事件="事件處理程序" />
*第二種：
<script>
對(duì)象.on事件=事件處理程序
</script>
第三種：(火狐不兼容)
<script for="事件源ID" event="on事件">事件處理程序</script>
事件對(duì)象：
屬性：
1. srcElement
2. keyCode 鍵盤值
事件 event window.event
1. srcElement 代表事件源對(duì)象
2. keyCode 事件發(fā)生時(shí)的鍵盤碼 keypress , keydown keyup
3. clientX, clientY 坐標(biāo)位置
4. screenX, screenY
5. returnValue
6. cancelBubble;
//為頁面添加鼠標(biāo)右點(diǎn)擊事件
window.document.oncontextmenu=function(ent){
//兼容IE和火狐瀏覽器兼容
var event=ent || window.event;
//獲取事件坐標(biāo)位置
var x=event.clientX;
var y=event.clientY;
...
}
/*********************對(duì)象添加事件*******************/
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;
};
};
/*********************對(duì)象刪除事件*******************/
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對(duì)應(yīng)對(duì)象的高度
obj.offsetTop 指 obj 距離上方或上層控件的位置抹缕，整型，單位像素墨辛。
obj.offsetLeft 指 obj 距離左方或上層控件的位置卓研，整型，單位像素睹簇。
obj.offsetWidth 指 obj 控件自身的寬度奏赘，整型，單位像素太惠。
obj.offsetHeight 指 obj 控件自身的高度磨淌，整型，單位像素凿渊。
document.all ? 'IE' : 'others'：在IE下document.all值為1伦糯，而其他瀏覽器下的值為0；
=============================================
第四天：
作業(yè)嗽元，1. 完善注冊(cè)的表單驗(yàn)證提示，
2. 橫向的菜單特效
3. 為圖片輪換播放添加按鈕
5.（選做）滾動(dòng)圖片替換
6.（選做）鍵盤事件的處理（通過鍵盤事件移動(dòng)圖層）
預(yù)習(xí)：1.JavaScript中的其他事件：（滾動(dòng)事件喂击，鍵盤事件剂癌。。）
2.常用的BOM都有哪些翰绊？
3.HTML中的DOM都有哪些佩谷？
第五天 講解BOM
=============================================================================
一旁壮、BOM
---------------------------------------
<button onclick="window.location=''">跳轉(zhuǎn)</button>
1. window對(duì)象
常用的屬性：
*document ：對(duì) Document 對(duì)象的只讀引用
*history
：對(duì) History 對(duì)象的只讀引用。
*location：用于窗口或框架的 Location 對(duì)象
Navigator： 對(duì) Navigator 對(duì)象的只讀引用
*parent： 返回父窗口谐檀。
length: 設(shè)置或返回窗口中的框架數(shù)量抡谐。
Screen: 對(duì) Screen 對(duì)象的只讀引用
status: 設(shè)置窗口狀態(tài)欄的文本。
top: 返回最頂層的先輩窗口桐猬。
常用方法：
alert() 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框麦撵。
confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框。
prompt() 顯示可提示用戶輸入的對(duì)話框溃肪。
close() 關(guān)閉瀏覽器窗口免胃。
open() 打開一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口。
scrollTo() 把內(nèi)容滾動(dòng)到指定的坐標(biāo)惫撰。
setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式羔沙。
clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。
setInterval() 按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式厨钻。
clearInterval() 取消由 setInterval() 設(shè)置的 timeout扼雏。
2. Navigator 對(duì)象
Navigator 對(duì)象包含的屬性描述了正在使用的瀏覽器『话颍可以使用這些屬性進(jìn)行平臺(tái)專用的配置诗充。
常用屬性：
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>編譯平臺(tái)："+navigator.platform+"</li>");
write ("<li>用戶表頭："+navigator.userAgent+"</li>");
write ("</ul>");
}
3. Screen 對(duì)象包含有關(guān)客戶端顯示屏幕的信息。
常用屬性：
document.write( "屏幕寬度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );
document.write( "屏幕可用寬度："+screen.availWidth+"px<br />" );
document.write( "屏幕可用高度："+screen.availHeight+"px" );
參考了解其他屬性信息獲取方式
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁可見區(qū)域高： document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁正文全文寬： document.body.scrollWidth
網(wǎng)頁正文全文高： document.body.scrollHeight
網(wǎng)頁被卷去的高： document.body.scrollTop
網(wǎng)頁被卷去的左： document.body.scrollLeft
網(wǎng)頁正文部分上： window.screenTop
網(wǎng)頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth
4. History 對(duì)象包含用戶（在瀏覽器窗口中）訪問過的 URL棍郎。
5. Location 對(duì)象包含有關(guān)當(dāng)前 URL 的信息其障。
//獲取頁面中第二form表單中，一個(gè)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文檔的標(biāo)準(zhǔn)方法励翼。
HTML DOM 把 HTML 文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）辜荠。
DOM 被分為不同的部分：
1.Core DOM
定義了一套標(biāo)準(zhǔn)的針對(duì)任何結(jié)構(gòu)化文檔的對(duì)象
2.XML DOM
定義了一套標(biāo)準(zhǔn)的針對(duì) XML 文檔的對(duì)象
3.HTML DOM
定義了一套標(biāo)準(zhǔn)的針對(duì) HTML 文檔的對(duì)象汽抚。
節(jié)點(diǎn)：根據(jù) DOM，HTML 文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)伯病。
DOM 是這樣規(guī)定的：
>整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
>每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)
>包含在 HTML 元素中的文本是文本節(jié)點(diǎn)
>每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
>注釋屬于注釋節(jié)點(diǎn)
節(jié)點(diǎn)彼此間都存在關(guān)系造烁。
>除文檔節(jié)點(diǎn)之外的每個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)。
>大部分元素節(jié)點(diǎn)都有子節(jié)點(diǎn)午笛。
>當(dāng)節(jié)點(diǎn)分享同一個(gè)父節(jié)點(diǎn)時(shí)惭蟋，它們就是同輩（同級(jí)節(jié)點(diǎn)）。
>節(jié)點(diǎn)也可以擁有后代药磺，后代指某個(gè)節(jié)點(diǎn)的所有子節(jié)點(diǎn)告组，或者這些子節(jié)點(diǎn)的子節(jié)點(diǎn)
>節(jié)點(diǎn)也可以擁有先輩。先輩是某個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)癌佩，或者父節(jié)點(diǎn)的父節(jié)點(diǎn)
查找并訪問節(jié)點(diǎn)
你可通過若干種方法來查找您希望操作的元素：
>通過使用 getElementById() 和 getElementsByTagName() 方法
>通過使用一個(gè)元素節(jié)點(diǎn)的 parentNode木缝、firstChild 以及 lastChild childNodes屬性
節(jié)點(diǎn)信息
每個(gè)節(jié)點(diǎn)都擁有包含著關(guān)于節(jié)點(diǎn)某些信息的屬性便锨。這些屬性是：
nodeName（節(jié)點(diǎn)名稱）
nodeValue（節(jié)點(diǎn)值）
nodeType（節(jié)點(diǎn)類型）
nodeName 屬性含有某個(gè)節(jié)點(diǎn)的名稱。
元素節(jié)點(diǎn)的 nodeName 是標(biāo)簽名稱
屬性節(jié)點(diǎn)的 nodeName 是屬性名稱
文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
二我碟、HTML DOM 對(duì)象參考
----------------------------------------------------------------------
Document: 代表整個(gè) HTML 文檔放案，可被用來訪問頁面中的所有元素
常用集合屬性：forms
Anchor : 代表 <a> 元素
Area : 代表圖像映射中的 <area> 元素
Base : 代表 <base> 元素
Body : 代表 <body> 元素
Button : 代表 <button> 元素
Event : 代表某個(gè)事件的狀態(tài)
Form : 代表 <form> 元素
Frame : 代表 <frame> 元素
Frameset: 代表 <frameset> 元素
Iframe : 代表 <iframe> 元素
Image : 代表 <img> 元素
Input button : 代表 HTML 表單中的一個(gè)按鈕
Input checkbox
: 代表 HTML 表單中的復(fù)選框
Input file : 代表 HTML 表單中的文件上傳
Input hidden : 代表 HTML 表單中的隱藏域
Input password : 代表 HTML 表單中的密碼域
Input radio : 代表 HTML 表單中的單選按鈕
Input reset : 代表 HTML 表單中的重置按鈕
Input submit : 代表 HTML 表單中的確認(rèn)按鈕
Input text : 代表 HTML 表單中的文本輸入域（文本框）
Link : 代表 <link> 元素
Meta : 代表 <meta> 元素
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表單中的選擇列表
Style : 代表單獨(dú)的樣式聲明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
第七天 繼續(xù)講解DOM(重點(diǎn)講XML DOM)
====================================================================
一、HTML的DOM
---------------------------------------------------------
Object : 代表 <Object> 元素
Option : 代表 <option> 元素
Select : 代表 HTML 表單中的選擇列表
Style : 代表單獨(dú)的樣式聲明
Table : 代表 <table> 元素
TableData : 代表 <td> 元素
TableRow : 代表 <tr> 元素
Textarea : 代表 <textarea> 元素
二矫俺、XML的DOM
---------------------------------------------------------
DOM （Document Object Model） 文檔對(duì)象模型
1. document 文檔 HTML XML 文件 （標(biāo)記語言)
<body>
<div>
<!-- -->
<a href="#">wwww</a>
</div>
</body>
節(jié)點(diǎn)：
將文檔想成一個(gè)倒樹吱殉， 每一個(gè)部分（根、元素恳守、文本（內(nèi)容）考婴， 屬性， 注釋）都是一節(jié)點(diǎn)催烘。
根據(jù) DOM沥阱，HTML 文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)。
DOM 是這樣規(guī)定的：
1. 整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)(根節(jié)點(diǎn))
2. 每個(gè) HTML 標(biāo)簽是一個(gè)元素節(jié)點(diǎn)
3. 包含在 HTML 元素中的文本是文本節(jié)點(diǎn)
4. 每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
5. 注釋屬于注釋節(jié)點(diǎn)
2. 父伊群、子和同級(jí)節(jié)點(diǎn)
節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此之間都有等級(jí)關(guān)系考杉。
父、子和同級(jí)節(jié)點(diǎn)用于描述這種關(guān)系舰始。父節(jié)點(diǎn)擁有子節(jié)點(diǎn)崇棠，位于相同層級(jí)上的子節(jié)點(diǎn)稱為同級(jí)節(jié)點(diǎn)（兄弟或姐妹）。
1. 在節(jié)點(diǎn)樹中丸卷，頂端的節(jié)點(diǎn)成為根節(jié)點(diǎn)
2. 根節(jié)點(diǎn)之外的每個(gè)節(jié)點(diǎn)都有一個(gè)父節(jié)點(diǎn)
3. 節(jié)點(diǎn)可以有任何數(shù)量的子節(jié)點(diǎn)
4. 葉子是沒有子節(jié)點(diǎn)的節(jié)點(diǎn)
5. 同級(jí)節(jié)點(diǎn)是擁有相同父節(jié)點(diǎn)的節(jié)點(diǎn)
只要知道一個(gè)節(jié)點(diǎn)枕稀， 按關(guān)系找到其它節(jié)點(diǎn)
父節(jié)點(diǎn)： parentNode
子節(jié)點(diǎn)（第一個(gè)， 最后一個(gè)） childNodes firstChild lastChild
同胞（同輩）節(jié)點(diǎn) （上一個(gè)谜嫉， 下一個(gè)）nextSibling previousSibling
3萎坷。 獲取節(jié)點(diǎn)的方式：
array getElementsByTagName("節(jié)點(diǎn)名"); //獲取所對(duì)應(yīng)節(jié)點(diǎn)名（所有），返回的是數(shù)組
object getElementById("id名"); //獲取id名的唯一節(jié)點(diǎn)對(duì)象
示例：(找節(jié)點(diǎn))
document.getElementsByTagName("li"); //所有所有l(wèi)i節(jié)點(diǎn)
document.getElementById("lid"); //獲取id值為lid的唯一節(jié)點(diǎn)
document.getElementById("uid").getElementsByTagName("li");
//獲取id值為uid中所有l(wèi)i子節(jié)點(diǎn)
document.getElementsByTagName("ul")[0].getElementsByTagName("li");
//獲取第一個(gè)ul節(jié)點(diǎn)中所有l(wèi)i子節(jié)點(diǎn)
獲取到的標(biāo)記名(多個(gè))沐兰、 id（唯一）哆档、 name（多個(gè)）
4. 每個(gè)節(jié)點(diǎn)中的內(nèi)容
節(jié)點(diǎn)類型nodeType、節(jié)點(diǎn)名nodeName住闯，節(jié)點(diǎn)值nodeValue
節(jié)點(diǎn)名nodeName：
nodeName 是只讀的
元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
節(jié)點(diǎn)值nodeValue
元素節(jié)點(diǎn)的 nodeValue 是 undefined
文本節(jié)點(diǎn)的 nodeValue 是文本自身
屬性節(jié)點(diǎn)的 nodeValue 是屬性的值
nodeType（節(jié)點(diǎn)類型）
元素類型
節(jié)點(diǎn)類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
4. Object 對(duì)象 （HTML元素 轉(zhuǎn)成的對(duì)象(js對(duì)象)）
注意： 如果使用js操作HTML文檔瓜浸， 就需要選將HTML文檔結(jié)構(gòu)轉(zhuǎn)成Js對(duì)象
a. 操作屬性:
nodeName（節(jié)點(diǎn)名稱）
nodeValue（節(jié)點(diǎn)值）
nodeType（節(jié)點(diǎn)類型）
其他屬性：（針對(duì)于節(jié)點(diǎn)）
childNodes 返回節(jié)點(diǎn)到子節(jié)點(diǎn)的節(jié)點(diǎn)列表。
firstChild 返回節(jié)點(diǎn)的首個(gè)子節(jié)點(diǎn)比原。
lastChild 返回節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)插佛。
nextSibling 返回節(jié)點(diǎn)之后緊跟的同級(jí)節(jié)點(diǎn)。
previousSibling 屬性可返回某節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹層級(jí)）
parentNode 返回節(jié)點(diǎn)的父節(jié)點(diǎn)量窘。
textContent設(shè)置或返回節(jié)點(diǎn)及其后代的文本內(nèi)容雇寇。
b. 操作內(nèi)容
innerText(IE) textContent(FF) //獲取的是顯示的內(nèi)容，不包含HTML標(biāo)簽
innerHTML //獲取的是顯示的內(nèi)容，會(huì)包含HTML
outerText
outerHTML
表單
value
c. 操作樣式
aobj.style.backgroundColor="red";
aobj.style.fontSize="3cm";
className
aobj.className="test";
aobj.className+=" demo";
aobj.className="";
e. 操作節(jié)點(diǎn)：
appendChild()
向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的結(jié)尾添加新的子節(jié)點(diǎn)谢床。
cloneNode()
復(fù)制節(jié)點(diǎn)。
removeChild()
刪除（并返回）當(dāng)前節(jié)點(diǎn)的指定子節(jié)點(diǎn)厘线。
replaceChild()
用新節(jié)點(diǎn)替換一個(gè)子節(jié)點(diǎn)识腿。
hasAttributes() 判斷當(dāng)前節(jié)點(diǎn)是否擁有屬性。
hasChildNodes() 判斷當(dāng)前節(jié)點(diǎn)是否擁有子節(jié)點(diǎn)造壮。
insertBefore() 在指定的子節(jié)點(diǎn)前插入新的子節(jié)點(diǎn)渡讼。
f. 創(chuàng)建節(jié)點(diǎn)：
* createElement() 創(chuàng)建元素節(jié)點(diǎn)
createAttribute() 來創(chuàng)建屬性節(jié)點(diǎn) 可以：元素節(jié)點(diǎn).屬性名=值；
createTextNode() 來創(chuàng)建新的文本節(jié)點(diǎn) 可以：元素節(jié)點(diǎn).innerHTML=文本內(nèi)容耳璧；
有了以上三點(diǎn)的操作之前先轉(zhuǎn)成對(duì)象
轉(zhuǎn)成對(duì)象的兩種形式：
1. 標(biāo)記名(多個(gè))成箫、 id（唯一）、 name（多個(gè)）
document中的三個(gè)方法
var objs=document.getElementsByTagName("div"); //獲取多個(gè)
var objs=document.getElementById("one");
//獲取一個(gè)
var objs=document.getElementsByName("two");
==================================================================
1.Document
2.Element
3.Event
4.HTMLElement
5.Node
6.XMLHttpRequest
第九天 Ajax
===========================================================
AJAX
---------------------------------------
var xmlhttp;
1. 創(chuàng)建請(qǐng)求對(duì)象
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 設(shè)置回調(diào)函數(shù)（監(jiān)聽）
xmlhttp.onreadystatechange=函數(shù)名旨枯；
或
xmlhttp.onreadystatechange=function(){
函數(shù)體蹬昌。。攀隔。
}
3. 初始化：
xmlhttp.open("GET","gethint.php?q="+str,true); //異步以get方式發(fā)送到gethint.php
4. 發(fā)送：
xmlhttp.send();
其中：xmlhttp請(qǐng)求對(duì)象：
**屬性：
*readyState //請(qǐng)求狀態(tài)：0,1,2,3,4
*responseText//響應(yīng)內(nèi)容
responseXML //xml響應(yīng)對(duì)象
*status
//瀏覽器響應(yīng)狀態(tài)：200正常皂贩， 404 請(qǐng)求地址不存在 ,,
statusText //狀態(tài)內(nèi)容
*onreadystatechange //回調(diào)函數(shù)屬性
方法：
abort() //取消當(dāng)前響應(yīng)，關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動(dòng)昆汹。
getAllResponseHeaders() //把 HTTP 響應(yīng)頭部作為未解析的字符串返回明刷。
getResponseHeader() //返回指定的 HTTP 響應(yīng)頭部的值
*open()
//初始化 HTTP 請(qǐng)求參數(shù)
*send() //發(fā)送 HTTP 請(qǐng)求，使用傳遞給 open() 方法的參數(shù)
*setRequestHeader() //向一個(gè)打開但未發(fā)送的請(qǐng)求設(shè)置或添加一個(gè) HTTP 請(qǐng)求满粗。
模擬POST提交代碼：
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
摘抄自網(wǎng)絡(luò)筆記
