前端學習之JS - 台部落

JavaScript簡介

JavaScript概述

JavaScript簡稱JS，是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言，它是一門世界上最流行的腳本語言。

JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因爲Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名爲JavaScript。

JavaScript的標準是ECMAScript，截至2012年，所有瀏覽器都完整地支持ECMAScript5.1。2015年6月17日，ECMA國際組織發佈了ECMAScript的第六版，該版本正式成爲ECMAScript2015，但通常稱其爲ECMAScript6或者ES6。

JavaScript由三部分組成：ECMAScript，文檔對象模型，瀏覽器對象模型。

ECMAScript描述了該語言的語法和基本對象。

文檔對象模型（DOM），描述處理網頁內容的方法和接口。

瀏覽器對象模型（BOM），描述與瀏覽器進行交互的方法和接口。

JavaScript特點

JavaScript是一種屬於網絡的腳本語言，已被廣泛用於進行web應用開發。常用來爲網頁添加各式各樣的動態功能，爲用戶提供更流暢美觀的瀏覽效果。通常JavaScript是通過嵌入在HTML中來實現自身功能。

主要特點有：

JavaScript是一種解釋型腳本語言
主要用來向HTML頁面添加交互行爲
可以直接嵌入HTML頁面，但寫成獨立的js文件有利於結構和行爲的分離
跨平臺性
JavaScript同其他語言一樣，有其自身的基本數據類型、表達式和算術運算符以及程序的基本程序框架

入門

JavaScript的引入

在HTML中引入JavaScript有以下兩種方式。

通過內部標籤
外部引入

內部標籤

<script>
    // js代碼
</script>

外部引入：將js文件導入到HTML中，src中是js的路徑。

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

基本語法

JavaScript是嚴格區分大小寫的。

我們一般是在瀏覽器裏進行代碼的調試。如圖：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zJ7M7s9y-1581070780316)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578550932599.png)]

可以使用console.log()在瀏覽器的控制檯打印變量。

數據類型

變量

在JavaScript中，不管是什麼類型的變量，都是使用var來定義的。但在ES6之後建議使用let來定義變量。

var a = 123;

number

在JavaScript中不區分小數和整數，都是number。

111   // 整數111
11.23  // 浮點數 11.23
1.11e3  // 科學計數法表示
-22    // 負數
NaN    // not a number
Infinity   // 表示無限大

字符串

字符串可以用單引號包裹，也可以使用雙引號包裹。

'hello'
"javascript"

布爾值

布爾值就兩個：true和false。

邏輯運算

&&    // 短路與   兩個爲真，則結果爲真
||    // 短路或   一個爲真，則結果爲真
!     // 非   真即假，假即真

比較運算符

=    // 表示賦值
==   // 等於，類型不一樣，值一樣，則也會被判斷爲true
===  // 絕對等於，類型一樣，值一樣，結才爲true

在JavaScript中，進行判斷的時候，不要使用==，需要使用===來進行比較。

注意：

NaN === NaN，NaN與所有的數值都不相等，包括自己。
我們只能通過isNaN(NaN)來判斷這個數是否是NaN。

浮點數問題：

使用 console.log((1/3) === (1-2/3))，打印出的結果是false。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cI3GeHLi-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578552787586.png)]

這個結果與我們預期的不一樣，這是因爲浮點數在進行運算的時候，會存在精度的問題。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UlX0rdG4-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578552970162.png)]

所以要儘量避免使用浮點數進行計算。可以使用比較兩數相減的絕對值是否小於某個數來解決問題。如

Math.abs((1/3)-(1-2/3))<0.0000000001;

null和undefined

null代表空。

undefined代表未定義。

數組

在Java中數組的中的元素必須是相同類型，但是在JavaScript中數組的元素可以是不同的類型。

var array = [1,2,3,'javascript',true,null];

也可以使用 new 關鍵字來創建數組。

new Array(1,2,3,"javascript",false);

在JavaScript中一般不會報錯，如果數組下標越界則會報 undefined。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-tm4uXZY4-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578556486351.png)]

對象

使用大括號，將對象的屬性包裹。

每個屬性之間需要用逗號隔開，最後一個不需要添加逗號。

