第一章
- JavaScript起源于Netscape于微軟的瀏覽器大戰(zhàn)時(shí)期，由Netscape與Sun公司合作開(kāi)發(fā)
- DOM是一套對(duì)文檔內(nèi)容進(jìn)行抽象和概念化的方法。
- 一開(kāi)始键菱，各家瀏覽器廠商都有各自的一套DOM標(biāo)準(zhǔn)顺饮，后來(lái)由W3C結(jié)合各家優(yōu)點(diǎn)推出一套新的DOM標(biāo)準(zhǔn)，目前基本所有瀏覽器都對(duì)這套DOM標(biāo)準(zhǔn)有這很好的支持劲装。
第二章
數(shù)據(jù)類型
Js是一種弱類型語(yǔ)言胧沫，弱類型語(yǔ)言是指聲明變量的時(shí)候不需要指定變量的類型，強(qiáng)類型語(yǔ)言需要指定占业，比如C/C++就是強(qiáng)類型的绒怨。
聲明變量使用
var關(guān)鍵字。JS不用提前聲明變量谦疾，賦值語(yǔ)句會(huì)自動(dòng)聲明變量南蹂，但是不推薦這么做，最好提前聲明念恍。
在字符串中用反斜線\來(lái)轉(zhuǎn)義六剥。
主要有五種簡(jiǎn)單數(shù)據(jù)類型
String晚顷，Number，Boolean仗考，Undefined音同，Null和一種復(fù)雜數(shù)據(jù)類型Object。-
各個(gè)數(shù)據(jù)類型的存儲(chǔ)形式秃嗜。
各個(gè)數(shù)據(jù)類型的存儲(chǔ)形式 原始類型（primitive type）：存儲(chǔ)在棧（stack）中的簡(jiǎn)單數(shù)據(jù)段权均，也就是說(shuō)，它們的值直接存儲(chǔ)在變量訪問(wèn)的位置锅锨。如數(shù)字（Number）叽赊、字符串（String）、布爾（Boolen）必搞、Null必指、Undefined。
引用類型（reference type）：存儲(chǔ)在堆（heap）中的對(duì)象恕洲，也就是說(shuō)塔橡，存儲(chǔ)在變量處的值是一個(gè)指針（point），指向存儲(chǔ)對(duì)象的內(nèi)存處霜第。引用類型就是對(duì)象葛家，比如 Object，Number泌类、String癞谒，Boolen，Date刃榨、Array 等等弹砚。
數(shù)組
數(shù)組是一個(gè)變量表示一個(gè)值的集合，其中每個(gè)值都是這個(gè)數(shù)組的一個(gè)元素枢希。
-
聲明數(shù)組的方法：
var arr = Array(3); var arr = Array();//不指明數(shù)組大小 var arr = Array("one", "two", "three");//聲明的同時(shí)賦值 -
關(guān)聯(lián)數(shù)組：
var lennon = Array(); lennon["name"] = "John"; lennon["year"] = 1940;
對(duì)象
對(duì)象也是用一個(gè)值表示一組值桌吃，對(duì)象的每個(gè)值都是它的一個(gè)屬性。
JavaScript中的變量都是某種類型的對(duì)象晴玖。
-
對(duì)象使用點(diǎn)號(hào)獲取屬性和函數(shù)：
Object.propertyName; Object.functionName(); 實(shí)例是對(duì)象的具體個(gè)體读存。
-
使用new關(guān)鍵字為對(duì)象創(chuàng)建新實(shí)例：
var jeremy = new Person(); 內(nèi)建對(duì)象： JavaScript中預(yù)先定義好的對(duì)象，比如
Array,Date,Math宿主對(duì)象：由運(yùn)行環(huán)境事先定義好的對(duì)象呕屎，在web應(yīng)用里，運(yùn)行環(huán)境就是指瀏覽器敬察。包括
Form,Image,Element,document等秀睛。
操作
-
使用加號(hào)拼接字符串或變量：
var message = "hello " + "world" //hello world; var who = "world"; var message = "hello " + who; -
數(shù)值和字符串拼接,結(jié)果會(huì)是一個(gè)更長(zhǎng)的字符串：
var value = "10" + 20; //結(jié)果為"1020"
比較操作符號(hào)
- 執(zhí)行相等操作的時(shí)候，建議使用"==="代替"==",會(huì)執(zhí)行嚴(yán)格比較,會(huì)同時(shí)比較值和類型莲祸。
- 不等操作符"!="用"!=="代替蹂安，原因同上椭迎。
函數(shù)
- 變量作用域
- 全局變量：一旦聲明可以在腳步的任何位置訪問(wèn)。
- 局部變量：只能在聲明它的那個(gè)函數(shù)內(nèi)部訪問(wèn)（需要用
var關(guān)鍵字在函數(shù)內(nèi)部聲明）田盈。
第三章 DOM
DOM
DOM 中的 D: document畜号，具體到前端就是我們編寫的網(wǎng)頁(yè)文檔
DOM 中的 O: object，就是第二章中提到的對(duì)象允瞧，有用戶定義對(duì)象简软，內(nèi)建對(duì)象，宿主對(duì)象
window 對(duì)象: 對(duì)應(yīng)著瀏覽器窗口本身述暂，這個(gè)對(duì)象的屬性和方法統(tǒng)稱 BOM （瀏覽器對(duì)象模型）
-
DOM中的M: Model-模型痹升，代表某種事物的表現(xiàn)形式，DOM 把文檔表示為一顆樹(shù)的形式（數(shù)學(xué)意義上的樹(shù)畦韭，類似家譜樹(shù)）疼蛾，這里稱為“節(jié)點(diǎn)樹(shù)”：
文檔樹(shù)
節(jié)點(diǎn)
節(jié)點(diǎn)：網(wǎng)絡(luò)術(shù)語(yǔ)，表示網(wǎng)絡(luò)中的一個(gè)連接點(diǎn)艺配，在 DOM 中表示文檔樹(shù)上的樹(shù)枝和樹(shù)葉察郁。
元素節(jié)點(diǎn)：指文檔中的各種元素，如
<body>,<p>等转唉，<html>為根元素皮钠。文本節(jié)點(diǎn)：各種元素包圍著的文本內(nèi)容，比如
<p>Hello world</p>中的這個(gè)“Hello world”酝掩。-
屬性節(jié)點(diǎn)：對(duì)元素進(jìn)行描述的屬性鳞芙，比如大部分元素都有的
title屬性。三種節(jié)點(diǎn) -
獲取元素,有三種方法
-
getElementById期虾，根據(jù)給定的 ID 返回特定的元素節(jié)對(duì)象點(diǎn)原朝，是 document 對(duì)象特有的函數(shù)document.getElementById("id"); -
getElementByTagName，根據(jù)給定的標(biāo)簽名返回對(duì)象數(shù)組镶苞，每個(gè)對(duì)象對(duì)應(yīng)文檔里面有此標(biāo)簽的一個(gè)元素喳坠，可以使用通配符“*”來(lái)返回文檔里的所有元素。document.getElementByTagName("h1") -
getElementByClassName茂蚓，HTML5 加入壕鹉，跟getElementByTagName類似，返回一個(gè)對(duì)象數(shù)組聋涨，可以一次給定多個(gè)class name晾浴，以空格分隔，順序無(wú)關(guān)牍白。document.getElementByClassName("class1 class2");
-
-
對(duì)于不支持
getElementByClassName的較老的瀏覽器脊凰，可以自己實(shí)現(xiàn)一個(gè)：function getElementByClassName(node, classname) { if (node.getElementsByClassName) { //使用現(xiàn)有方法 return node.getElementsByClassName(classname) } else { var results = new Array(); var elems = node.getElementsByTagName("*"); for (var i = 0; i < elems.lenth; i++) { if (elems[i].className.indexOf(classname) != -1) { results[results.length] = elems[1i]; } } return results; } }
獲取和設(shè)置屬性
-
getAttribute函數(shù)用于獲取屬性- 只有一個(gè)參數(shù)--打算查詢的屬性名字；
- 只能通過(guò)元素節(jié)點(diǎn)對(duì)象調(diào)用茂腥；
- 如果沒(méi)查詢到對(duì)應(yīng)屬性狸涌，返回
null切省。
object.getAttribute(attribute);-
setAttribute函數(shù)用于設(shè)置屬性，也只能通過(guò)元素節(jié)點(diǎn)對(duì)象調(diào)用：
object.setAttribute(attribute, value);
事件處理函數(shù)
在特定事件發(fā)生時(shí)調(diào)用特定的 JavaScript 代碼帕胆。
-
有很多種事件處理函數(shù)朝捆，比如
onmouseover,onmouseout,onclick等。event = "JavaScript statement(s)"懒豹； -
JavaScript代碼包含在一對(duì)引號(hào)直接芙盘，這對(duì)引號(hào)之間可以放置多個(gè) JavaScript 語(yǔ)句，用“;”隔開(kāi)就行：
onclick = "showPic(this)";//this表示當(dāng)前對(duì)象 -
在事件處理函數(shù)被觸發(fā)之后歼捐，引號(hào)之間的 JavaScript 語(yǔ)句被執(zhí)行何陆，被調(diào)用的語(yǔ)句可以給這個(gè)事件處理函數(shù)返回一個(gè)值。返回
true代表這個(gè)事件被觸發(fā)了豹储，false代表沒(méi)有觸發(fā)贷盲，利用這點(diǎn)，可以攔截一些默認(rèn)事件,比如下面這個(gè)鏈接剥扣，點(diǎn)擊之后由于返回的是false,瀏覽器認(rèn)為這個(gè)事件沒(méi)有被觸發(fā)巩剖，所以不會(huì)發(fā)生跳轉(zhuǎn)。<a herf="http://www.example.com" onclik="return false;">Click me</a>
一些常用屬性
-
childNodes屬性：用于獲取任何一個(gè)元素的所有子元素钠怯，是一個(gè)包含這個(gè)元素所有子元素的數(shù)組（子元素除了元素節(jié)點(diǎn)還包括很多其他節(jié)點(diǎn)）佳魔。 -
nodeType屬性：獲取一個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)類型，節(jié)點(diǎn)類型是通過(guò)數(shù)字表示：- 1代表元素節(jié)點(diǎn)晦炊；
- 2代表屬性節(jié)點(diǎn)鞠鲜；
- 3代表文本節(jié)點(diǎn)。
-
nodeValue屬性：用于獲得一個(gè)節(jié)點(diǎn)的值,一般元素節(jié)點(diǎn)的值是null断国，文本節(jié)點(diǎn)的值是它里面的文本內(nèi)容贤姆。 -
firstChild屬性：獲得一個(gè)節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)，等同于childNodes[0]稳衬。 -
lastChild屬性：獲得一個(gè)節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)霞捡，等同于node.childNodes[node.childNodes.length-1]。
