一.JS 簡史

什么是DOM（文檔對象模型）？

DOM概念1

DOM概念2

JS 版本進化????????

1995年------Netscape公司與Sun公司合作開發(fā)------Netscape ?Navigator2 瀏覽器-------JS1.0版本；

? ? ? ? ? ? ?------微軟公司發(fā)布VBScript------IE3瀏覽器------同時以JScript為名發(fā)布了JS的一個版本；

面對微軟的競爭，那倆公司聯(lián)合ECMA（歐洲計算機制造商協(xié)會）對JS語言進行了標(biāo)準(zhǔn)化；

1996年------JS，ECMAScript，JScript都穩(wěn)了，Netscape和微軟在各自第三版瀏覽器中都不同程度地支持------JS1.1版本

腳本語言JS

1997年6月------Netscape ?Navigator4發(fā)布

? ? ? ? ? ?10月------IE4發(fā)布

瀏覽器戰(zhàn)爭，版本改進，DOM擴展，使JS發(fā)揮發(fā)揮空間變大，新名詞產(chǎn)生：DHTML（動態(tài)HTML）。

DHTML

不幸的是，那倆瀏覽器制造商雖然目標(biāo)一樣，但是實現(xiàn)方法完全不一樣（我們不一樣），即兩種不兼容的DOM。

瀏覽器之間的戰(zhàn)爭

DOM標(biāo)準(zhǔn)制定

DOM與API

微軟由于windows系統(tǒng)自帶IE戰(zhàn)勝Netscape公司

戰(zhàn)爭結(jié)束新起點開始

二.JS語法復(fù)習(xí)

1.準(zhǔn)備工作

解釋型和編譯型

2.JS語句

語句

3.注釋

單行注釋：//

多行注釋：/* ?*/

注意：在HTML中有一種注釋方式是<!-- ?-->,這個在JS中只適用于單行。

<!--- ? --->注釋方式

4.變量

最有效率的聲明變量方式

變量名規(guī)范

5.數(shù)據(jù)類型

1.字符串------字符串之中的特殊符號要用\\來轉(zhuǎn)義（String）；

2.數(shù)值------可以是浮點數(shù)（Number）；

3.布爾值（Boolean），

曾經(jīng)學(xué)過的數(shù)電知識好像（自動化專業(yè)學(xué)生）

4.數(shù)組（Array），

標(biāo)量及數(shù)組

關(guān)聯(lián)數(shù)組及其本質(zhì)

5.對象（Object），

屬性名和屬性值

6.操作

1.算術(shù)操作符

=------切記是賦值操作；

+------可以做加法運算，也可以?拼接 ?字符串；

+=------快捷操作，完成加法和賦值；

2.條件語句

if語句基本語法

另一種寫法

比較操作符：>,<,>=,<=,

不等于

邏輯操作符：&& ?，|| ? ?，?。?/p>

邏輯非

3.循環(huán)語句

本質(zhì)

while循環(huán)

本質(zhì)解答

do...while循環(huán)

在希望我們代碼至少執(zhí)行一次的時候用這個

for 循環(huán)

與while循環(huán)比較

7.函數(shù)

函數(shù)定義

函數(shù)用法1

函數(shù)用法2

命名習(xí)慣

變量的作用域

變量作用域隱患

8.對象

函數(shù)？方法？

實例概念

JS提供了很多預(yù)先定義的對象，這些可以拿來就用的對象稱為內(nèi)建對象。

宿主對象

三.DOM

D------document（文檔）

D

O------Object

window對象是宿主對象，document對象也是

M------Model，Map

M

節(jié)點樹------元素節(jié)點，文本節(jié)點，屬性節(jié)點

節(jié)點概念

元素節(jié)點

元素節(jié)點

文本節(jié)點

文本節(jié)點

屬性節(jié)點

屬性節(jié)點

獲取元素------DOM ?API提供三種方法，分別是通過元素ID，標(biāo)簽名字和類名字來獲取。