var person = {name: 'xx', age: 10, gender: 'female'};

取對象的值，使用對象名.屬性。

> person.name
< "xx"
>person.age
< 10
> person.gender
< "female"

嚴格檢查格式

在代碼的第一行加上 ‘use strict’; 就表示是嚴格檢查模式。這樣做的好處是可以預防由於JavaScript的隨意性導致的一些問題。

使用嚴格檢查模式的前提是IEDA需要設置支持ES6語法。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AsNnc4Kx-1581070780319)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578574834101.png)]

<script>
    'use strict';
    let a = 1;
</script>

局部變量建議使用let進行定義。

數據類型

字符串

1、正常的字符串一般使用單引號( ‘’ )或者雙引號( “” )包裹。

2、轉義字符則需要加上 \

\'    // 單引號
\"    // 雙引號
\n    // 換行
\t    // 製表符
\u4e2d   // Unicode字符    \uxxxx
\x41     // Ascll字符

3、多行字符串

// 使用Tab鍵上面的符號將字符串包裹起來
var str = `
hello
javascript
`

4、模板字符串

在java中，可以使用字符串拼接符進行字符串的拼接。在JavaScript中，可以使用${}進行拼接，此時需要使用Tab鍵上面的符號將字符串包裹起來。

let name = 'xx';
let age = 5;

let str = `hello,${name}`;

5、字符串長度

字符串是有長度的，可以使用字符串名.length 來得到字符串的長度。

同java，字符串是不可變的。

6、大小寫轉換

進行字符串的大小寫轉換時，需要調用方法。需要注意的是字符串本身沒改變，調用方法後返回了進行轉換後新的字符串。

string.toUpperCase()    // 轉爲大寫
string.toLowerCase()    // 轉爲小寫

7、索引

可以通過 indexOf() 方法得到某個字符的索引。

string.indexOf('x');

8、子字符串

可以通過 substring() 方法截取字符串。

string.substring(0)   // 從第一個字符截取到最後一個字符
string.substring(1,6) // 從下標爲1的字符開始，截取到下標爲6的字符，但不包含下標爲6的字符，即含頭不含尾

數組

不同於java，JavaScript中的數組可以存放任意數據類型的元素。

1、數組長度

可以通過數組名.length 獲取數組的長度。

var arr = [1,2,'abc',true];
var len = arr.length;

需要注意的是，可以給 arr.length 賦值，此時數組大小就會發生變化。如果賦的值比原本的數組長度大，那麼增加的元素爲空；如果賦的值比原本的數組長度小，那麼就會產生數組元素丟失的情況。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TnxNeqlS-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578560931732.png)]

2、數組下標索引

可以通過 indexOf() 通過元素獲取下標索引。

arr.indexOf(1)

注意：數字1和字符串’1’是不同的。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Y2WeHnYP-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578561177698.png)]

3、切片

我們可以通過 slice() 截取數組的一部分，該方法返回一個新的數組，不改變原數組。該方法類似於字符串中的substring() 方法。

arr.slice(2)      // 從下標爲2開始截取到最後一個元素
arr.slice(1,3)    // 從下標爲1開始截取到下標爲3，得到的新數組中包含下標爲1的元素，但不包含下標爲3的元素，即含頭不含尾

4、尾部操作數組 push() pop()

在數組的尾部操作數組，可以使用push()，pop()方法。

push(): 將元素壓入到尾部
pop():  彈出尾部的一個元素

5、頭部操作數組 unshift() shift()

在數組的頭部操作數組，可以使用unshift()，shift() 方法。

unshift(): 將元素壓入到頭部
shift():   彈出頭部的一個元素

6、數組排序 sort()

可以使用sort() 方法對數組進行排序。

arr.sort()

7、數組元素反轉 reverse()

可以使用reverse()方法對數組元素進行反轉。

arr.reverse()

8、數組的拼接

使用concat() 方法進行數組的拼接。該方法並沒有修改數組，只是返回一個新的數組。

arr.concat([11,22,33])

9、連接符join

在打印拼接數組的時候，可以使用特定的字符串進行連接

arr.join('-')

10、多維數組

這裏以二維數組爲例：

