JavaScript:腳本語言/高級編程語言
JS組成：ECMAScript+DOM+BOM
JS的三種書寫樣式：行內(nèi)式、內(nèi)嵌式童番、外部式
JS輸入輸出語句：
輸入語句：prompt("請輸入你的年齡")
彈出警示框：alert("計算的結(jié)果是")
控制臺：console.log("我是程序員能看到的")

變量：

聲明變量：var 變量名字钞翔；
var age = 12，myname = 'asas'，...

只聲明 不賦值纷宇，結(jié)果是 undefined未定義的

不聲明 不賦值硕舆，結(jié)果是 錯誤

不聲明 賦值秽荞，結(jié)果是這個值

數(shù)據(jù)類型：

簡單數(shù)據(jù)類型：Number,String,Boolean,Undefined,Null

Number數(shù)字型：
1.八進(jìn)制 0~7 程序里面數(shù)字前面加0 表示8進(jìn)制
2.十六進(jìn)制 0~9 a~f 如果數(shù)字的前面加0x 表示16進(jìn)制
3.數(shù)字型的最大值：console.log(Number.MAX_VALUE);
4.數(shù)字型的最小值：console.log(Number.MIN_VALUE);
5.無窮大：console.log(Number.MAX_VALUE * 2); //無窮大 Infinity
6.無窮小：console.log(-Number.MAX_VALUE * 2); //無窮小 -Infinity
7.非數(shù)字：console.log("abc" - 100); //NaN
8.isNaN():這個方法用來判斷非數(shù)字抚官，并且返回一個值扬跋，如果是數(shù)字返回false，如果不是數(shù)字返回true

String字符串型：
var str = '我是一個"程序員"撒看見撒嬌了'; //外雙內(nèi)單或者外雙內(nèi)單
\n換行 \斜杠\ '單引號 "雙引號 \t tab縮進(jìn) \b空格
字符串長度：length
字符串拼接：+

boolean布爾型: true 1 false 0
Undefined未定義數(shù)據(jù)類型：聲明未賦值
null空值

獲取變量數(shù)據(jù)類型：typeof

數(shù)據(jù)類型轉(zhuǎn)換：

把數(shù)字型轉(zhuǎn)換為字符串型：

1. 變量.toString

var num = 10
var str = num.toString()
console.log(str) //10
console.log(typeof str) //string

2.我們利用String(變量)

console.log(String(num)) //字符型10

3.利用 + 拼接字符串的方法顯示轉(zhuǎn)換效果 隱式轉(zhuǎn)換

console.log(num + '')  // 1+’2‘  12

其他類型轉(zhuǎn)換為數(shù)字型：

var age = prompt('請輸入你的年齡')
1.parseInt(變量) 可以把字符型的轉(zhuǎn)換為數(shù)字型 得到的是整數(shù)
parseInt(age)
2.parseFloat(變量) 可以把字符型的轉(zhuǎn)換為數(shù)字型 得到的是浮點數(shù)
parseFloat(age)
3.利用 Number(變量)
var str = '123'

console.log(Number(str)) // 123

4.利用算術(shù)運算 - * / 隱式轉(zhuǎn)換

console.log('12' - 0) // 12

轉(zhuǎn)換為布爾型：Boolean()函數(shù)
除了'' 0 NaN null undefined 為false凌节，其他都為true

運算符優(yōu)先級：

() > 一元運算符(++ -- !) > 算數(shù)運算符(先*/%后+-) > 關(guān)系運算符(> >= < <=) > 相等運算符(== != === !==) > 邏輯運算符(先&&后||) > 賦值運算符(=) > 逗號運算符(,)

流程控制：順序結(jié)構(gòu)钦听、分支結(jié)構(gòu)洒试、循環(huán)結(jié)構(gòu)

順序結(jié)構(gòu)：
if (條件表達(dá)式1) {
執(zhí)行語句
}else if(條件表達(dá)式2){
執(zhí)行語句
}else{
執(zhí)行語句
}

三元表達(dá)式：var result = num > 5 ? '真' : '假'

switch多分支語句；
switch (表達(dá)式) {
case value1:
執(zhí)行語句1;
break;
case value2:
執(zhí)行語句2;
break;
...
default:
執(zhí)行最后的語句;
}

循環(huán)：
for循環(huán)：
for (初始化變量; 條件表達(dá)式; 操作表達(dá)式) {
循環(huán)體
}

while(條件表達(dá)式){
循環(huán)體
}

do{
循環(huán)體
} while(條件表達(dá)式)

