JS入門到進階知識總結

一. 初始JavaScript

1.概念

JavaScript 是世界上最流行的語言之一，是一種運作在用戶端的腳本語言

運作在用戶端浏覽器中的。每一個浏覽器都有JavaScript的解析引擎
腳本語言：不需要編譯，直接就可以被浏覽器解析執行了

功能：

可以來增強使用者和html頁面的互動過程，可以來控制html元素，讓頁面有一些動态的效果，增強使用者的體驗。

2.JS的組成

3. 與html結合方式

1.行内式

<input type="button" value="點我試試" οnclick="alert('Hello World')"

注:

可以将單行或少量 JS 代碼寫在HTML标簽的事件屬性中（以 on 開頭的屬性），如：onclick
注意單雙引号的使用：在HTML中我們推薦使用雙引号, JS 中我們推薦使用單引号
可讀性差，在html中編寫JS大量代碼時，不友善閱讀；
引号易錯，引号多層嵌套比對時，非常容易弄混；
特殊情況下使用

2.内嵌 JS

<script>
alert('Hello World~!');

注:

可以将多行JS代碼寫到 <’‘script’’> 标簽中
内嵌 JS 是學習時常用的方式

3.外部 JS檔案

<script src="my.js"></script>

利于HTML頁面代碼結構化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也友善檔案級别的複用
引用外部 JS檔案的 script 标簽中間不可以寫代碼
适合于JS 代碼量比較大的情況

3.JS注釋

單行注釋

// 用來注釋單行文字（ 快捷鍵 ctrl + / ）

多行注釋

/*
擷取使用者年齡和姓名
并通過提示框顯示出來
*/

4.JS的輸入輸出語句

注:

console.dir()可以輸出對象的屬性.

二. JS基礎文法

1. 變量

變量：一小塊存儲資料的記憶體空間

Java語言是強類型語言，而JavaScript是弱類型語言。

強類型：在開辟變量存儲空間時，定義了空間将來存儲的資料的資料類型。隻能存儲固定類型的資料

弱類型：在開辟變量存儲空間時，不定義空間将來的存儲資料類型，可以存放任意類型的資料。

文法：

注:

typeof運算符：擷取變量的類型。
null運算後得到的是object

2.資料類型

JS 把資料類型分為兩類：

簡單資料類型（Number,String,Boolean,Undefined,Null）
複雜資料類型（object)

1.數字型 Number

數字型三個特殊值

Infinity ，代表無窮大，大于任何數值

-Infinity ，代表無窮小，小于任何數值

NaN ，Not a number，代表一個非數值

注:

isNaN()方法用來判斷一個變量是否為非數字的類型，傳回 true 或者 false

2.字元串型 String

字元串型可以是引号中的任意文本，其文法為雙引号 “” 和單引号’’

var strMsg = "我愛北京天安門~"; // 使用雙引号表示字元串
var strMsg2 = '我愛吃豬腳~'; // 使用單引号表示字元串
// 常見錯誤
var strMsg3 = 我愛大肘子;

注:

因為 HTML 标簽裡面的屬性使用的是雙引号，JS 這裡我們更推薦使用單引号。
JS 可以用單引号嵌套雙引号，或者用雙引号嵌套單引号 (外雙内單，外單内雙)
通過字元串的 length 屬性可以擷取整個字元串的長度。
多個字元串之間可以使用 + 進行拼接，其拼接方式為字元串 + 任何類型 = 拼接之後的新字元串

3.布爾型 Boolean

布爾類型有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯）。
布爾型和數字型相加的時候， true 的值為 1 ，false 的值為 0。

console.log(true + 1); // 2
console.log(false + 1);

4.Undefined 和 Null

一個聲明後沒有被指派的變量會有一個預設值 undefined ( 如果進行相連或者相加時，注意結果）

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable);

一個聲明變量給 null 值，裡面存的值為空（學習對象時，我們繼續研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari);

5.資料類型轉換

toString() 和 String() 使用方式不一樣。
三種轉換方式，我們更喜歡用第三種加号拼接字元串轉換方式，這一種方式也稱之為隐式轉換。