arr = [[2,1],['5','6'],[true,false];

對象

對象是由若干個鍵值對構成的。

var 對象名 = {
    屬性名1：屬性值,
    屬性名2：屬性值,
    屬性名3：屬性值
}

舉例：

var person = {
    name:'zhangsan',
    age:10,
    gender:'male'
}

在JavaScript中，{…}表示一個對象，鍵值對用於描述屬性 xxx : xxx，多個屬性之間用逗號隔開，最後一個屬性不用加逗號。

JavaScript中所有的鍵都是字符串，值是任意對象。

1、對象賦值

person.name = 'lisi';    // 該語句時對對象中的name屬性進行賦值操作

2、使用一個不存在的對象屬性，程序不會報錯，結果是undefined。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nSpHn2wN-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578570930206.png)]

3、動態刪減屬性

可以通過delete動態刪除對象的屬性。若刪除成功則返回true，否則返回false。

delete person.age

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9cemyUu0-1581070780321)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578571061023.png)]

4、動態添加屬性

直接給新的屬性添加值就可以完成動態添加屬性的操作。

person.score = 90

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9l7MDTMM-1581070780321)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578571210990.png)]

5、判斷屬性是否在對象中

使用 in 關鍵字判斷。返回結果爲true或false。

// 由於JavaScript中的鍵都是字符串，所以判斷的時候，需要給屬性名加上單引號或雙引號
'age' in person
'toString' in person   // person對象繼承了Object，所以person對象有toString

6、判斷一個屬性是否是這個對象自身擁有的

使用 hasOwnProperty() 進行判斷。

person.hasOwnProperty('toString')   // 結果爲false
person.hasOwnProperty('age')        // 結果爲true

流程控制

JavaScript中的流程語句的使用和java差不多。

1、if語句

var score = 80;
if (score > 60 && score <75){
    alert('及格');
}else if(num >= 75 && num >85){
    alert('良好')
}else{
    alert('優秀')
}

2、while循環需要注意的是避免死循環

var i = 1;
while(i < 50){
    i = i + 1;
    console.log(i)
}

3、do-while循環

var i = 1;
do {
    i = i + 1;
    console.log(i)
}

4、for循環

for (var i = 0; i < 100; i++) {
        console.log(i)
}

5、foreach循環

var arr = [1,2,3,4,5,6,7,8,9];

arr.forEach(function (value) {
    console.log(value)
})

6、for…in

var arr = [1,2,3,4,5,6,7,8,9];

// for(var index in array){}
for (var num in arr){      // num表示的是下標
    console.log(arr[num])
}

Map和Set

Map 和 Set是ES6的新特性。

1、Map

var map = new Map([['Tom',80],['Jack',90],['Kim',85]]);   // [鍵,值]
var name = map.get('Tom');   // 通過鍵獲取值
map.set('admin',123)         // 使用set()方法添加新的鍵值對，或者進行修改
map.delete("Jack")           // 使用delete()方法刪除鍵值對

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-sPtPaXjR-1581070780322)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578575205147.png)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ldoYnyRG-1581070780323)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578575235938.png)]

2、Set

Set是無序且不重複的集合

var set = new Set([1,2,3,5,3,2,4]);
set.add(10);           // 通過set()方法添加元素
set.delete(5);         // 通過delete()方法刪除元素，若刪除成功則返回true，否則返回false。
set.has(10);           // 通過has()方法判斷集合中是否含有該元素，返回true或false。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wAhi7YEd-1581070780324)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578575670080.png)]

iterator

iteartor是ES6的新特性。可以使用iterator來遍歷Map和Set。

通過 for…of進行遍歷， for…in得到的是下標。

for (var/let 變量名 of 數組/容器){}

1、遍歷數組

var arr = [2,3,'js',true];
    for (var x of arr){
        console.log(x)
    }

2、遍歷Map

var map = new Map([['Tom',80],['Jack',90],['Kim',85]]);
for (let x of map){
    console.log(x)
}

3、遍歷Set

var set = new Set([1,3,5,2,3,2,4]);
for (let x of set){
    console.log(x)
}

函數

函數定義

函數的定義有兩種方式。

定義方式一

function 函數名(參數列表){}

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

定義方式二