continue關(guān)鍵字：跳出本次循環(huán)朴上，繼續(xù)下一次循環(huán)
break關(guān)鍵字：跳出循環(huán)

數(shù)組(Array): 就是一組數(shù)據(jù)的集合 存儲在單個變量下的優(yōu)雅方式

1.利用new創(chuàng)建數(shù)組
var arr = new Array(); //創(chuàng)建一個空的數(shù)組
2.利用數(shù)組字面量創(chuàng)建數(shù)組 []
var arr = [] //創(chuàng)建了一個空的數(shù)組
var arr1 = [1, 2, '3', true]

console.log(arr1)  // [1, 2, '3', true]

3.獲取數(shù)組元素 格式 數(shù)組名[索引號]

console.log(arr1[2])   // '3'

4.數(shù)組的長度 數(shù)組名.lenth

函數(shù)：封裝了一段可以被重復(fù)調(diào)用執(zhí)行的代碼塊垒棋，通過此代碼塊可以實現(xiàn)大量代碼的重復(fù)使用

函數(shù)使用分為兩步：聲明函數(shù) 和 調(diào)用函數(shù)
1.聲明函數(shù)
function 函數(shù)名() { function 是聲明函數(shù)的關(guān)鍵字 全部小寫
函數(shù)體
}
2.調(diào)用函數(shù)
函數(shù)名()
3.可以使用函數(shù)的參數(shù)實現(xiàn)函數(shù)重復(fù)不同的代碼
function 函數(shù)名(形參1，形參2...) { function 是聲明函數(shù)的關(guān)鍵字 全部小寫
函數(shù)體
}
函數(shù)名(實參1痪宰，實參2...)
4.函數(shù)的返回值 return 返回多個值時 返回最后一個值 想要返回多個值 用數(shù)組的方法 return[]
5.如果有return返回return后面的值叼架，如果沒有return 則返回undefined

arguments的使用

當(dāng)我們不確定有多少個參數(shù)傳遞的時候，可以用arguments來獲取,只有函數(shù)才有arguments對象衣撬，而且是每個函數(shù)都內(nèi)置好了這個arguments
偽數(shù)組碉碉，并不是真正意義上的數(shù)組
1.具有數(shù)組的length屬性
2.按照索引的方式進(jìn)行存儲的
3.沒有真正的數(shù)組的一些方法 pop() push()...

函數(shù)表達(dá)式聲明函數(shù)
var 變量名 = function(){}

js作用域：就是代碼名字(變量)在某個范圍內(nèi)起作用和效果目的是為了提高程序的可靠性恒重要的是減少命名沖突
1.js的作用域(es6)之前： 全局作用域 局部作用域
2.全局作用域：整個script標(biāo)簽 或者是一個單獨的js文件
var num = 10
3.局部作用域(函數(shù)作用域) 在函數(shù)內(nèi)部就是局部作用域 這代碼的名字旨在函數(shù)內(nèi)部起效果和作用
function fn() {
局部作用域
}

變量的作用域：根據(jù)作用域的不同 變量分為全局變量和局部量
1.全局變量：在全局作用域下的變量
var num = 10 num就是一個全局變量
2.在函數(shù)內(nèi)部沒有聲明直接定義：num=1 則num為全局變量
2.局部變量 在局部作用域下的變量
function fun() {
var num1 = 10 num1就是局部變量
}
3.從執(zhí)行效率來看全局變量和局部變量
(1)全局變量只有瀏覽器關(guān)閉的時候才會銷毀，比較占內(nèi)存資源
(2)局部變量執(zhí)行完畢就會銷毀

域解析：

f1()
console.log(c)
console.log(b)
console.log(a)
function f1(){
var a=b=c=9
console.log(c)
console.log(b)
console.log(a)
}

解析后如以下代碼：
function f1(){
var a a在函數(shù)里聲明淮韭，為局部變量
a=b=c=9 b垢粮，c未聲明，為全局變量
console.log(c)
console.log(b)
console.log(a)
}
f1() 結(jié)果為：99999報錯
console.log(c)
console.log(b)
console.log(a)

對象：(boject)對象是一組無須的相關(guān)屬性和方法的集合靠粪，所有的事物都是對象蜡吧，例如字符串、數(shù)值占键、數(shù)組昔善、函數(shù)等

對象是由屬性和方法組成的：
屬性：事物的特征，在對象中用屬性來表示
方法：事物的行為畔乙，在對象中用方法來表示