轉換為數字型

3. 運算符

一進制運算符：隻有一個運算數的運算符

++，-- ， +(正号)

++ --: 自增(自減)

++(–) 在前，先自增(自減)，再運算

++(–) 在後，先運算，再自增(自減)

+(-)：正負号

注意：在JS中，如果運算數不是運算符所要求的類型，那麼js引擎會自動的

算數運算符

+ - * / % ...

指派運算符

= += -+…

比較運算符

< >= <= == ===(全等于)

比較方式

類型相同：直接比較

字元串：按照字典順序比較。按位逐一比較，直到得出大小為止。

類型不同：先進行類型轉換，再比較

===：全等于。在比較之前，先判斷類型，如果類型不一樣，則直接傳回false

邏輯運算符

&& || !

* 其他類型轉boolean：

1. number：0或NaN為假，其他為真 2. string：除了空字元串("")，其他都是true 3. null&undefined:都是false 4. 對象：所有對象都為true

三元運算符

? : 表達式

var a = 3;

var b = 4;

var c = a > b ? 1:0;

文法：

表達式? 值1:值2;

判斷表達式的值，如果是true則取值1，如果是false則取值2；

4. 流程控制語句：

f…else…

switch:

在java中，switch語句可以接受的資料類型： byte int shor char,枚舉(1.5) ,String(1.7)

switch(變量):

case 值:

在JS中,switch語句可以接受任意的原始資料類型

while

do…while

for

5. JS特殊文法：

1. 語句以;結尾，如果一行隻有一條語句則 ;可以省略 (不建議) 2. 變量的定義使用var關鍵字，也可以不使用用：定義的變量是局部變量不用：定義的變量是全局變量(不建議)

三.基本對象

1.數組

數組是指一組資料的集合，其中的每個資料被稱作元素，在數組中可以存放任意類型的元素。數組是一種将一組資料存儲在單個變量名下的優雅方式

1.建立數組

利用 new 建立數組

var 數組名 = new Array() ；
var arr = new Array(); // 建立一個新的空數組

利用數組字面量建立數組

//1. 使用數組字面量方式建立空的數組
var 數組名 = []；
//2. 使用數組字面量方式建立帶初始值的數組
var 數組名 = ['小白','小黑','大黃','瑞奇']

注:

聲明數組并指派稱為數組的初始化
這種字面量方式也是我們以後最多使用的方式

2.周遊數組

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
  console.log(arrStus[i]);
}

注意:

使用“數組名.length”可以通路數組元素的數量（數組長度）。
當我們數組裡面的元素個數發生了變化，這個 length 屬性跟着一起變化。

2.函數對象

函數：就是封裝了一段可被重複調用執行的代碼塊。通過此代碼塊可以實作大量代碼的重複使用。

1.函數的使用

函數在使用時分為兩步：聲明函數和調用函數。

聲明函數

// 聲明函數
function 函數名() {
//函數體代碼
}

調用函數

函數名();

注意：聲明函數本身并不會執行代碼，隻有調用函數時才會執行函數體代碼。

2.函數的傳回值

return 語句的文法格式如下：

// 聲明函數
function 函數名（）{
...
return 需要傳回的值；
}
// 調用函數
函數名(); // 此時調用函數就可以得到函數體内return 後面的值

注意:

在使用 return 語句時，函數會停止執行，并傳回指定的值
如果函數沒有 return ，傳回的值是 undefined

break ,continue ,return 的差別

break ：結束目前的循環體（如 for、while）

continue ：跳出本次循環，繼續執行下次循環（如for、while）

return ：不僅可以退出循環，還能夠傳回 return 語句中的值，同時還可以結束目前的函數體内的代碼

3.arguments的使用

JS中所有函數都内置了一個 arguments 對象，arguments 對象中存儲了傳遞的所有實參。

arguments展示形式是一個僞數組，是以可以進行周遊。僞數組具有以下特點：

具有 length 屬性
按索引方式儲存資料
不具有數組的 push , pop 等方法

4. 函數的兩種聲明方式

自定義函數方式

利用函數關鍵字 function 自定義函數方式。