var 函數名 = function(參數列表){}

var abs = function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

function(){…} 這是一個匿名函數，可以把結果賦值給函數名，通過函數名就可以調用該函數。

方式一和方式二是等價的。

調用函數

// 函數名(參數)
abs(-100)

參數問題：JavaScript 可以傳遞任意個參數，也可以不傳遞參數。

arguments

arguments是一個JavaScript免費贈送的關鍵字，代表傳遞進來的所有參數，它是一個數組。

var abs = function(x){
    for (var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
    if (x >= 0){
        return x;
    }else {
        return -x;    }
}

雖然arguments代表所有的參數，但是存在一個問題就是我們有時候想要使用多餘的參數來進行附加操作時，就不是很方便操作。這時就需要排除掉已有的參數。

rest

在rest關鍵字出現之前，使用多餘的參數時如下：

if (arguments.length > 2){
    for (var i = 0;i < arguments.length; i++){
        //...
    }
}

rest關鍵字是ES6引入的新特性，它的作用是獲取除了已經定義的參數之外的所有參數。

function fun(x,y,...rest){
    console.log('x->'+x);
    console.log('y->'+y);
    console.log('rest->'+rest);
}

注意：rest參數只能寫在最後面，必須使用 … 標識。

變量的作用域

在JavaScript中，var定義變量是有作用域的。

1、在函數體內聲明的變量，在函數體外就不能使用。

function fun(){
    var x = 1;
    x = x + 1;
}
x = x + 2;      // 該語句會報  Uncaught ReferenceError: x is not defined

2、如果兩個函數使用了相同的變量名，只要變量的作用域是在函數內部，就不會產生衝突。

function fun(){
    var x = 1;
    x = x + 1;
}

function fun1(){
    var x = '1';
    x = x + 2;
}

3、內部函數可以訪問外部函數的成員，反之不可。

function fun(){
    var x = 1;
    function fun1(){
        var y = x +2;    // y=3，內部函數可以訪問外部函數的成員
    }
    z = y + 3;           // Uncaught ReferenceError: y is not defined
}

4、內部函數和外部函數變量重名

當內部函數和外部函數的變量重名時，如下

function fun(){
    var x = 1;
    function fun1(){
        var x = 'a';
        console.log('inner x->'+x);
    }
    console.log('outer x->'+x);
}

在JavaScript中，函數查找變量是從自身函數開始，由內向外查找。假設外部函數存在這個同名的函數變量，那麼內部函數就會屏蔽掉外部函數的變量。

5、變量作用域的提升

function fun(){
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}

這段代碼的運行結果是：x undefined。

以上結果說明了JavaScript執行引擎，會自動提升y的聲明，但是並不會提升y的賦值。這段代碼相當於以下代碼：

function fun(){
    var y;
    var x = 'x' + y;
    console.log(x);
    y = 'y';
}

這個特性是在JavaScript建立之初就存在的特性。所以在寫代碼的時候，要養成規範即所有的變量定義都放在函數的頭部，不要亂放。這樣便於代碼的維護。

6、全局函數

定義在函數外面的變量就是全局變量。

x = 1;
function fun(){
    console.log(x);
}
console.log(x);

window是一個全局對象。默認所有的全局變量，都會自動綁定到window對象下。

var x = 'xx';
alert(x);
alert(window.x);

alert() 這個函數本身也是一個 window 變量。

var x = 'x';
window.alert(x);

JavaScript實際上只有一個全局作用域，任何變量（函數也可以視爲變量），假設沒有在函數作用範圍內找到，就後向外查找，如果在全局作用域都沒有找到，則會報錯 RefrenceError。

7、規範

由於所有的全局變量都會自動綁定到window對象上。不同的js文件使用了相同的全局變量，則會產生衝突。減少衝突的辦法就是：把自己的代碼全部放到自己定義的唯一空間名字中。

// 唯一全局變量
var User = {};

// 定義全局變量
User.name = 'xx';
User.age = 3;
User.getName = function(){
    return this.name;
}

8、局部作用域

function fun(){
    for (var i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1);
}

以上的代碼存在一個問題：當出了for循環之後，i還可以使用。

解決此問題的辦法就是使用 let 關鍵字定義變量。let 關鍵字是ES6的新特性，作用是解決局部作用域衝突的問題。

function fun(){
    for (let i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1);
}

建議都是用let定義局部作用域的變量

9、常量const

在ES6之前，常量的定義方式是用全部大寫字母命名的變量就是常量。但是這樣子定義的常量的值實際上是可以修改的，但是建議不要修改。

var PI = '3.14';
console.log(PI);
PI = '123';   // 常量PI的值實際上可以修改
console.log(PI);

ES6引入了關鍵字 const來定義常量。

const PI = '3.14';
console.log(PI);
PI = '123';     // TypeError: Assignment to constant variable.

方法

1、方法的定義

把函數放在對象裏面，這樣的函數稱爲方法。對象中只有兩個東西：屬性和方法。

var person = {
    name:'xx',
    birth:1999,
    age:function(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
// 屬性
person.name
// 方法 需要帶括號
person.age()

this表示什麼？將上面的代碼拆分如下：

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var person = {
    name:'xx',
    birth:1999,
    age:getAge
}

person.age()   // 結果爲21  ok
getAge()       // 結果爲NaN

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FmvHDxY2-1581070780324)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578641472509.png)]