創(chuàng)建對象的三種方式：
1.利用字面量創(chuàng)建對象：{表達(dá)這個具體事物的屬性和方法}
var obj = {} //創(chuàng)建了一個空的對象
var obj = {
age: 18,
sex: '男',
uname: '李蘇飛',
sayHi: function () {
console.log('hi~~')
}
}
里面的屬性或者方法我們采取鍵值對的形式 建 屬性名：值 屬性值
多個屬性或方法中間用逗號隔開
方法冒號后面跟的是一個匿名函數(shù)

使用對象：
調(diào)用對象的屬性 我們采取 對象名.屬性名
console.log(obj.uname)
console.log(obj.age)
console.log(obj.sex)
調(diào)用屬性還有一種方法 對象名['屬性名']
console.log(obj['age'])
調(diào)用對象的方法 sayHi 對象名.方法名
obj.sayHi()

2.利用 newObject 創(chuàng)建對象
var obj = new Object(); //創(chuàng)建了一個空的對象
obj.uname = '劉德華'
obj.age = 18
obj.sex = '男'
obj.sayHi = function () {
console.log('hi~~~~~')
}
利用等號 = 賦值的方法 添加對象的屬性和方法

console.log(obj.uname) // '劉德華'
console.log(obj['sex']) // 18
obj.sayHi()  // 'hi~~~~~'

3.利用構(gòu)造函數(shù)創(chuàng)建對象
需要四大天王的對象 相同的屬性: 名字 年齡性別 相同的方法: 唱歌
構(gòu)造函數(shù)的語法格式：

function 構(gòu)造函數(shù)名() {
  this.屬性 = 值
  this.方法 = function () { }
}

使用：

new 構(gòu)造函數(shù)名()
function Star(uname, age, sex) {
  this.name = uname
  this.age = age
  this.sex = sex
  this.sing = function (sang) {
    console.log(sang)
  }
}
var ldh = new Star('劉德華', 18, '男')
console.log(typeof ldh)  //返回的是一個對象 object
console.log(ldh.name)
console.log(ldh['sex'])
ldh.sing('冰雨')
var zxy = new Star('張學(xué)友', 19, '男')
console.log(zxy.name)
console.log(zxy.age)
zxy.sing('李香蘭')

構(gòu)造函數(shù)名字首字母要大寫
構(gòu)造函數(shù)不需要return 就可以返回結(jié)果
調(diào)用構(gòu)造函數(shù) 必須使用 new
只要new Star() 調(diào)用函數(shù)就創(chuàng)建一個對象
屬性和方法前面必須添加this

for...in用于對數(shù)組或者對象屬性進(jìn)行遍歷

for (var k in obj) {
  console.log(k) //k變量 輸出 得到的是 屬性名
  console.log(obj[k])//obj[k] 得到的是屬性值
}

內(nèi)置對象：
Math對象：是一個內(nèi)置對象君仆，它擁有一些數(shù)學(xué)常數(shù)屬性和數(shù)學(xué)函數(shù)方法。Math 不是一個函數(shù)對象牲距。

console.log(Math.PI) // 3.141592653589793
console.log(Math.max(1, 2, 3, 4)) // 4
console.log(Math.abs(-100))  //絕對值
console.log(Math.floor(1.9))  //1 向下取整
console.log(Math.ceil(1.1))  //2 向上取整

console.log(Math.round(2.5))  //四舍五入 .5往大了取 比如-1.5 取-1

console.log(Math.random())

想要得到兩個數(shù)之間的隨機整數(shù) 并且包含這兩個數(shù)

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
  //含最大值返咱，含最小值 
}
console.log(getRandom(1, 10))

Date()日期對象：是一個構(gòu)造函數(shù) 必須使用new來調(diào)用創(chuàng)建我們的日期對象
1.如果沒有參數(shù) 返回當(dāng)前系統(tǒng)的當(dāng)前時間

var date = new Date()
console.log(date)

2.參數(shù)常用的寫法 數(shù)字型 2019，10牍鞠，01 或者是 字符串型'2019-10-1 8：8：8'

var date1 = new Date(2019, 10, 1)
console.log(date1) //返回的是11月不是10月
var date2 = new Date('2019-10-1 8:8:8')
console.log(date2) // Tue Oct 01 2019 08:08:08 GMT+0800

3.格式化日期 年月日

var date3 = new Date()
console.log(date3.getFullYear()) //返回當(dāng)前日期的年
console.log(date3.getMonth() + 1) //返回的月份小1個月 記得月份+1
console.log(date3.getDate()) //返回幾號
console.log(date3.getDay()) //返回周幾 周一返回1 周六返回6 周日返回0