// 聲明定義方式
function fn() {...}
// 調用
fn();

注:

因為有名字，是以也被稱為命名函數
調用函數的代碼既可以放到聲明函數的前面，也可以放在聲明函數的後面

函數表達式方式(匿名函數）

// 這是函數表達式寫法，匿名函數後面跟分号結束
var fn = function(){...}；
// 調用的方式，函數調用必須寫到函數體下面
fn();

注:

因為函數沒有名字，是以也被稱為匿名函數
這個fn 裡面存儲的是一個函數

3.自定義對象

在 JavaScript 中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如字元串、數值、數組、函數等。

對象是由屬性和方法組成的。

屬性：事物的特征，在對象中用屬性來表示（常用名詞）
方法：事物的行為，在對象中用方法來表示（常用動詞）

1.建立對象的三種方式

在 JavaScript 中，現階段我們可以采用三種方式建立對象（object）：

利用字面量建立對象

利用 new Object 建立對象

利用構造函數建立對象

利用字面量建立對象

對象字面量：就是花括号 { } 裡面包含了表達這個具體事物（對象）的屬性和方法。

{ } 裡面采取鍵值對的形式表示

var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};

利用new Object建立對象

var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}

利用構造函數建立對象

在 js 中，使用構造函數要時要注意以下兩點：

構造函數用于建立某一類對象，其首字母要大寫

構造函數要和 new 一起使用才有意義

function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫：' + this.name + '，年齡：' + this.age + '，性别：' + this.sex);
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

注意:

構造函數約定首字母大寫。

函數内的屬性和方法前面需要添加 this ，表示目前對象的屬性和方法。

構造函數中不需要 return 傳回結果。

當我們建立對象的時候，必須用 new 來調用構造函數。

2.周遊對象屬性

for…in 語句用于對數組或者對象的屬性進行循環操作。

其文法如下：

for (變量 in 對象名字) {
// 在此執行代碼
}

舉例:

for (var k in obj) {
console.log(k); // 這裡的 k 是屬性名
console.log(obj[k]); // 這裡的 obj[k] 是屬性值
}

4.JS内置對象

JavaScript 中的對象分為3種：自定義對象、内置對象、浏覽器對象

前面兩種對象是JS 基礎内容，屬于 ECMAScript；第三個浏覽器對象屬于我們JS 獨有的，具體見JS API 部分

内置對象就是指 JS 語言自帶的一些對象，這些對象供開發者使用，并提供了一些常用的或是最基本而必要的功能（屬性和方法）

1.Math對象

随機數方法 random()

random() 方法可以随機傳回一個小數，其取值範圍是 [0，1)

舉例:得到一個兩數之間的随機整數，包括兩個數在内

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

2.Date對象

Date 對象和 Math 對象不一樣，他是一個構造函數，是以我們需要執行個體化後才能使用

Date()方法的使用

擷取目前時間必須執行個體化

var now = new Date();
console.log(now);

Date() 構造函數的參數

如果括号裡面有時間，就傳回參數裡面的時間。例如日期格式字元串為‘2019-5-1’,可以寫成new Date(‘2019-5-1’)或者 new Date(‘2019/5/1’)

注意:

如果Date()不寫參數，就傳回目前時間
如果Date()裡面寫參數，就傳回括号裡面輸入的時間

日期格式化

3.數組對象

1.數組對象的建立

建立數組對象的兩種方式

字面量方式
new Array()

2.添加删除數組元素的方法

3.數組排序

4.數組索引方法

5.數組轉換為字元串

其他:

4.字元串對象

1.根據字元傳回位置

2.根據位置傳回字元（重點）

3.字元串操作方法（重點）

其他:

replace() 方法用于在字元串中用一些字元替換另一些字元。

其使用格式如下：

replace(被替換的字元串， 要替換為的字元串)；

split()方法

split()方法用于切分字元串，它可以将字元串切分為數組。在切分完畢之後，傳回的是一個新數組。

var str = 'a,b,c,d';
console.log(str.split(',')); // 傳回的是一個數組 [a, b, c, d]