以上結果說明，this是無法進行指向的，它是默認指向調用它的那個對象。

2、apply 關鍵字

在JavaScript中可以控制this的指向，使用apply關鍵字。

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var person = {
    name:'xx',
    birth:1999,
    age:getAge
}

getAge.apply(person,[]);// this，指向了 person，參數爲空

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7LYOq1VX-1581070780325)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578641957374.png)]

內部對象

標準對象

typeof 123
"number"
typeof 3.14
"number"
typeof 'abc'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

JavaScript中的標準對象大致就是以上幾種類型。

Date

Date的基本使用

var now = new Date();    // 創建一個Date對象
now.getFullYear();       // 年
now.getMonth();          // 0~11 表示月份
now.getDate();           // 日
now.getDay();            // 星期幾
now.getHours();          // 小時
now.getMinutes();        // 分鐘
now.getSeconds();        // 秒
now.getTime();           // 獲取時間戳   全世界統一，從1970 1.1 00:00:00 開始的毫秒數
new Date(1578642531249)  // 將時間戳轉爲時間

日期的轉換

now = new Date(1578642531249)
now.toLocaleString()     // "2020/1/10 下午3:48:51"
now.toGMTString()        // "Fri, 10 Jan 2020 07:48:51 GMT"

JSON

1、JSON概述

JSON（ JavaScript Object Notation, JS 對象簡譜）是一種輕量級的數據交換格式。

簡潔和清晰的層次結構使得JSON 成爲理想的數據交換語言。

JSON 易於人閱讀和編寫，同於也易於機器解析和生成，並有效地提升網絡傳輸效率。

在JavaScript中，一切皆爲對象。任何JavaScript支持的類型都可以使用JSON來表示。

JSON格式：

數組使用 []
對象使用 {}
所有的鍵值對都使用 key:value

2、JSON字符串和JSON 對象的轉換

var person = {
    name:'zhangsan',
    age:3,
    gender:'male'
}
// 對象轉化爲JSON字符串
var jsonStr = JSON.stringify(person);    // "{"name":"zhangsan","age":3,"gender":"male"}"

// JSON字符串轉化爲對象   參數爲JSON字符串
var obj = JSON.parse(jsonStr);

JSON和JS對象的區別：

var obj = {name:'zhangsan',age:3,gender:'male'}
var json = '{"name":"zhangsan","age":3,"gender":"male"}'    // JSON 的鍵都是用引號包裹的

Ajax

面向對象編程

1、原型對象

在java中有類和對象，但在JavaScript中類稱爲原型對象。

原型：

var Student = {
        name:'zhangsan',
        age:3,
        gender:'male'
}

var Person = {
    name:'person',
    run:function(){
        console.log(this.name+'  run...')
    }
}
Student.__proto__ = Person;

Person.prototype.hello = function () {
    alert('Hello')
};

2、class 繼承

ES6 引入了 class 關鍵字。

定義類

class Student{
       constructor(name,age){
           this.name=name;
           this.age=age;
       }
       hello(){
           alert('hello')
       }
}