var nowdate = new Date()
var year = nowdate.getFullYear()
var month = nowdate.getMonth() + 1
var dates = nowdate.getDate()
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = arr[nowdate.getDay()]

時分秒封裝函數(shù)化：

function getTimer() {
  var time = new Date()
  var h = time.getHours()
  h = h < 10 ? '0' + h : h
  var m = time.getMinutes()
  m = m < 10 ? '0' + m : m
  var s = time.getSeconds()
  s = s < 10 ? '0' + s : s
  return h + ':' + m + ':' + s
}

// var hours = nowdate.getHours()
// var minutes = nowdate.getMinutes()
// var seconds = nowdate.getSeconds()

console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + day + getTimer())  //今天是：2021年6月9日星期三 19時3分2秒

4.獲得Date總的毫秒數(shù)(時間戳) 距離1970年1月1日過了多少毫秒數(shù)
1.通過valueOf() getTime()

var date = new Date()
console.log(date.valueOf())
console.log(date.getTime())

var date1 = +new Date()
console.log(date1)

3.H5 新增的 獲得總的毫秒數(shù)

Date.now()

創(chuàng)建數(shù)組的兩種方式
1.利用數(shù)組字面量

var arr = [1, 2, 3]
console.log(arr[0]) // 1

2.利用new Array()

var arr1 = new Array()  //創(chuàng)建了一個空數(shù)組
var arr1 = new Array(2) //這個2表示數(shù)組的長度為2 里面有2個空的數(shù)組元素
var arr1 = new Array(2, 3) //等價于[2咖摹，3] 里面由2個數(shù)組元素2和3

instanceof 運算符 檢測是否為數(shù)組
Array.isArray(參數(shù))

添加刪除數(shù)組元素方法
1.push()在我們數(shù)組的末尾 添加一個或者多個數(shù)組元素

var arr = [1, 2, 3]
console.log(arr.push(4, 'pink')) // 5

//push完畢之后，返回的結(jié)果是 新數(shù)組的長度 原數(shù)組也會發(fā)生變化

console.log(arr) // [1, 2, 3, 4, 'pink']

2.unshift()在我們數(shù)組的開頭 添加一個或者多個數(shù)組元素

arr.unshift('red', 'purple')
console.log(arr)  // ['red', 'purple', 1, 2, 3, 4, 'pink']

3.pop()可以刪除數(shù)組的最后(一個)元素
// arr.pop() 沒有參數(shù)

console.log(arr.pop()) //返回的是刪除的那個元素  'pink'
console.log(arr) // ['red', 'purple', 1, 2, 3, 4]

4.shift()可以刪除數(shù)組的第(一個)元素
console.log(arr.shift()) //返回的是刪除的那個元素 'red'
console.log(arr) // [ 'purple', 1, 2, 3, 4]

數(shù)組排序：
1.翻轉(zhuǎn)數(shù)組

var arr = ['pink', 'red', 'blue']
arr.reverse()
console.log(arr) //['blue', 'red', 'pink']

2.數(shù)組排序（冒泡排序）

var arr1 = [377777, 745, 777, 71, 775]
arr1.sort(function (a, b) {
  // return a - b  //升序
  return b - a //降序
})
console.log(arr1)

返回數(shù)組元素索引號方法

var arr = [1, 2, 3, 4, 5, 6, 4]

indexof 返回第一個滿足條件的索引號 找不到該元素难述，返回-1 從前往后找

console.log(arr.indexOf(4)) //返回3 
console.log(arr.indexOf(10)) // -1

lastIndexof 從后往前找 找不到該元素萤晴，返回-1

console.log(arr.lastIndexOf(4)) // 6

數(shù)組轉(zhuǎn)換為字符串
1.toString() 將我們的數(shù)組轉(zhuǎn)換為字符串

var arr = [1, 2, 3]
console.log(arr.toString())

2.join(分隔符)

var arr1 = ['green', 'blue', 'pink']
console.log(arr1.join('-')) //默認(rèn)逗號 green-blue-pink

拓展：
concat():連接兩個或多個數(shù)組賣不影響原數(shù)組，返回一個新的數(shù)組

var num1 = [1, 2, 3],
  num2 = [4, 5, 6],
  num3 = [7, 8, 9];
var nums = num1.concat(num2, num3); // [1,2,3,4,5,6,7,8,9]

slice():數(shù)組截取 slice(begin,end),返回被截取項目的新數(shù)組
begin按照索引號胁后，end按照第幾個

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);  // ['Orange', 'Lemon']