1.getElementById()

返回的是對象

2.getElementsByTagName()

返回數(shù)組，數(shù)組中的每一個值都是一個對象

通配符也適用

3.getElementsByClassName()

這個常用的居然是H5新增的

返回數(shù)組

可以這樣使用

階段小結(jié)

小結(jié)

獲取和設(shè)置屬性

1.getAttribute()

這是個函數(shù)，不是對象

2.setAttribute()

也是個函數(shù)

威力?。?！

四.案例研究：JS圖片庫

知識點：事件處理函數(shù)

事件處理函數(shù)

事件處理函數(shù)工作機制

遇到問題：當(dāng)把函數(shù)寫在window.onload=function（）{ }中時，由于作用域的問題，事件處理函數(shù)沒有識別到函數(shù)，會報錯；假如在 onload中綁定點擊事件，便可以識別，這都是由于JS中作用域的問題。

childNodes屬性

獲取節(jié)點所有直接子元素的方法，返回的是數(shù)組，空格也被當(dāng)做子元素返回

nodeType屬性

節(jié)點類型

nodeValue

改變文本節(jié)點的值

firstChild和lastChild

數(shù)組的屬性

小結(jié)

小結(jié)

五.最佳實踐

開頭語：什么是最佳實踐！

新概念：偽協(xié)議

偽協(xié)議

最佳實踐方案：分離JS------對象檢測

使用之前先檢測

------瀏覽器嗅探技術(shù)（不怎么樣，被淘汰）

性能考慮

1.盡量減少訪問DOM和盡量減少標(biāo)記；

2.合并和放置腳本，減少加載頁面時發(fā)送的請求數(shù)量；

3.壓縮腳本（包括修改局部變量名長度，去除沒有必要的空格和注釋）。

小結(jié)

六.案例研究：圖片庫改進版

態(tài)度雞湯

小知識1

三元操作符

DOM Core和HTML-DOM

這些并不是JS

優(yōu)化小結(jié)

實用的代碼片段

有意思

七.動態(tài)創(chuàng)建標(biāo)記

根本思維理解

createElement方法------只能創(chuàng)建元素節(jié)點

文檔碎片---新概念

appendChild方法

以上兩個方法是創(chuàng)建元素節(jié)點并把它接到DOM樹上

createTextNode------創(chuàng)建文本節(jié)點，和createElement用法一樣

insertBefore（）------在已有元素前插入一個新元素

insertBefore使用方法

實用代碼片段：insertAfter（）------在已有元素的后面插入一個元素

小技巧

AJAX

概念

技術(shù)核心

AJAX技術(shù)核心

第七章小結(jié)

看到此處，AJAX及XMLHttpReuqest對象仍然不是很明白，此時此刻我百度了下，所有BOM和DOM都是宿主對象，日后在說！

八.充實文檔的內(nèi)容

知識點

本章小結(jié)，主要是用JS和DOM技術(shù)去處理文檔

九.CSS—DOM

前面沒提到的DOM

原來是這樣

DOM只能讀取內(nèi)斂樣式的值

可貴的編程思想

小結(jié)

本章講的只要是用DOM方法去改變CSS樣式，重點是在這種方法中體會其中的編程思想。

十.用JS實現(xiàn)動畫效果

是否是JQ實現(xiàn)動畫的邏輯？

JS允許自創(chuàng)屬性

讀完本章，明白了實現(xiàn)動畫的基本思路，也知道了一點開發(fā)框架的思路。

十一.HTML5

H5的冰山一角，憑興趣去研究

文中提到在目前兼容還不是很好的情況下并不適合全部使用H5。

十二.綜合示例

把之前學(xué)習(xí)的所有的東西再綜合運用下

看來對JQ研究還不夠，竟然不知道

罪過罪過

菜死了菜死了

至此，看完了

看完此書，更明白了一些庫在實現(xiàn)一些功能背后的原理，本書屬于基礎(chǔ)書，很好。