JavaScript概述

1 基礎語法

比較運算符

=
==  //等於（類型不一樣，值同樣，也會判斷爲true）
=== //絕對等於（類型同樣，值同樣，結果才爲true）

這是一個JS的缺陷，堅持不要使用 == 比較

須知：

• NaN===NaN返回false，NaN與全部數值都不相等，包括本身
• 只能經過isNaN(NaN)來判斷這個數是不是NaN

儘可能避免使用浮點數進行運算，存在精度問題

Math.abs(1/3-(1-2/3))<0.000000001

嚴格檢查模式

全局變量 i = 1;

局部變量 var i = 1; let i = 1;（ES6建議使用let）

嚴格檢查模式

‘use strict'; 嚴格檢查模式，預防JavaScript的隨意性致使產生的一些問題

字符串

多行字符串：

`XXX

XXX`

模板字符串

`hello,${變量}`

str.length str[0] str.toUpperCase() str.toLowerCase()

str.subsring(X,Y)返回str[X,Y)

數組

var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);

取數組下標，若是越界(arr[8]),就會提示undifined

假如給數組的長度arr.length賦值，數組大小就會發生變化

indexOf：經過元素得到下標索引

slice()截取Array的一部分，相似字符串中的substring

arr.push(),arr.pop() // 尾部

arr.unshift(),shift() // 頭部

arr.sort()

arr.reverse()

arr.concat() // 不會改變原數組

arr.join('-') // 鏈接符 打印

arr.fill(X)

對象

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

var person = {
    name:"XXX",
    age:18,
    tags:['js','java','...']
}

對象賦值：person.name = "XXX"

取對象的值：person.name

使用一個不存在的對象屬性，不會報錯！undefined

動態刪除，添加對象的屬性：delete person.name person.XXX=XXX

JavaScript中全部鍵都是字符串，值是任意對象

判斷屬性值是否在這個對象中！'XXX' in XXX

判斷一個屬性是不是這個對象自身擁有的 hasOwnProperty()

流程控制

arr.forEach(function (value){  // ES5.1

    console.log(value)

})

for(var i in arr){   // i爲數組下標
}
for(var e of arr){   // e爲數組元素
}

Map和Set

ES6的新特性

var map = new Map([['tom',100],['jack',90]]);
var name = map.get('tom');
map.set('admin',123); // 新增
map.delete('XXX');
console.log(name);

var set = new Set(1,1,1,3); // 去重
set.add(x);
set.delete(x);
set.has(x);

iterater ES6新特性

函數

function abs(x){    //定義方式一
    //...
}
var abs = function(x){    //定義方式二
    //...
}

若是沒有執行return，函數執行完也會返回結果：undefined

JavaScript能夠傳任意參數，也能夠不傳參數