splice():數(shù)組刪除 splice(第幾個開始店读，要刪除的個數(shù)，'插入內(nèi)容'),

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet"); // ["drum"]

字符串對象 根據(jù)字符返回位置
str.indexOf('要查找的字符',[起始的位置])

var str = '改革春風(fēng)吹滿地,春天來了'
console.log(str.indexOf('春', 3)) // 8

o出現(xiàn)的索引號攀芯，出現(xiàn)了幾次

var str1 = 'abcoefoxyozzopp'
var index = str1.indexOf('o')
var count = 0
while (index !== -1) {
  console.log(index)
  index = str1.indexOf('o', index + 1)
  count++
}
console.log(count)

根據(jù)位置返回字符
1.charAt(index) 根據(jù)位置返回字符

var str = 'andy'
for (var i = 0; i < str.length; i++) {
  console.log(str.charAt(i)) //andy
}

2.charCodeAt(index) 返回相應(yīng)索引號的字符 ASCII值
// 目的：判斷用戶按下了哪個鍵

console.log(str.charCodeAt(0)) //97

3.str[index] H5新增的

console.log(str[0]) //a

字符串操作方法
1.concat('字符串1', '字符串2'...)

var str = 'andy'
console.log(str.concat('red')) // andyred

2.substr(star,length)

var str1 = '改革春風(fēng)吹滿地'
console.log(str1.substr(2, 2)) //春風(fēng)

3.替換字符 replace('被替換的字符', '替換為的字符')
只會替換第一個字符

var str2 = 'andyandy'
console.log(str2.replace('a', 'b')) //bndyandy

4.字符串轉(zhuǎn)換為數(shù)組 split('分隔符')

var str3 = 'red,pink,blue'
console.log(str3.split(','))//["red", "pink", "blue"]

5.轉(zhuǎn)換為大寫 toUpperCase()

var str4 = 'abcdefg'
console.log(str4.toUpperCase())//ABCDEFG
console.log('QwEr'.toUpperCase()) //QWER
str4 = str4.toUpperCase()

6.轉(zhuǎn)換為小寫 toLowerCase()

console.log(str4.toLowerCase())//abcdefg
console.log('QwEr'.toLowerCase()) //qwer

BOM：瀏覽器對象模型屯断，提供了獨立于內(nèi)容而于瀏覽器窗口進(jìn)行交互的對象，核心對象時window

window常見對象：

窗口加載事件：
window.onload = function(){}
window.addEventListener('load',function(){})

調(diào)整窗口大小事件：

window.onresize=function(){}
window.addEventListener('resize',function(){})
window.innerWidth 當(dāng)前屏幕尺寸

定時器：

setTimeout():window.setTimeout(調(diào)用函數(shù)，[延遲得毫秒數(shù)])

調(diào)用一次

停止setTimeout()定時器：window.clearTimeout(timeoutID)

setIntercal():window.setIntercal(調(diào)用函數(shù)裹纳，[延遲得毫秒數(shù)])

持續(xù)調(diào)用

停止setIntercal()定時器：window.clearIntercal(timeoutID)

location對象：

*location.href：獲取或者設(shè)置整個URL
location.host：返回主機(域名)
location.port：返回端口號
location.pathname：返回路徑
*location.search：返回參數(shù)
location.hash：返回片段
navigator對象：navigator.userAgent 是移動端打開 還是pc端
history對象：與瀏覽器歷史記錄進(jìn)行交互
back()：后退
forward():前進(jìn)
go(參數(shù))：前進(jìn)后退功能

方法：

location.assign():跟href一樣，可以跳轉(zhuǎn)頁面
location.replace():替換當(dāng)前頁面紧武，不記錄歷史剃氧，不能后退頁面
location.reload():刷新頁面 F5

元素偏移量offset系列：

1.可以得到元素得偏移 位置 返回的不帶單位的數(shù)值
console.log(father.offsetTop)
console.log(father.offsetLeft)
它以帶有定位得父親為準(zhǔn) 如果沒有父親 或者父親沒有定位 則以body為準(zhǔn)
console.log(son.offsetLeft)
2.可以得到元素的大小 寬度和高度 是包含 padding + border + width 不包含margin
console.log(w.offsetWidth);
console.log(w.offsetHeight);
3.返回帶有定位的父親 否則返回的是body
console.log(son.offsetParent);
console.log(son.parentNode); //返回的最近一級的父親 不管父親有沒有定位

client系列：

