一.作用和分類
作用: 就是使用 JS 去操作 html 和瀏覽器
分類：DOM (文檔對象模型)、BOM（瀏覽器對象模型）
DOM 是文檔對象模型,操作網(wǎng)頁內(nèi)容筋栋，可以開發(fā)網(wǎng)頁內(nèi)容特效和實(shí)現(xiàn)用戶交互
二.獲取DOM對象
語法:? document.querySelector('css選擇器')
參數(shù):包含一個(gè)或多個(gè)有效的CSS選擇器 字符串
得到的是一個(gè)偽數(shù)組：有長度有索引號的數(shù)組,但是沒有 pop() push() 等數(shù)組方法,想要得到里面的每一個(gè)對象栈拖，則需要遍歷（for）的方式獲得绽族。
?//?1.?獲取單個(gè)元素:?document.querySelector('選擇器')
????????//?獲取?div.top???交集選擇器:?是div,同時(shí)擁有top類
????????let?box?=?document.querySelector('.top')
????????console.log(box)
????????//?獲取li標(biāo)簽
????????let?li?=?document.querySelector('.main?li')
????????console.log(li)
????????//?獲取最多獲取一個(gè)元素:?從上往下匹配到的第一個(gè)
????????//?獲取不到:?null
????????let?t?=?document.querySelector('top')???????????//?標(biāo)簽選擇器top標(biāo)簽
????????console.log(t)
????????//?2.?獲取多個(gè)元素:?document.querySelectorAll('選擇器')
????????let?lis?=?document.querySelectorAll('.main?li')
????????console.log(lis)
????????//?結(jié)果:?NodeList?[]??叫做偽數(shù)組:?長得像數(shù)組,?但是不是數(shù)組
????????//?長得像數(shù)組:?有l(wèi)ength屬性,?元素有下標(biāo),?從0開始:?可以下標(biāo)訪問,?也可以for循環(huán)遍歷
????????//?不是數(shù)組:?不能使用數(shù)組的API:?push()?||?shift()?||?splice()?都不能用
????????//?訪問第一個(gè)
????????console.log(lis[0])
????????//?訪問最后一個(gè)
????????console.log(lis[lis.length?-?1])
????????//?可以遍歷
????????for?(let?i?=?0;?i?<?lis.length;?i++)?{
????????????console.log(lis[i])
????????}
????????//?如果只有一個(gè)匹配呢??不管有多少個(gè),?一定是NodeList?的偽數(shù)組?[]
????????let?ts?=?document.querySelectorAll('top')
????????console.log(ts)
????????//?提醒:?如果是用到了document.querySelectorAll(),?得到的結(jié)果只有兩個(gè)作用
????????//?1.?下標(biāo)訪問:?結(jié)果[下標(biāo)]????2.?遍歷:?for循環(huán)(最多)
3?//?老舊方式
<div?class="content"?id="c">
????????<div?class="item">1</div>
????????<div?class="item">2</div>
????????<div?class="item">3</div>
????</div>
????<script>
????????//?老舊方式
????????//?1.?通過id的值獲取:?document.getElementById('id的值')
????????let?content?=?document.getElementById('c')
????????console.log(content)
????????//?2.?通過表簽名獲取:(多個(gè)),?document.getElementsByTagName('標(biāo)簽名')
????????let?divs?=?document.getElementsByTagName('div')
????????console.log(divs)
????????//?HTMLCollection對象:?[]?偽數(shù)組
????????//?3.?通過類名獲取:(多個(gè)),?document.getElementsByClassName('類名')
????????let?items?=?document.getElementsByClassName('item')
????????console.log(items)
????</script>
三.修改元素
1.元素文本
<div?class="box1">
????????我是<font?color='red'>小馬哥</font>
????</div>
????<div?class="box2">
????????我是<font?color='green'>小馬哥</font>
????</div>
????<script>
????????//?操作元素:?前提要先拿到元素
????????let?box1?=?document.querySelector('.box1')
????????let?box2?=?document.querySelector('.box2')
????????//?innerText:?標(biāo)簽文本
????????//?元素.innerText?獲取文本
????????//?元素.innerText?=?'值'??修改文本
????????console.log(box1.innerText)?????????//?只拿文本(不包含標(biāo)簽):?所有文本
????????box1.innerText?=?'<b>全部修改</b>'
????????//?修改成功:?但是標(biāo)簽沒有被解析(全部都是文本)
????????//?如果標(biāo)簽內(nèi)部都是文本:?就使用innerText(如果帶標(biāo)簽?就不用)
????????//?innerHTML:?標(biāo)簽內(nèi)容(包含文本和標(biāo)簽)
????????console.log(box2.innerHTML)?????????//?包含所有內(nèi)容,?包括標(biāo)簽和換行
????????box2.innerHTML?=?'<b>全部修改</b>'??//?標(biāo)簽可以被解析
????</script>
2.常用屬性
?<a?
????????//?產(chǎn)生隨機(jī)數(shù):?圖片序號是從1-9
????????let?rand?=?myRandom(1,?9)
????????//?console.log(rand)
????????//?修改圖片的src
????????img.src?=?`../素材/images/b0${rand}.jpg`
????</script>
一.屬性操作(表單)
1.type:input標(biāo)簽?
password?
text
2.value:所有表單屬性
獲取值:元素.value
修改值:元素.value=新值
3.checked:選中
true:選中
false:不選中
4.disabled:禁用
true:禁用
false:不禁用
二.定時(shí)器:間歇函數(shù)
本質(zhì):就是一個(gè)函數(shù)的調(diào)用
兩個(gè)參數(shù)
參數(shù)1:函數(shù)(代碼放到函數(shù)中)
參數(shù)2:時(shí)間間隔(單位上ms毫秒)
開啟定時(shí)器
let 變量=setInterval(函數(shù),時(shí)間間隔)
清除定時(shí)器:clearInterval(變量)
三.事件
事件: 給元素添加一段代碼, 用戶觸發(fā)后執(zhí)行相應(yīng)代碼
注冊事件addEventListener
元素.addEventListener('事件類型', 函數(shù))
給元素添加事件(給誰做)
類型: 用戶的觸發(fā)方式(怎么做)
函數(shù): 觸發(fā)后的處理效果(做什么)
事件三要素
1.事件源
2.事件類型
1.鼠標(biāo)
click單擊
mouseover鼠標(biāo)懸停
mouseout鼠標(biāo)移出
mouseenter鼠標(biāo)進(jìn)入
mouseleave鼠標(biāo)移出
2.鍵盤
keydown按下
keyup松開
3.文本
input內(nèi)容改變
4.焦點(diǎn)
focus得到焦點(diǎn)
blur失去焦點(diǎn)
3.事件處理函數(shù)
四.高階函數(shù)
變量可以存任何數(shù)據(jù), 包括函數(shù)
函數(shù)表達(dá)式
let 變量名 = function(){}
函數(shù)是匿名: 變量就是函數(shù)的名字
形參用來接收實(shí)參: 函數(shù)也是一種數(shù)據(jù)
函數(shù)當(dāng)成實(shí)參? ? ? ? ? ? ? ? ? ? ? ? ?//回調(diào)函數(shù)
接收函數(shù)參數(shù)的函數(shù): 主函數(shù)? ? ?//內(nèi)部調(diào)用回調(diào)函數(shù)
五.環(huán)境對象
函數(shù)內(nèi)部有一個(gè)關(guān)鍵字
this
一定是一個(gè)對象
指向: 誰調(diào)用, 代表誰
普通函數(shù): 本質(zhì)屬于window對象
里面的this指向window對象
六.編程思想
排他思想
元素: 兄弟關(guān)系
只有一個(gè)特殊, 其他都一樣
通用方法 :
先統(tǒng)一: 全部一樣(遍歷),再特殊: 自己特殊
七.節(jié)點(diǎn)操作
網(wǎng)頁一切皆節(jié)點(diǎn),重要節(jié)點(diǎn): 元素節(jié)點(diǎn)
查節(jié)點(diǎn)
1.找爸爸
子元素.parentElement //父元素
子元素.parentNode? ? ? ? //父節(jié)點(diǎn)
2.找兄弟
元素.previousElementSibling //前一個(gè)兄弟元素
元素.nextElementSibling? ? ? ? ? //后一個(gè)兄弟元素
3.找孩子
父元素.children //偽數(shù)組
父元素.firstElementChild? ? //第一個(gè)孩子元素
父元素.firstChild? ? ? ? ? ? ? ? ? //第一個(gè)孩子節(jié)點(diǎn)
父元素.lastElementChild? ? //最后一個(gè)孩子元素
新增節(jié)點(diǎn)
1.創(chuàng)建節(jié)點(diǎn)
document.createElement('標(biāo)簽')
默認(rèn)是空節(jié)點(diǎn)?追加屬性,追加樣式,追加樣式
2.追加節(jié)點(diǎn)
父元素.appendChild(子元素): 最小的孩子
父元素.insertBefore(新元素, 放誰的前面)
3.克隆節(jié)點(diǎn)
元素.cloneNode(布爾值)
默認(rèn)false淺克隆: 只有結(jié)構(gòu)
true: 深克隆(所有)
刪除節(jié)點(diǎn)
父元素.removeChild(子元素): 他殺
元素.remove(): 自殺
八.時(shí)間日期對象
作用: 但凡跟時(shí)間有關(guān), 都用得上
獲取對象
new Date(): 當(dāng)前時(shí)間對象
new Date('年-月-日 時(shí):分:秒'): 指定時(shí)間(字符串格式)
new Date(時(shí)間戳)
+new Date()
new Date().getTime()
Date.now()? ? ? ?簡單,只有一個(gè)作用
使用常用的方法
getFullYear(): 年
getMonth(): 月, 從0開始, 使用需要+1
getDate(): 日
getHours(): 時(shí)
getMinutes(): 分
getSeconds(): 秒
剩余時(shí)間倒計(jì)時(shí)
1. 先上定時(shí)器
2. 拿到目標(biāo)(未來結(jié)束時(shí)間) 時(shí)間戳
3. 減去當(dāng)前時(shí)間時(shí)間戳
4. 除以1000: 還原秒數(shù)(取整)
5. 轉(zhuǎn)換成時(shí)分秒(必要時(shí)候要算天)
小時(shí): 取整(時(shí)間戳 / 3600) % 24
分鐘: 取整(時(shí)間戳 / 60) % 60
秒: 時(shí)間戳 % 60
天: 取整(時(shí)間戳 / 3600 / 24)
九.事件對象
概念: 系統(tǒng)記錄用戶操作行為的對象
獲取事件對象: 事件回調(diào)函數(shù)中增加一個(gè)形參
event
ev
e(最常見)
常用屬性
相對元素偏移: e.offsetX && e.offsetY
相對body便宜: e.pageX && e.pageY? ? ? ?// 不受滾動影響
按鍵信息: e.key? ? //鍵盤事件
keydown(較多)
keyup
例:
document.querySelector('.box').addEventListener('click', function (e) {
? ? ? ? ? ? // 查看事件相關(guān)屬性
? ? ? ? ? ? console.log(e.type);// 查看事件類型
? ? ? ? ? ? console.log('可視坐標(biāo)', e.clientX, e.clientY);
? ? ? ? ? ? console.log('元素自身偏移坐標(biāo)', e.offsetX, e.offsetY);
? ? ? ? ? ? // 拓展:頁面坐標(biāo)系? pageX/pageY:永遠(yuǎn)距離body頂點(diǎn)
? ? ? ? ? ? console.log('頁面偏移', e.pageX, e.pageY);
? ? ? ? })
// 鍵盤事件
? ? ? ? document.addEventListener('keydown', function (e) {
? ? ? ? ? ? console.log(e.key);
? ? ? ? })
// 元素.click() 給予點(diǎn)擊
十.事件流
事件發(fā)生的過程
兩個(gè)階段
1.捕獲
從window到目標(biāo)
DOM2: addEventListener(,,觸發(fā)階段),默認(rèn)冒泡,true: 捕獲
2.冒泡
從目標(biāo)到window
作用: 事件委托
父子關(guān)系
孩子多, 動態(tài)
事件綁定給父元素
e.target區(qū)分目標(biāo)元素,標(biāo)簽節(jié)點(diǎn)名字: nodeName都是大寫,其他屬性也都可以區(qū)分
十一.事件取消
1.DOM0
on注冊事件
同一類型事件只能一個(gè), 后面的覆蓋前面
取消: on事件 = null
2.DOM2
addEventListener注冊事件
同一類型事件可以多個(gè)
取消: removeEventListener()? ?//只能取消有名回調(diào)
十二.window加載事件
1.load事件
必須等到所有內(nèi)容(包括圖片內(nèi)容)加載結(jié)束后才會執(zhí)行
2.DOMContentLoaded事件
只要結(jié)構(gòu)加載完畢就會觸發(fā)
十三.scroll家族
滾動家族: 元素或者頁面滾動的時(shí)候才用的上
一般都是頁面滾動
window的scroll事件
滾動距離,可以修改
scrollLeft: 左滾動
scrollTop: 上滾動
一般用html標(biāo)簽: document.documentElement
十四.offset家族
獲取元素的真實(shí)大小和偏移
1.大小
offsetWidth
offsetHeight
組成: border + padding + content
2.偏移
距離定位父級的距離
如果沒有到body的距離
offsetLeft
offsetTop
十五.client家族
可視家族: 做響應(yīng)式布局
可視大小
組成: padding + content
clientWidth
clientHeight
監(jiān)聽頁面大小改變,window的resize事件
十六.window對象
BOM(Browser Object Model ) 是瀏覽器對象模型
1.定時(shí)器-延時(shí)函數(shù)(setTimeout)
語法:setTimeout(回調(diào)函數(shù),等待毫秒)
僅僅只執(zhí)行一次
clearTimeout 清除由 setTimeout 創(chuàng)建的定時(shí)任務(wù)
2.JS執(zhí)行機(jī)制
同步,前一個(gè)任務(wù)結(jié)束后再執(zhí)行后一個(gè)任務(wù)者疤，程序的執(zhí)行順序與任務(wù)的排列順序是一致的苫纤、同步的
異步,可以同時(shí)做多種事情
一.同步任務(wù),同步任務(wù)都在主線程上執(zhí)行纺蛆，形成一個(gè)執(zhí)行棧。
二 .異步任務(wù),JS 的異步是通過回調(diào)函數(shù)實(shí)現(xiàn)的
1规揪、普通事件桥氏，如 click、resize 等
2猛铅、資源加載字支，如 load、error 等
3奸忽、定時(shí)器堕伪，包括 setInterval、setTimeout 等
3.location對象
1.location 的數(shù)據(jù)類型是對象栗菜，它拆分并保存了 URL 地址的各個(gè)組成部分
2.常用屬性和方法：
href 屬性獲取完整的 URL 地址欠雌，對其賦值時(shí)用于地址的跳轉(zhuǎn)
search 屬性獲取地址中攜帶的參數(shù)，符號 苛萎？后面部分
hash 屬性獲取地址中的啥希值桨昙，符號 # 后面部分
reload 方法用來刷新當(dāng)前頁面，傳入?yún)?shù) true 時(shí)表示強(qiáng)制刷新
4.navigator對象
navigator的數(shù)據(jù)類型是對象腌歉，該對象下記錄了瀏覽器自身的相關(guān)信息
常用屬性和方法：通過 userAgent 檢測瀏覽器的版本及平臺
5.histroy對象
history 的數(shù)據(jù)類型是對象蛙酪，該對象與瀏覽器地址欄的操作相對應(yīng)，如前進(jìn)翘盖、后退桂塞、歷史記錄等
常用屬性和方法：
后退功能:back()
前進(jìn):forward()
前進(jìn)后退功能:go()參數(shù)? 0是刷新,正是前進(jìn)的頁面數(shù)量,負(fù)是后退的數(shù)量
十七.swiper 插件
熟悉官網(wǎng),了解這個(gè)插件可以完成什么需求 https://www.swiper.com.cn/
看在線演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
查看基本使用流程 https://www.swiper.com.cn/usage/index.html
查看APi文檔,去配置自己的插件 https://www.swiper.com.cn/api/index.html
注意: 多個(gè)swiper同時(shí)使用的時(shí)候, 類名需要注意區(qū)分
十八.本地存儲
本地存儲特性
1、數(shù)據(jù)存儲在用戶瀏覽器中
2馍驯、設(shè)置阁危、讀取方便、甚至頁面刷新不丟失數(shù)據(jù)
3汰瘫、容量較大狂打，sessionStorage和localStorage約 5M 左右
localStorage
1、生命周期永久生效混弥，除非手動刪除 否則關(guān)閉頁面也會存在
2趴乡、可以多窗口（頁面）共享（同一瀏覽器可以共享）
3. 以鍵值對的形式存儲使用
4.語法:localStorage.setItem('名字',內(nèi)容)
內(nèi)容:JSON.stringify(復(fù)雜數(shù)據(jù)類型)
將復(fù)雜數(shù)據(jù)轉(zhuǎn)換成JSON字符串 存儲 本地存儲中
內(nèi)容:JSON.parse(JSON字符串)
將JSON字符串轉(zhuǎn)換成對象 取出 時(shí)候使用
十九.正則表達(dá)式
各種常用表達(dá)式:https://c.runoob.com/front-end/854/
作用：驗(yàn)證數(shù)據(jù)
1.語法
1. 定義規(guī)則：/規(guī)則/
2. 驗(yàn)證規(guī)則
test(): 驗(yàn)證有效性， 布爾結(jié)果true：驗(yàn)證成功? ;false：驗(yàn)證失敗
exec()：匹配數(shù)據(jù)??null：匹配失敗;? 偽數(shù)組：匹配成功
2.規(guī)則
一.元字符
1.邊界符??^起始? ? 結(jié)束$
2量詞
標(biāo)準(zhǔn)
*：0-N次
+：1-N次
?：0或1次
通用? {}
{n}：固定次數(shù)
{n,}：至少n次
{n,m}：n-m區(qū)間次數(shù)
3.字符類
[]：多選1
-：連接符蝗拿，方便快速指定多個(gè)（放[]里面）
a-z
A-Z
0-9
^：取反（[]里面）
.：非換行單個(gè)字符
4.預(yù)定義類
一些常見操作的簡化
\d：[0-9]? ? ?\D：[^0-9]
\w：[a-zA-Z0-9_]? ? ?\W：取反
\s：[\r\n\t\v\f]? ? ?\S：取反
二.修飾符
/表達(dá)式/修飾符
i:非嚴(yán)格模式：不區(qū)分大小寫
g:全局匹配
三.字符替換
replace 替換
語法:? 字符串.replace(/正則表達(dá)式/,'替換的文本')
經(jīng)典用法:過濾敏感字