toUpperCase() //轉換大寫
toLowerCase() //轉換小寫

四.DOM

文檔對象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴充标記語言（HTML或者XML）的标準程式設計接口。

W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的内容、結構和樣式。

DOM樹

注:

文檔：一個頁面就是一個文檔，DOM 中使用 document 表示
元素：頁面中的所有标簽都是元素，DOM 中使用 element 表示
節點：網頁中的所有内容都是節點（标簽、屬性、文本、注釋等），DOM 中使用 node 表示

1.擷取元素

①.根據ID擷取

使用 getElementById() 方法可以擷取帶有 ID 的元素對象。

document.getElementById('id')

②根據标簽名擷取

使用 getElementsByTagName() 方法可以傳回帶有指定标簽名的對象的集合。

document.getElementsByTagName('标簽名');

注:還可以擷取某個元素(父元素)内部所有指定标簽名的子元素.

element.getElementsByTagName('标簽名');

③通過 HTML5 新增的方法擷取

1. document.getElementsByClassName(‘類名’)；// 根據類名傳回元素對象集合
2. document.querySelector('選擇器'); // 根據指定選擇器傳回第一個元素對象
3. document.querySelectorAll('選擇器'); // 根據指定選擇器傳回

注意：

querySelector 和 querySelectorAll裡面的選擇器需要加符号,比如:document.querySelector(’#nav’);

④擷取特殊元素（body，html）

1. doucumnet.body // 傳回body元素對象
2. document.documentElement // 傳回html元素對象

2.事件基礎

事件三要素

事件源（誰）

事件類型（什麼事件）

事件處理程式（做啥）

執行事件的步驟

擷取事件源

注冊事件（綁定事件）

添加事件處理程式（采取函數指派形式）

常見的滑鼠事件

4.操作元素

DOM 操作可以改變網頁内容、結構和樣式，我們可以利用 DOM 操作元素來改變元素裡面的内容、屬性等

1.改變元素内容

element.innerText()//從起始位置到終止位置的内容, 但它去除 html 标簽， 同時空格和換行也會去掉
element.innerHTML()//起始位置到終止位置的全部内容，包括 html 标簽，同時保留白格和換行

2.常用元素的屬性操作

1. innerText、innerHTML 改變元素内容
2. src、href
3.

3.表單元素的屬性操作

type、value、checked、selected、disabled

4.樣式屬性操作

我們可以通過 JS 修改元素的大小、顔色、位置等樣式。

1. element.style 行内樣式操作
2. element.className 類名樣式操作

注意:

1.JS 裡面的樣式采取駝峰命名法比如 fontSize、 backgroundColor

2.JS 修改 style 樣式操作，産生的是行内樣式，CSS 權重比較高

操作元素總結

5.自定義屬性的操作

擷取屬性值

element.屬性擷取屬性值。
element.getAttribute(‘屬性’);

差別：

element.屬性擷取内置屬性值（元素本身自帶的屬性）
element.getAttribute(‘屬性’); 主要獲得自定義的屬性（标準）我們程式員自定義的屬性

設定屬性值

element.屬性 = ‘值’ 設定内置屬性值。
element.setAttribute(‘屬性’, ‘值’);

差別：

element.屬性設定内置屬性值
element.setAttribute(‘屬性’); 主要設定自定義的屬性（标準）

移除屬性

element.removeAttribute(‘屬性’);

5.節點操作

網頁中的所有内容都是節點（标簽、屬性、文本、注釋等），在DOM 中，節點使用 node 來表示

HTML DOM 樹中的所有節點均可通過 JavaScript 進行通路，所有 HTML 元素（節點）均可被修改，也可以建立或删除。

1.概述

一般地，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性。

元素節點 nodeType 為 1
屬性節點 nodeType 為 2
文本節點 nodeType 為 3 （文本節點包含文字、空格、換行等）

注:我們在實際開發中，節點操作主要操作的是元素節點

2.節點層級

利用 DOM 樹可以把節點劃分為不同的層級關系，常見的是父子兄層級關系。

父級節點

node.parentNode

注:

parentNode 屬性可傳回某節點的父節點，注意是最近的一個父節點
如果指定的節點沒有父節點則傳回 null

子節點

(1) parentNode.childNodes （标準）

parentNode.childNodes 傳回包含指定節點的子節點的集合，該集合為即時更新的集合。

注意：傳回值裡面包含了所有的子節點，包括元素節點，文本節點等。

如果隻想要獲得裡面的元素節點，則需要專門處理。是以我們一般不提倡使用childNodes

var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
  if (ul.childNodes[i].nodeType == 1) {
    // ul.childNodes[i] 是元素節點
    console.log(ul.childNodes[i]);
  }
}