clientWidth：不包含邊框，其他和offsetWidth 一樣
clientTop：返回元素上邊框大小
clientLeft：返回元素左邊框大小

元素滾動scroll系列：

scrollWIdth：和clientWidth一樣 但是內(nèi)容超出會變大 clientWidth 不會變大
scrollTop:被滾動事件 頭部卷進(jìn)去的內(nèi)容部分

mouseenter：鼠標(biāo)經(jīng)過事件

只有經(jīng)過自己觸發(fā)阻星；mouseover經(jīng)過自己觸發(fā)朋鞍，經(jīng)過子盒子還會觸發(fā)

mouseleave；鼠標(biāo)離開

動畫函數(shù)封裝：

動畫實現(xiàn)原理：通過定時器setInterval()不斷移動盒子位置
實現(xiàn)步驟：
1.獲取盒子的當(dāng)前位置
2.讓盒子在當(dāng)前位置上加上1個移動距離
3.利用定時器不斷重復(fù)這個操作
4.加一個結(jié)束定時器效果
5.注意此元素需要添加定位妥箕，才能使用element.style.left

var div = document.querySelector('div')
var timer = setInterval(function () {
  if (div.offsetLeft >= 400) {
    //停止動畫 本質(zhì)是停止定時器
    clearInterval(timer)
  }
  div.style.left = div.offsetLeft + 1 + 'px'
}, 30)

緩動動畫效果原理：
1.讓盒子每次移動的距離慢慢變小滥酥，速度就會慢慢落下來
2.算法：(目標(biāo)值-現(xiàn)在的位置)/10 做為每次移動的距離步長
3.停止條件：讓當(dāng)前盒子位置等于目標(biāo)位置就停止定時器

移動端：

觸屏事件：touch
touchstart：觸摸到一個DOM元素觸發(fā)
touchmove：在DOM元素上移動
touchend：在Dom元素離開

觸摸事件對象：TouchEvent
touches：正在觸摸屏幕的所有手指的一個列表
targetTouches：正在觸摸當(dāng)前DOM元素上的手指的一個列表
changedTouches：手指狀態(tài)發(fā)生了改變的列表，從無到有畦幢，從有到無變化

拖動元素三部曲：
1.觸摸元素touchstart：獲取手指初始坐標(biāo)坎吻，同時獲得盒子原來的位置
2.移動手指touchmove：計算手指的滑動距離，并且移動盒子
3.離開手指touchend
注意：手指移動也會觸發(fā)滾動屏幕所以這里要阻止默認(rèn)的屏幕滾動e.preventDefault()

classList 返回元素的類名
classList.add（類名） 追加類名 不會覆蓋以前的類名
classList.remove（類名）刪除類名
*classList.toggle（類名） 切換類名 有就刪除 沒有就添加

本地存儲：

window.sessionStorage:
1.生命周期為關(guān)閉瀏覽器窗口
2.在同一個窗口下數(shù)據(jù)可以共享
3.以鍵值對的形式存儲使用
存儲數(shù)據(jù)：sessionStorage.setltem(key,value)
獲取數(shù)據(jù)：sessionStorage.getltem(key,value)
刪除數(shù)據(jù)：sessionStorage.removeItem(key)
清除所有：sessionStorage.clear()

window.localStorage
1.生命周期為永久生效
2.可以多窗口共享(同一個瀏覽器)
3.以鍵值對的形式存儲使用
存儲數(shù)據(jù)：localStorage.setltem(key,value)
獲取數(shù)據(jù)：localStorage.getltem(key,value)
刪除數(shù)據(jù)：localStorage.removeItem(key)
清除所有：localStorage.clear()

DOM：
文檔對象模型宇葱，標(biāo)準(zhǔn)的編程接口瘦真，通過接口可以改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式
DOM樹：
文檔：一個頁面就是一個文檔黍瞧，document表示
元素：頁面中的所有標(biāo)簽都是元素诸尽，element表示
節(jié)點：網(wǎng)頁中所有的內(nèi)容都是節(jié)點（標(biāo)簽、屬性印颤、文本您机、注釋等），node表示
DOM把以上內(nèi)容都看做是對象

獲取元素：
1.根據(jù)ID獲饶昃帧：getElementByld()方法可以獲取帶有ID的元素對象
<div id='time'>2019-9-1</div>
<script>
//1.因為文檔頁面從上往下加載际看，所以先得有標(biāo)簽，所有script寫到標(biāo)簽得下面
//2.get獲得 element元素 by通過 駝峰命名法
//3.參數(shù) id 是大小寫敏感的字符串
//4.返回的是一個元素對象
var timer = document.getElementById('time')
console.log(timer)
console.log(typeof timer) //object
//5.console.dir可以打印我們返回的元素對象 更好的查看里賣弄的屬性和方法
console.dir(timer) //div#time
</script>