var abs = function(x){
    //手動拋出異常
    if(typeof x != 'number'){
        throw 'Not a Number';
    }
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

arguments參數表示函數傳入的全部參數，是一個數組

rest剩餘參數，只能寫在最後面，必須用...表示

function aaa(a,b,...rest){
    consloe("a->"+a);
    consloe("b->"+b);
    consloe("rest->"+rest);
}

全局對象 window

全部全局變量都綁定在全局對象window上的

window.x（全局變量）

windows.alert(window.x)

var old_alert = window.alert;
//old_alert(x);
window.alert = function(){
    
};
window.alert(123); //失效

//恢復
window.alert = old_alert;
window.alert(456);

全局變量→衝突

//惟一全局變量
var App = {};

//定義全局變量
App.name = 'XXX';
App.add = function (a,b) {
    return a + b;
}

把本身代碼所有放入本身定義的惟一命名空間中，下降全局命名衝突的問題（JQuery）

ES6建議使用let關鍵字去定義局部做用域的變量（解決局部做用域衝突的問題），使用const定義常量const PI = '3.14'

方法

var XXX = {
    name:'xxx',
    birth:2020,
    //方法
    age:function(){
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
XXX.name
XXX.age()

apply在js中能夠控制this指向，經過 apply() 方法，可以編寫用於不一樣對象的方法。函數.apply(對象,參數列表)this指向apply的對象

2 內部對象

標準對象

number, string, boolean, object

typeof NaN
"number"
typeof []
"object"
typeof undefined
"undefined"

2.1 Date

var now = new Date();
now.getFullYear(); // 年
now.getMonth(); //月（0-11）
now.getDate(); //日
now.getDay(); //星期幾
now.getHours(); //時
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //時間戳 1970.1.1 00:00 - ms
console.log(new Date(113224222)) //時間戳轉爲時間

//轉換爲字符串
now.toLocaleString()
now.toGMTString()

2.2 JSON

JSON(JavaScript Object Notation, JS 對象表示法) 是一種輕量級的數據交換格式。

特色：簡潔，清晰的層次結構；易於人閱讀和編寫，同時也易於機器解析和生成，有效提高網絡傳輸效率

在JavaScript中一切皆對象，任何JS支持的類型均可以用JSON來表示

格式：

• 對象：{}
• 數組：[]
• 鍵值對：key:value

JSON字符串和JS對象的轉化

var user = {
    name: "XXX",
    age: 3,
    sex: '男'
}
//對象轉化爲JSON對象
var jsonUser = JSON.stringify()

//json字符串轉化爲對象,參數爲json字符串
var obj = JSON.parse('{"name":"XXX","age":3,"sex":"男"}')

2.3 Ajax

• 原生的js寫法 xhr異步請求
• JQuery封裝好的方法 $("#name").ajax("")
• axios 請求

3 面向對象編程

原型：子類（對象）.__proto__ = 父類（原型對象）; //子類的原型是父類

隨意指向

class關鍵字是在ES6引入的

class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
class pupil extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小學生')
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello();

原型鏈：__proto__

4 操做BOM對象（重點）

BOM(Browser Object Model) 是指瀏覽器對象模型，是用於描述這種對象與對象之間層次關係的模型，瀏覽器對象模型提供了獨立於內容的、能夠與瀏覽器窗口進行互動的對象結構。

瀏覽器：

內核：IE， Chrome, Safari, FireFox

三方：QQ，360

4.1 window

window表明瀏覽器窗口

window.alert(1)
// 調整瀏覽器窗口大小
window.innerHeight
window.innerWidth
window.outerHeight
window.innerWidth

4.2 navigator

navigator封裝了瀏覽器的信息

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

通常不使用，由於會被人爲修改，不建議用這些屬性來判斷瀏覽器版本

4.3 screen

screen表明屏幕尺寸

screen.width
screen.height

4.4 location（重要）

location表明當前頁面的URL信息

host: "www.bilibili.com"
hostname: "www.bilibili.com"
href: "https://www.bilibili.com/video/BV1JJ41177di?p=19"
protocol: "https:"
reload: ƒ reload() // 刷新頁面
// 設置新的地址
location.assign('https://...')

4.5 document

document表明當前的頁面（document.），HTML DOM文檔樹

//獲取具體的文檔樹節點
<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
</dl>
<script>
    var dl = document.getElementById('app');
</script>

獲取cookie

document.cookie
"finger=158939783; _uuid=C56A5201-E5AB-30A7-6A3D-33573CFAEC4B75115infoc; buvid3=2DE4F72B-D52C-4628-B6F6-D25A79D4DFBD155818infoc; sid=jsr4r70q; im_notify_type_775959=0; LIVE_BUVID=AUTO6215819975268326; LIVE_PLAYER_TYPE=2; DedeUserID=775959; DedeUserID__ckMd5=5a93072db131a757; bili_jct=e4c30825e9523f0d624509aa21012a7e; rpdid=|(J~RllJRmlY0J'ulm)RkRm)l; blackside_state=1; CURRENT_FNVAL=80; bp_t_offset_775959=434460479141307658; Hm_lvt_8a6e55dbd2870f0f5bc9194cddf32a02=1600696828; CURRENT_QUALITY=80; bp_video_offset_775959=438421933640865406; finger=158939783; PVID=3"

劫持cookie原理

www.taobao.com

<script src="aa.js"></script>
<!-- 惡意人員：獲取你的cookie上傳到他的服務器 -->

服務器能夠設置：httpOnly（安全）

4.6 history

history表明瀏覽器的歷史記錄（不建議使用）

history.back()
history.forward()

5 操做DOM對象（重點）

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標準編程接口。它是一種與平臺和語言無關的應用程序接口(API),它能夠動態地訪問程序和腳本,更新其內容、結構和www文檔的風格(目前,HTML和XML文檔是經過說明部分定義的)。

瀏覽器網頁就是一個DOM樹形結構，要操做一個DOM節點，就必須先得到這個DOM節點

5.1 得到DOM節點

標籤選擇器：document.getElementsByTagName('h1')（返回數組）

id選擇器：documen.getElementById('id')

class選擇器：document.getElementByClassName('class')（返回數組）

得到子節點：Node.children

5.2 更新DOM節點

修改文本值：

Node.innerText = 'xxx'

Node.innerHTML = 'xxx'（超文本）

設置樣式：

Node.style.color/fontSize/... = 'xxx'（駝峯命名）

5.3 刪除DOM節點

先獲取父節點，再經過父節點刪除本身

Node.parentElement.removeChild(Node)（只能經過id選擇器選擇節點刪除）

注意：刪除節點過程當中，父節點的children是動態變化的

5.4 插入DOM節點

得到的DOM節點若爲空節點，能夠經過innerText增長元素

追加節點：Node1.append(Node2)

建立新節點：document.createElement('p')

設置節點屬性：Node = setAttribute('屬性名','屬性值')

插入節點：Node.insertBefore(newItem,existingItem);

6 操做表單（驗證）

表單的目的：提交信息

得到要提交的信息

input_text.value
boy_radio.checked //boolean

MD5加密密碼

表單綁定提交事件

onsubmit= 綁定一個提交檢測的函數，返回布爾值（return false：不提交表單）

7 jQuery

公式：$(selector).action()

$('#id').click(function(){
    //...
})
//當網頁元素加載完畢以後，響應事件
$(document).ready(function(){
    //...
})
//↑簡寫,獲取座標
$(function(){
    $('#divMove').mousemove(function(e){
        $('mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
    })
})

文檔工具站：https://jquery.cuishifeng.cn/

操做DOM：

$('#test-ul li[name=python]').css({"color","red"})
$('#test-ul li[name=python]').show()/hide()
$(window).width

LayUI 彈窗組件

ElementUI 樣式好看