(2) parentNode.children （非标準）

parentNode.children 是一個隻讀屬性，傳回所有的子元素節點。它隻傳回子元素節點，其餘節點不傳回。

雖然children 是一個非标準，但是得到了各個浏覽器的支援，是以我們可以放心使用

(3) parentNode.firstChild
firstChild 傳回第一個子節點，找不到則傳回null。同樣，也是包含所有的節點。
(4) parentNode.lastChild
lastChild 傳回最後一個子節點，找不到則傳回null。同樣，也是包含所有的節點。
(5) parentNode.firstElementChild
firstElementChild 傳回第一個子元素節點，找不到則傳回null。
(6) parentNode.lastElementChild
lastElementChild 傳回最後一個子元素節點，找不到則傳回null。

兄弟節點

(1)node.nextElementSibling
nextElementSibling 傳回目前元素下一個兄弟元素節點，找不到則傳回null。
(2) node.previousElementSibling
previousElementSibling 傳回目前元素上一個兄弟節點，找不到則傳回null。

注:實際開發中使用的很少,了解即可

建立節點

document.createElement('tagName')

document.createElement() 方法建立由 tagName 指定的 HTML 元素。因為這些元素原先不存在，是根據我們的需求動态生成的，是以我們也稱為動态建立元素節點。

添加節點

node.appendChild(child)//将一個節點添加到指定父節點的子節點清單末尾。類似于 CSS 裡面的after 僞元素。
node.insertBefore(child, 指定元素)//将一個節點添加到父節點的指定子節點前面。類似于 CSS 裡面的 before

删除,複制節點

node.removeChild(child)//從 DOM 中删除一個子節點，傳回删除的節點
node.cloneNode()//傳回調用該方法的節點的一個副
   1. 如果括号參數為空或者為 false ，則是淺拷貝，即隻克隆複制節點本身，不克隆裡面的子節點。
   2. 如果括号參數為 true

五.事件進階

1.注冊事件（綁定事件）

注冊事件有兩種方式：傳統方式和方法監聽注冊方式

傳統注冊方式

利用 on 開頭的事件 onclick

<button onclick=“alert('hi~')”></button>
btn.onclick = function() {}

特點：注冊事件的唯一性

同一個元素同一個事件隻能設定一個處理函數，最後注冊的處理函數将會覆寫前面注冊的處理函數

addEventListener 事件監聽方式

.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的監聽器注冊到eventTarget（目标對象）上，當該對象觸發指定的事件時，就會執行事件處理函數。

該方法接收三個參數：

type：事件類型字元串，比如 click 、mouseover ，注意這裡不要帶 on
listener：事件處理函數，事件發生時，會調用該監聽函數
useCapture：可選參數，是一個布爾值，預設是 false。學完 DOM 事件流後，我們再進一步學習

attachEvent 事件監聽方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定監聽器注冊到eventTarget(目标對象)上，當該對象觸發指定的事件時，指定的回調函數就會被執行。

這個知道就行,現在幾乎不用.

2. 删除事件（解綁事件）

傳統注冊方式

eventTarget.onclick = null;

方法監聽注冊方式

① eventTarget.removeEventListener(type, listener[, useCapture]);
② eventTarget.detachEvent(eventNameWithOn, callback);

3.DOM事件流

事件流描述的是從頁面中接收事件的順序。

事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即 DOM 事件流。

比如我們給一個div 注冊了點選事件：

DOM 事件流分為3個階段：

捕獲階段
目前目标階段
冒泡階段