2.getElementsByTagName獲取某類標(biāo)簽元素
<ul>
<li>1231231</li>
<li>1231322</li>
</ul>
<ol id='ol'>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
//1.返回的是 獲取過來元素對象的集合 以為數(shù)組的形式存儲的
var lis = document.getElementsByTagName("li")
console.log(lis)
console.log(lis[0])
//2.遍歷
for (var i = 0; i < lis.length; i++) {
console.log(lis[i])
}
//3.如果頁面中只有一個li或者沒有 返回的還是偽數(shù)組的形式
//4.element.getElementsByTagName('標(biāo)簽名') 父元素必須是指定的單個元素
var ol = document.getElementById('ol')
console.log(ol.getElementsByTagName('li'))
</script>

3.通過HTML5新增的方法獲取
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首頁</li>
<li>產(chǎn)品</li>
</ul>
</div>
<script>
// 1.getElementsByClassName 根據(jù)類名獲得某些元素集合
var boxs = document.getElementsByClassName('box')
console.log(boxs)
// 2.querySelector 返回指定選擇器的第一個元素對象
// 里面的選擇器需要加符號
var firstBox = document.querySelector('.box')
console.log(firstBox)
var nav = document.querySelector('#nav')
console.log(nav)
var li = document.querySelector('li')
console.log(li)
// 3.querySelectorAll() 返回指定選擇器的所有元素對象集合
var allBox = document.querySelectorAll('.box')
console.log(allBox)
</script>

4.獲取body html 元素
// 1.獲取body 元素
var bodyEle = document.body
console.log(bodyEle)
console.dir(bodyEle)
// 2.獲取Html 元素
var htmlEle = document.documentElement
console.dir(htmlEle)

事件：觸發(fā)--相應(yīng)機制
三要素：事件源 事件類型 事件處理程序
<button id='btn'>唐伯虎</button>
<script>
//點擊一個按鈕矢否，彈出對話框
// (1)事件源：事件被觸發(fā)的對象
var btn = document.getElementById('btn')
// (2)事件類型：如何觸發(fā) 什么事件 比如單擊(onclick) 還是經(jīng)過 按下
// (3)事件處理程序：通過一個函數(shù)賦值的方式完成
btn.onclick = function () {
alert('點秋香')
}
</script>

常見的鼠標(biāo)事件：
onclick：鼠標(biāo)單擊左鍵觸發(fā)
onmouseover：鼠標(biāo)經(jīng)過觸發(fā)
onmouseout：鼠標(biāo)離開觸發(fā)
onfocus：獲得鼠標(biāo)焦點觸發(fā)
onblur：失去鼠標(biāo)焦點觸發(fā)
onmousemove：鼠標(biāo)移動出發(fā)
onmouseup：鼠標(biāo)彈起觸發(fā)
onmousedown：鼠標(biāo)按下觸發(fā)
contextmenu：禁止鼠標(biāo)右鍵菜單
selectstart：禁止鼠標(biāo)選中

操作元素：
1.改變元素內(nèi)容
element.innerText/innerHTML
innerText不識別HTML標(biāo)簽仿村，innerHTML識別HTML標(biāo)簽

<button>顯示當(dāng)前系統(tǒng)時間</button>
<div>某個時間</div>
<p>123</p>
<script>

//當(dāng)我們點擊了按鈕 div里的文字會發(fā)生變化
// 1.獲取元素
var btn = document.querySelector('button')
var div = document.querySelector('div')
// 2.注冊事件 //點擊才會改變
btn.onclick = function () {
  div.innerText = getDate()
}
function getDate() {
  var nowdate = new Date()
  var year = nowdate.getFullYear()
  var month = nowdate.getMonth() + 1
  var dates = nowdate.getDate()
  var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  var day = arr[nowdate.getDay()]
  return '今天是：' + year + '年' + month + '月' + dates + '日 ' + day
}
//我們元素可以不用添加事件 //不用任何操作直接改變
var p = document.querySelector('p')
p.innerText = getDate();

</script>

自定義屬性
1.獲取是性質(zhì)
element.屬性 獲取屬性值
element.getAttribute('屬性')
2.設(shè)置屬性值
element.setAttribute('屬性'，'值')
3.移除屬性 removeAttribute(屬性)