// 創建Student對象
var stu = new Student('zhangsan',3);
stu.name;
stu.hello();

繼承

class Animal{
       constructor(name){
           this.name=name;
       }

       eat(){
           alert('eat');
       }
   }

class Cat extends Animal{
    constructor(name,color){
        super(name);
        this.color = color;
    }
    show(){
        alert('miao~')
    }     
}

本質：原型對象

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vAajXMX3-1581070780325)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578649697606.png)]

操作BOM對象

JavaScript和瀏覽器的關係：JavaScript的誕生是爲了讓其能在瀏覽器中運行。

BOM：瀏覽器對象模型。

1、widow

window代表瀏覽器窗口。

window.alert('hello');
window.innerHeight      // 150
window.innerWidth       // 889
window.outerHeight      // 819
window.outerWidth       // 905

2、Navigator

Navigator，封裝了瀏覽器的消息。

navigator.appName
"Netscape"
navigator.appCodeName
"Mozilla"
navigator.appVersion
"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36"
navigator.platform
"Win32"

大多數時候，不會使用navigator對象，因爲會被人爲修改。所以不建議使用這些屬性來進行判斷和編寫代碼。

3、screen

screen代表屏幕。

screen.width    // 1920 px
screen.height   // 1080 px

4、location

location代表當前頁面的URL信息。

location.host  
location.href   
location.port
location.protocol
location.pathname

5、document

document代表當前的頁面

document.title
document.title = 'xxx'
document.location

獲取具體的文檔數節點

<dl id="al">
    <dt>subject</dt>
    <dd>Java</dd>
    <dd>C++</dd>
    <dd>Web</dd>
</dl>
<script>
    var cl = document.getElementById('al');
</script>

獲取cookie

document.cookie

劫持cookie原理

<script src = "abc.js"></script>   // 可以獲取cookie上傳到其服務器上

服務器端可以設置cookie爲 httpOnly。

6、history

history代表瀏覽器的歷史記錄。但不建議使用。

history.back()   // 後退
history.forward()  // 前進

操作DOM對象

核心：

瀏覽器網頁就是一個Dom樹形結構。

對其有以下幾種操作：

更新：更新Dom節點
遍歷：遍歷Dom節點，得到Dom節點
刪除：刪除一個Dom節點
添加：添加一個Dom節點

要對Dom節點進行操作，首先就要獲取這個Dom節點。

1、獲取Dom節點

<body class="father">
<h1 class="h1" id="h1">javascript</h1>
<p id="p1">p1</p>
<p id="p2">p2</p>
<script>
    var father = document.getElementsByClassName('father');
    var p = document.getElementsByTagName('p');
    var h = document.getElementsByClassName('h1')
    var h1 = document.getElementById('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
</script>
</body>

2、更新節點

<div id="div"></div>
<script>
    var div = document.getElementById('div');
</script>

操作文本：

div.innerText=‘hello’ 修改文本的值
div.innerHTML=‘hello’ 解析HTML文本標籤

操作CSS：

div.style.color=‘red’ 屬性使用引號包裹
div.style.fontSize=‘20px’
div.style.backgroundColor=‘green’

3、刪除節點

刪除節點的步驟：先獲取父節點，再通過父節點刪除自己。

<div id="div">
    <h1>JavaScript</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(p1)
</script>

注意：在刪除多個節點的時候，children是在時刻變化的，在刪除節點的時候需要注意。

4、插入節點

獲得了某個Dom節點後，假設這個節點是空的，可以通過innerHTML增加元素。

<div id="div">
    <h1>JavaScript</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
    p2.append(p1)
</script>

如果獲取的Dom節點已經存在了元素，就不能像上面這樣幹了。

可以創建一個新的標籤實現插入

<div>
    <h1>JavaScript</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>

<script>
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
    var p = document.createElement('p');
    p.id = 'newP';
    p.innerText = 'Hello';

    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    var myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:green}';
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

insertBefore

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js'); //已經存在的節點
    var ee = document.getElementById('ee');
    var list = document.getElementById('list');
    list.insertBefore(js,ee);

</script>

操作表單

表單的目的是提交信息。