事件冒泡： IE 最早提出，事件開始時由最具體的元素接收，然後逐級向上傳播到到 DOM 最頂層節點的過程。
事件捕獲：網景最早提出，由 DOM 最頂層節點開始，然後逐級向下傳播到到最具體的元素接收的過程。

注意

1. JS 代碼中隻能執行捕獲或者冒泡其中的一個階段。
2. onclick 和 attachEvent 隻能得到冒泡階段。
3. addEventListener(type, listener[, useCapture])第三個參數如果是 true，表示在事件捕
獲階段調用事件處理程式；如果是 false（不寫預設就是false），表示在事件冒泡階段調用事件處理
程式。
4. 實際開發中我們很少使用事件捕獲，我們更關注事件冒泡。
5. 有些事件是沒有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
6.

4.事件對象

官方解釋：event 對象代表事件的狀态，比如鍵盤按鍵的狀态、滑鼠的位置、滑鼠按鈕的狀态。

簡單了解：事件發生後，跟事件相關的一系列資訊資料的集合都放到這個對象裡面，這個對象就是事件對象event，它有很多屬性和方法。

比如：

誰綁定了這個事件。
滑鼠觸發事件的話，會得到滑鼠的相關資訊，如滑鼠位置。
鍵盤觸發事件的話，會得到鍵盤的相關資訊，如按了哪個鍵。

事件對象的使用文法

.onclick = function(event) {
// 這個 event 就是事件對象，我們還喜歡的寫成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 這個 event 就是事件對象，我們還喜歡的寫成 e 或者 evt
}）

這個 event 是個形參，系統幫我們設定為事件對象，不需要傳遞實參過去。

e.target 和 this 的差別：

this 是事件綁定的元素，這個函數的調用者（綁定這個事件的元素） e.target 是事件觸發的元素。

事件對象的常見屬性和方法

5.阻止事件冒泡

事件冒泡：開始時由最具體的元素接收，然後逐級向上傳播到到 DOM 最頂層節點。

事件冒泡本身的特性，會帶來的壞處，也會帶來的好處

阻止事件冒泡的裡昂中方式

标準寫法：利用事件對象裡面的 stopPropagation()方法

e.stopPropagation()

非标準寫法：IE 6-8 利用事件對象 cancelBubble 屬性

e.cancelBubble = true;

6.事件委托（代理、委派）

7.常用的滑鼠事件

禁止滑鼠右鍵菜單

contextmenu主要控制應該何時顯示上下文菜單，主要用于程式員取消預設的上下文菜單

document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})

禁止滑鼠選中（selectstart 開始選中）

document.addEventListener('selectstart', function(e) {
e.preventDefault();
})

滑鼠事件對象

event對象代表事件的狀态，跟事件相關的一系列資訊的集合。現階段我們主要是用滑鼠事件對象MouseEvent 和鍵盤事件對象 KeyboardEvent。

8.常用的鍵盤事件

事件除了使用滑鼠觸發，還可以使用鍵盤觸發.

注意： onkeypress 和前面2個的差別是，它不識别功能鍵，比如左右箭頭，shift 等。鍵盤事件對象

注意: onkeydown 和 onkeyup不區分字母大小寫,onkeypress 區分字母大小寫。

六.BOM對象

BOM（Browser Object Model）即浏覽器對象模型，它提供了獨立于内容而與浏覽器視窗進行互動的對象，其核心

對象是 window。

BOM 由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性。

DOM和BOM比較

1.BOM的構成

BOM 比 DOM 更大，它包含 DOM。

window 對象是浏覽器的頂級對象，它具有雙重角色。

它是 JS 通路浏覽器視窗的一個接口。
它是一個全局對象。定義在全局作用域中的變量、函數都會變成 window 對象的屬性和方法。

在調用的時候可以省略 window，前面學習的對話框都屬于 window 對象方法，如 alert()、prompt() 等。

2.window 對象的常見事件

1.視窗加載事件