H5自定義屬性
<div getTime='20' data-index='2' data-list-name='andy'></div>
<script>
var div = document.querySelector('div')
// console.log(div.getTime)
console.log(div.getAttribute('getTime'))
div.setAttribute('date-time', 20)
console.log(div.getAttribute('data-index'))
// h5新增的獲取自定義屬性的方法
// dataset 是一個集合 里面存放了所有以data開頭的自定義屬性
console.log(div.dataset)
console.log(div.dataset.index)
console.log(div.dataset['index'])
// 如果自定義屬性里面有多個-鏈接的單詞兴喂，我們獲取的時候采取 駝峰命名法
console.log(div.dataset.listName)
</script>

節(jié)點：
節(jié)點至少擁有nodeType(節(jié)點類型)蔼囊、nodeName(節(jié)點名稱)、nodeValue(節(jié)點值)這三個基本屬性
元素節(jié)點 nodeType 為 1
屬性節(jié)點 nodeType 為 2
文本節(jié)點 nodeType 為 3 (文本節(jié)點包含文字衣迷、空格畏鼓、換行等)

父節(jié)點：parentNode 得到的是離元素最近的父級節(jié)點

子節(jié)點：parentNode.childNodes 所有的子節(jié)點 包含元素節(jié)點 文本節(jié)點等等
parentNode.children 獲取所有的子元素節(jié)點
parentNode.children[0] 第一個子節(jié)點
parentNode.firstChild 第一個子節(jié)點 包含元素節(jié)點 文本節(jié)點等等
parentNode.lastChild 最后一個子節(jié)點 包含元素節(jié)點 文本節(jié)點等等
parentNode.firstElementChild 第一個子節(jié)點
parentNode.lastElementChild 最后一個子節(jié)點

兄弟節(jié)點：node.nextSibling 得到的是下一個兄弟節(jié)點 包含元素節(jié)點 或者 文本節(jié)點等等
node.previousSibling 得到的是上一個兄弟節(jié)點
node.nextElementSibling 得到下一個兄弟元素節(jié)點
node.previousElementSIbling 得到上一個兄弟節(jié)點

創(chuàng)建節(jié)點：document.createElement('tagName')

添加節(jié)點：node.appendChild(child) 追加元素
node.insertBefore(child,指定元素) 指定元素前面添加

刪除節(jié)點：node.removeChild(child)

復(fù)制節(jié)點：node.cloneNode() 如果括號參數(shù)為空或者false，淺拷貝壶谒，只復(fù)制標(biāo)簽不復(fù)制內(nèi)容

innerHTML創(chuàng)建多個元素效率更高(不采用拼接字符串云矫，采取數(shù)組形式拼接)，結(jié)構(gòu)稍微復(fù)雜
createElement()創(chuàng)建多個元素效率稍微低一點汗菜，單結(jié)構(gòu)更清晰
不同瀏覽器下让禀，innerHTML效率要比createElement高

DOM事件流：頁面接受事件的順序
捕獲階段挑社、當(dāng)前目標(biāo)階段、冒泡階段

事件對象常見屬性和方法：
e.target 返回觸發(fā)事件的對象
e.type 返回事件的類型
e.preventDefault() 阻止默認(rèn)事件(默認(rèn)行為)標(biāo)準(zhǔn) 比如不讓鏈接跳轉(zhuǎn)
e.stopPropagation() 阻止冒泡

鼠標(biāo)事件對象：
e.clientX：返回鼠標(biāo)相對于瀏覽器窗口可視區(qū)的X坐標(biāo)
e.clientY：返回鼠標(biāo)相對于瀏覽器窗口可視區(qū)的Y坐標(biāo)
e.pageX：返回鼠標(biāo)相對于文檔頁面的X坐標(biāo)
e.pageY：返回鼠標(biāo)相對于文檔頁面的Y坐標(biāo)
e.screenX：返回鼠標(biāo)相對于電腦屏幕的X坐標(biāo)
e.screenY：返回鼠標(biāo)相對于電腦屏幕的Y坐標(biāo)

事件委托的原理：
不是每個子節(jié)點單獨設(shè)置事件監(jiān)聽器巡揍，而是事件監(jiān)聽器設(shè)置在其父節(jié)點上痛阻，然后利用冒泡原理影響設(shè)置每個子節(jié)點

鍵盤事件：
onkeyup：按鍵被松開時觸發(fā)
onkeydown：按鍵被按下時觸發(fā)
onkeypress：按鍵被按下時觸發(fā) 不能識別功能鍵