1、獲得要提交的信息

<form action="#" method="post">
    <p>
        <span>用戶名：</span> <input type="text" id="username">
    </p>
    <p>
        <span>性別：</span>
        <input type="radio" name="gender" value="male" id="boy">男
        <input type="radio" name="gender" value="female" id="girl">女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    var value = input_text.value;   // 得到輸入框的值
    input_text.value = 'abc';

</script>

2、提交表單。使用 md5 加密密碼，進行表單優化。

<form action="#" method="post" onsubmit="return fun()">
    <p>
        <span>用戶名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密碼：</span> <input type="password" id="input-password">
    </p>
    <input type="hidden" id="mad5-password" name="password">
    <!--綁定事件 onclick 被點擊-->
    <button type="submit">提交</button>
</form>

<script>
    function fun() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5_pwd = document.getElementById('md5-password');

        md5_pwd.value = md5(pwd.value);

        return true;
    }
</script>

jQuery

jQuery是一個庫，裏面包含了大量的JavaScript函數。

1、獲取jQuery

可以進入jQuery的官網下載。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bKlxXAK0-1581070780326)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578712402613.png)]

2、jQuery的使用

使用方式一：在使用jQuery時，需要先將其導入HTML中。

<script src="lib/jquery-3-4-1.js"></script>

使用方式二：使用jQuery和CDN加速

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

使用jQuery的公式爲： $(選擇器).事件(事件函數)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">點擊</a>

<script>
    $('#test-jquery').click(function () {
        alert('hello')
    })
</script>
</body>
</html>

3、選擇器

原生的JS，選擇器少，也不好記。

// 標籤選擇器
document.getElementsByTagName()
// id選擇器
document.getElementById()
// 類選擇器
document.getElementsByClassName()

使用jQuery的話，css中的所有的選擇器它都能用。

// 標籤選擇器
$('p').click()
// id選擇器
$('#id').click()
// 類選擇器
$('.class').click()

4、事件

事件可以分爲鼠標事件、鍵盤事件以及其它事件。

鼠標事件：

獲取鼠標當前的一個座標。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        #div{
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
mouse: <span id="move"></span>
<div id="div">
    移動鼠標
</div>

<script>
    $(function () {
        $('#div').mousemove(function (e) {
            $('#move').text('x: '+e.pageX+'  y: '+e.pageY)
        })
    });
</script>
</body>
</html>

5、操作Dom

操作節點文本

<div id="div">
    <ul id="ul">
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
    </ul>
</div>

$('#ul').html();   // 獲取值
$('#ul').text();
$('#li1').text();
$('#li1').text('jquery');   // 設置值
$('#li1').html();
$('#li1').html('hello');

css的操作：

$(選擇器).css(屬性名)    // 獲取屬性值
$(選擇器).css(屬性名,屬性值)   // 設置屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        /*#div{
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }*/
        p{
            width: 200px;
            height: 100px;
            background: green;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<p>hello</p>
<script>
    $('#ul li[name=li2]').text();
</script>
</body>
</html>

$('#li1').css("color")     // 獲取值
$('#li1').css("color","red")   // 設置值

元素的顯示和隱藏：

$('#li1').show()    // 元素的顯示
$('#li1').hide()    // 元素的隱藏

: 1px solid green;
}

mouse:

移動鼠標

```

5、操作Dom

操作節點文本

<div id="div">
    <ul id="ul">
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
    </ul>
</div>

$('#ul').html();   // 獲取值
$('#ul').text();
$('#li1').text();
$('#li1').text('jquery');   // 設置值
$('#li1').html();
$('#li1').html('hello');

css的操作：

$(選擇器).css(屬性名)    // 獲取屬性值
$(選擇器).css(屬性名,屬性值)   // 設置屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        /*#div{
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }*/
        p{
            width: 200px;
            height: 100px;
            background: green;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<p>hello</p>
<script>
    $('#ul li[name=li2]').text();
</script>
</body>
</html>

$('#li1').css("color")     // 獲取值
$('#li1').css("color","red")   // 設置值

元素的顯示和隱藏：

$('#li1').show()    // 元素的顯示
$('#li1').hide()    // 元素的隱藏