window.onload 是視窗 (頁面）加載事件,當文檔内容完全加載完成會觸發該事件(包括圖像、腳本檔案、CSS

檔案等), 就調用的處理函數。

.onload = function(){}
或者
window.addEventListener("load",function(){});

注意:

有了 window.onload 就可以把 JS 代碼寫到頁面元素的上方，因為 onload 是等頁面内容全部加載完畢，再去執行處理函數。

window.onload 傳統注冊事件方式隻能寫一次，如果有多個，會以最後一個 window.onload 為準。

如果使用 addEventListener 則沒有限制

補充:

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖檔，flash等等。

2.調整視窗大小事件

window.onresize 是調整視窗大小加載事件, 當觸發時就調用的處理函數。

window.onresize = function(){}
window.addEventListener("resize",function(){});

注意：

隻要視窗大小發生像素變化，就會觸發這個事件。
我們經常利用這個事件完成響應式布局。 window.innerWidth 目前螢幕的寬度

3.兩種定時器

window 對象給我們提供了 2 個非常好用的方法-定時器。

setTimeout()
setInterval()

1.setTimeout()方法

window.setTimeout(調用函數, [延遲的毫秒數]);

setTimeout() 方法用于設定一個定時器，該定時器在定時器到期後執行調用函數。

注意：

window 可以省略。

這個調用函數可以直接寫函數，或者寫函數名或者采取字元串‘函數名()'三種形式。第三種不推薦

延遲的毫秒數省略預設是 0，如果寫，必須是毫秒。

因為定時器可能有很多，是以我們經常給定時器指派一個辨別符。

window.setTimeout(調用函數, [延遲的毫秒數]);
window.clearTimeout(timeoutID)//取消了先前通過調用 setTimeout() 建立的定時器。

setTimeout() 這個調用函數我們也稱為回調函數 callback

普通函數是按照代碼順序直接調用。而這個函數，需要等待時間，時間到了才去調用這個函數，是以稱為回調函數。

簡單了解：回調，就是回頭調用的意思。上一件事幹完，再回頭再調用這個函數。

我們學習過的 element.onclick = function(){} 或element.addEventListener(“click”, fn); 裡面的函數也是回調函數。

2.setInterval() 定時器

window.setInterval(回調函數, [間隔的毫秒數]);
window.clearInterval(intervalID);//停止 setInterval() 定時器

setInterval() 方法重複調用一個函數，每隔這個時間，就去調用一次回調函數。

注意：

window 可以省略。
這個調用函數可以直接寫函數，或者寫函數名或者采取字元串 ‘函數名()’ 三種形式。
間隔的毫秒數省略預設是 0，如果寫，必須是毫秒，表示每隔多少毫秒就自動調用這個函數。
因為定時器可能有很多，是以我們經常給定時器指派一個辨別符。
第一次執行也是間隔毫秒數之後執行，之後每隔毫秒數就執行一次。

補充:關于this

全局作用域或者普通函數中this指向全局對象window（注意定時器裡面的this指向window）

方法調用中誰調用this指向誰

3.構造函數中this指向構造函數的執行個體

4.JS執行隊列

…此處省略

5.location 對象

window 對象給我們提供了一個 location 屬性用于擷取或設定窗體的 URL，并且可以用于解析 URL 。因為這個屬性傳回的是一個對象，是以我們将這個屬性也稱為 location 對象。

1.URL

統一資源定位符 (Uniform Resource Locator, URL) 是網際網路上标準資源的位址。網際網路上的每個檔案都有一個唯一的 URL，它包含的資訊指出檔案的位置以及浏覽器應該怎麼處理它。

URL 的一般文法格式為：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

2.location 對象的屬性

重點記住： href 和 search

3.location 對象的方法

6.history 對象

window 對象給我們提供了一個 history 對象，與浏覽器曆史記錄進行互動。該對象包含使用者（在浏覽器視窗中）通路過的 URL。

七.PC端網頁特效

1. 元素偏移量 offset 系列

offset 翻譯過來就是偏移量，我們使用 offset 系列相關屬性可以動态的得到該元素的位置（偏移）、大小等。

獲得元素距離帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意：傳回的數值都不帶機關

offset 系列常用屬性：

offset 與 style 差別