山西做網(wǎng)站的公司營銷技巧培訓(xùn)ppt
Web APIs 1
- 引入:const優(yōu)先
- Web API 基本認(rèn)知
- 01 作用和分類
- 02 什么是DOM
- 03 DOM樹
- 04 DOM對象
- 獲取DOM對象
- 01 根據(jù)CSS選擇器獲取
- 02 其他獲取DOM元素方法
- 操作元素內(nèi)容
- 01 innerText 屬性
- 02 innerHTML 屬性
- 操作元素屬性
- 操作元素的常用屬性
- 操作元素的樣式屬性
- 操作表單元素的屬性
- 自定義屬性
- 定時器-間歇函數(shù)
- 案例:閱讀注冊協(xié)議
- 案例:輪播圖定時器版
ECMAScript 簡稱 ES 它提供了一套語言標(biāo)準(zhǔn)規(guī)范,如變量、數(shù)據(jù)類型、表達(dá)式、語句、函數(shù)等語法規(guī)則都是由 ECMAScript 規(guī)定的。瀏覽器將 ECMAScript 大部分的規(guī)范加以實現(xiàn),并且在此基礎(chǔ)上又?jǐn)U展一些實用的功能,這些被擴(kuò)展出來的內(nèi)容我們稱為 Web APIs。
引入:const優(yōu)先
const 優(yōu)先
- const 語義化更好
- 很多變量我們聲明的時候就知道他不會被更改了,那為什么不用 const呢?
- 實際開發(fā)中也是,比如react框架,基本const
- 也可以有了變量先給const,如果發(fā)現(xiàn)它后面是要被修改的,再改為let
請判斷下面的變量是否能從let改成const
//不不不不不可以把let 改為 const
//因為變量進(jìn)行了重新賦值
let num = 1
num = num + 1
console.log(num)
//可以把let 改為 const
let arr = ['red', 'green']
arr.push('pink')
console.log(arr)
//可以把let 改為 const
let person = {uname: 'pink'age: 18gender: '女'
}
person.address = '武漢黑馬'
console.log(person)
// 這是錯的
const arr = ['red', 'blue']
arr = [1, 2]
數(shù)組和對象是引用類型,里面存儲的是地址,只要地址不變,就不會報錯
建議數(shù)組和對象使用const來聲明
Web API 基本認(rèn)知
01 作用和分類
作用:就是使用 JS 去操作 html 和瀏覽器
分類:DOM (文檔對象模型)、BOM(瀏覽器對象模型)
02 什么是DOM
DOM(Document Object Model——文檔對象模型)是用來呈現(xiàn)以及與任意 HTML 或 XML文檔交互的API
白話文:DOM是瀏覽器提供的一套專門用來 操作網(wǎng)頁內(nèi)容 的功能
DOM作用: 開發(fā)網(wǎng)頁內(nèi)容特效和實現(xiàn)用戶交互
03 DOM樹
將 HTML 文檔以樹狀結(jié)構(gòu)直觀的表現(xiàn)出來,我們稱之為文檔樹或 DOM 樹
描述網(wǎng)頁內(nèi)容關(guān)系的名詞
作用:文檔樹直觀的體現(xiàn)了標(biāo)簽與標(biāo)簽之間的關(guān)系
最大的document節(jié)點,整個頁面是一個文件,
04 DOM對象
- DOM對象:瀏覽器根據(jù)html標(biāo)簽生成的 JS對象(只要是對象就會有屬性和方法)
? 所有的標(biāo)簽屬性都可以在這個對象上面找到
? 修改這個對象的屬性會自動映射到標(biāo)簽身上
- DOM的核心思想
? 把網(wǎng)頁內(nèi)容當(dāng)做對象來處理
//在HTML里面叫標(biāo)簽
<div></div>//在JS里叫DOM對象
const div = document.querySelector('div')
console.dir(div)
-
document 對象
DOM里面最大的對象是document對象
? 是 DOM 里提供的一個對象
? 所以它提供的屬性和方法都是用來訪問和操作網(wǎng)頁內(nèi)容的
? 例:document.write()
? 網(wǎng)頁所有內(nèi)容都在document里面
獲取DOM對象
01 根據(jù)CSS選擇器獲取
1、選擇匹配的第一個元素
語法:
document.querySelector('css選擇器')
頁面所有的內(nèi)容都在document對象中存放,可以通過document
參數(shù):
包含一個或多個有效的CSS選擇器 字符串
返回值:
CSS選擇器匹配的第一個元素,一個 HTMLElement對象。
如果沒有匹配到,則返回null
- 示例
<body><div class="box">111</div><div class="box">222</div><script>const box = document.querySelector('div');const box2 = document.querySelector('.box');console.log('==');console.log(box);console.log(box2);</script>
</body>
注意只能獲取第一個div
<body><p id="nav"></p><script>const nav = document.querySelector('#nav')const nav2 = document.querySelector('p')console.log(nav);console.log(nav2);</script>
</body>
注意 這里 id和class 是不一樣的
<body><ul><li>測試</li><li>測試</li><li>測試</li></ul><script>const li = document.querySelector('ul li')</script>
2、選擇匹配的多個元素
語法:
document.querySelectorAll('css選擇器')
參數(shù):
包含一個或多個有效的CSS選擇器 字符串
返回值:
CSS選擇器匹配的NodeList 對象集合
得到的是一個偽數(shù)組:有長度有索引號的數(shù)組,但是沒有 pop() push() 等數(shù)組方法。想要得到里面的每一個對象,則需要遍歷(for)的方式獲得。
注意:哪怕只有一個元素,通過querySelectAll() 獲取過來的也是一個偽數(shù)組,里面只有一個元素而已
- 案例
document.querySelectorAll('ul li')
<body><ul class="nav"><li>我的首頁</li><li>產(chǎn)品介紹</li><li>聯(lián)系方式</li></ul><script>const nav = document.querySelector('.nav')const lis = document.querySelectorAll('ul li')for(let i=0; i<lis.length; i++) {console.log(lis[i]); // 每一個小li對象}</script>
</body>
02 其他獲取DOM元素方法
<div id="nav"></div><div class="w"></div>document.getElementById('nav')
document.getElementsByClassName('w')
document.getElementsByTagName('div')
操作元素內(nèi)容
在獲取了DOM對象之后,希望能修改元素的文本更換內(nèi)容
-
DOM對象都是根據(jù)標(biāo)簽生成的,所以操作標(biāo)簽,本質(zhì)上就是操作DOM對象。
-
就是操作對象使用的點語法。
-
如果想要修改標(biāo)簽元素的里面的內(nèi)容,則可以使用如下幾種方式
- 對象.innerText 屬性
- 對象.innerHTML 屬性
01 innerText 屬性
將文本內(nèi)容添加/更新到任意標(biāo)簽位置
顯示純文本,不解析標(biāo)簽
<body><div class="box">我是文字內(nèi)容</div><script>// 1、獲取元素const box = document. querySelector('.box')// 2、修改文字內(nèi)容console.log(box.innerText) //獲取文字內(nèi)容box.innerText = '我是一個盒子'</script>
</body>
02 innerHTML 屬性
將文本內(nèi)容添加/更新到任意標(biāo)簽位置
會解析標(biāo)簽,多標(biāo)簽建議使用模板字符
<body><div class="box">我是文字內(nèi)容</div><script>// 1、獲取元素const box = document. querySelector('.box')// 2、修改文字內(nèi)容// INNERHTMLconsole.log(box.innerHTML);box.innerHTML = '<strong>我是一個盒子</strong>'</script>
</body>
- 案例 年會抽獎案例
需求:從數(shù)組隨機(jī)抽取一等獎、二等獎和三等獎,顯示到對應(yīng)的標(biāo)簽里面。
思路分析:
① 聲明數(shù)組
② 實現(xiàn)隨機(jī)抽取人
③ innerHTML修改
<body><div class="wrapper"><strong>傳智教育年會抽獎</strong><h1>一等獎:<span id="one">???</span></h1><h3>二等獎:<span id="two">???</span></h3><h5>三等獎:<span id="three">???</span></h5></div><script>let names = ['周杰倫', '劉德華', '周星馳', 'Pink老師', '張學(xué)友']const random = Math.floor(Math.random()*names.length)// console.log(names[random]);const one = document.querySelector('#one')one.innerHTML = names[random]names.splice(random, 1)</script>
</body>
操作元素屬性
操作元素的常用屬性
常用的屬性比如:href, title, src
比如在HTML中 img是圖片標(biāo)簽,JS中是圖像對象,其中有src屬性
語法 :對象.屬性 = 值
注:如果原本有這個屬性,就修改;如果無,就新增。
-
案例
需求:刷新頁面,頁面隨機(jī)顯示不同的圖片
分析:
①:隨機(jī)顯示,則需要用到隨機(jī)函數(shù)
②:更換圖片需要用到圖片的 src 屬性,進(jìn)行修改
③:核心思路:
- 獲取圖片元素
- 隨機(jī)得到圖片序號
- 圖片.src = 圖片隨機(jī)路徑
<body><img src="./images/1.webp" alt=""><script>// 取到 N ~ M 的隨機(jī)整數(shù)function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}// 1. 獲取圖片對象const img = document.querySelector('img')// 2. 隨機(jī)得到序號const random = getRandom(1, 6)// 3. 更換路徑img.src = `./images/${random}.webp`</script>
</body>
操作元素的樣式屬性
學(xué)習(xí)路徑:
- 通過 style 屬性操作CSS(適用于樣式比較少的情況)
- 操作類名(className) 操作CSS(多個類名操作麻煩)
- ?通過 classList 操作類控制CSS,三個方法 add remove toggle
1 通過 style 屬性操作CSS
語法:對象.style.樣式屬性 = 值
這里修改之后變成行內(nèi)樣式,優(yōu)先級高
注意事項:
? ① 修改樣式通過style屬性引出
? ② 如果屬性有-連接符,需要轉(zhuǎn)換為小駝峰命名法。比如background-color 寫成backgroundColor
? ③ 賦值的時候,需要的時候不要忘記加css單位
<body><div class="box"></div><script>// 獲取對象const box = document.querySelector('.box')// 修改樣式box.style.height = '900px' //注意這里不能漏掉單位// box.style.background-color = 'red'; 這里是錯的box.style.backgroundColor = 'red'// 解決方式是小駝峰命名法</script>
</body>
<style>.box {width: 200px;height: 200px;background-color: pink;}
</style>
- 案例:頁面刷新,頁面隨機(jī)更換背景圖片
需求:當(dāng)我們刷新頁面,頁面中的背景圖片隨機(jī)顯示不同的圖片
分析:
①: 隨機(jī)函數(shù)
②: css頁面背景圖片 background-image
③: 標(biāo)簽選擇body, 因為body是唯一的標(biāo)簽,可以直接寫 document.body.style
2 操作類名(className) 操作CSS
如果修改的樣式比較多,直接通過style屬性修改比較繁瑣,我們可以通過借助于css類名的形式。
語法:元素.className = ‘a(chǎn)ctive’
// active是一個css類名
注意:
- 由于class是關(guān)鍵字, 所以使用className去代替
- className是使用新值換舊值, 如果需要添加一個類,需要保留之前的類名
- 直接使用 className 賦值會覆蓋以前的類名
<body><div class="mybox"></div>
</body><style>.mystyle {width: 300px;height: 300px;margin: 100px auto;border: 1px solid black;}.color {background-color: red;}
</style><script>const mybox = document.querySelector('.mybox');mybox.className = 'mystyle'</script>
如果相同添加 mystyle color,只需要 mybox.className = 'mystyle color'
即可
3 通過 classList 操作類控制CSS
為了解決className 容易覆蓋以前的類名,我們可以通過classList方式追加和刪除類名
語法:
// 追加一個類
元素.classList.add(‘類名’)
// 刪除一個類
元素.classList.remove(‘類名’)
// 切換一個類:有就刪掉,沒有就加上
元素.classList.toggle(‘類名’)
-
案例:輪播圖簡易版
①:頁面一刷新,圖片會隨機(jī)變換
②:底部盒子背景顏色和文字內(nèi)容會變換
③:小圓點隨機(jī)一個高亮顯示
分析:
①: 準(zhǔn)備一個數(shù)組對象,里面包含詳細(xì)信息(素材包含)
②: 隨機(jī)選擇一個數(shù)字,選出數(shù)組對應(yīng)的對象,更換圖片,底部盒子背景顏色,以及文字內(nèi)容
③: 利用這個隨機(jī)數(shù)字,讓小圓點添加高亮的類(addClass) 利用css 結(jié)構(gòu)偽類選擇器
<body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>對人類來說會不會太超前了?</p><ul class="slider-indicator"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// 1. 初始數(shù)據(jù)const sliderData = [{ url: './images/slider01.jpg', title: '對人類來說會不會太超前了?', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說!', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo廚出現(xiàn)了!', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉剛:讓世界通過B站看到東方大國文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解決你的電腦配置問題!!!', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '誰不想和小貓咪貼貼呢!', color: 'rgb(99, 72, 114)' },]// 圖片、文字、背景顏色、li都要修改//隨機(jī)選中哪一個數(shù)據(jù)function getRandom(N, M) {return Math.floor(Math.random() * (M - N + 1)) + N}const random = getRandom(1,8)// 修改圖片const img = document.querySelector('.slider-wrapper img')img.src = sliderData[random].url// 修改文字const p = document.querySelector('.slider-footer p')p.innerHTML = sliderData[random].title //修改背景顏色const footer = document.querySelector('.slider-footer')footer.style.backgroundColor = sliderData[random].color//修改liconst lis = document.querySelectorAll('.slider-indicator li')lis[random-1].classList.add('active') //這里也可以用 li:ntd-child// const li = document.querySelector(`.slider-indicator li:nth-child(${random})`)// li.classList.add('active') </script>
</body>
操作表單元素的屬性
操作 表單元素 的屬性
-
表單很多情況,也需要修改屬性,比如點擊眼睛,可以看到密碼,本質(zhì)是把表單類型轉(zhuǎn)換為文本框
-
正常的有屬性有取值的 跟其他的標(biāo)簽屬性沒有任何區(qū)別
操作方法
獲取: DOM對象.屬性名
設(shè)置: DOM對象.屬性名 = 新值
表單的重要屬性:value 和 type
value是表單的值,單標(biāo)簽的值;如果是雙標(biāo)簽的內(nèi)容就是innerHTML,button是雙標(biāo)簽,所以不是value,而是innerHTML
<body><input type="text" value="電腦">
</body><script>// step 1 獲取元素const uname = document.querySelector('input')// step 2 獲取值:獲取表單里面的值 用的是表單.valueconsole.log(uname.value);console.log(uname.innerHTML); //innerHTML得不到表單的內(nèi)容// step 3 修改值uname.type = 'password'
</script>
表單屬性中添加就有效果,移除就沒有效果,一律使用布爾值表示 如果為true 代表添加了該屬性 如果是false 代表移除了該屬性
例如表單的 disabled、checked、selected
<body><input type="checkbox">
</body><script>const ipt = document.querySelector('input')console.log(ipt.checked) // checked默認(rèn)falseipt.checked = true
</script>
注意這里 ipt.checked = ’true‘ 還是會有效果,但是不提倡。因為字符串里面只有空字符串著一種情況才為 false,其余的全部為 true
<body><button>點擊</button>
</body><script>const button = document.querySelector('button')button.disabled = true
</script>
自定義屬性
標(biāo)準(zhǔn)屬性:
標(biāo)簽天生自帶的屬性 比如class id title等, 可以直接使用點語法操作比如: disabled、checked、selected
自定義屬性:
在html5中推出來了專門的data-自定義屬性
在標(biāo)簽上一律以 data- 開頭
在DOM對象上一律以dataset 對象方式獲取
- 示例
<body><div data-id="1" data-spm="haha" data-haha="aa">1</div><div data-id="2">2</div><div data-id="3">3</div><div data-id="4">4</div><div data-id="5">5</div>
</body>
<script>const one = document.querySelector('div') // 獲取第一個divconsole.log(one.dataset)console.log(one.dataset.id)console.log(one.dataset.spm)console.log(one.dataset.haha)
</script>
定時器-間歇函數(shù)
引入:
網(wǎng)頁中經(jīng)常會需要一種功能:每隔一段時間需要自動執(zhí)行一段代碼,不需要我們手動去觸發(fā)。例如:網(wǎng)頁中的倒計時
要實現(xiàn)這種需求,需要定時器函數(shù)
定時器函數(shù)有兩種,今天先講間歇函數(shù)
定時器函數(shù)可以開啟和關(guān)閉定時器
1. 開啟定時器
setInterval(函數(shù),間隔時間)
間隔時間單位是毫秒
作用:每隔一段時間調(diào)用這個函數(shù)
注意:
- 舉例
// 方法1 匿名函數(shù)
<script>//setInterval()setInterval(function(){//匿名函數(shù)console.log("一秒執(zhí)行一次");},1000)
</script>// 方法2 函數(shù)
<script>function fn() {console.log("一秒執(zhí)行一次");}setInterval(fn, 1000)//請注意代碼執(zhí)行到這里的時候,會隔一秒之后再第一次打印
</script>
2. 關(guān)閉定時器
場景:輪播圖一般一直在播放,但是用戶鼠標(biāo)放上去之后就應(yīng)該停止
let 變量名 = setInterval(函數(shù),間歇時間) //這里不可以用const
clearInterval(變量名)
let timer = setInterval(function() {console.log('hihihi')
}, 1000)clearInterval(timer)
每一個定時器都有對應(yīng)的一個號,相互獨立
一般不會剛創(chuàng)建就停止,而是滿足一定條件再停止
案例:閱讀注冊協(xié)議
需求:按鈕60秒之后才可以使用
分析:
? ①:開始先把按鈕禁用(disabled 屬性)
? ②:一定要獲取元素
? ③:函數(shù)內(nèi)處理邏輯
? 秒數(shù)開始減減
? 按鈕里面的文字跟著一起變化
? 如果秒數(shù)等于0 停止定時器 里面文字變?yōu)?同意 最后 按鈕可以點擊
<body><textarea name="" id="" cols="30" rows="10">用戶注冊協(xié)議歡迎注冊成為京東用戶!在您注冊過程中,您需要完成我們的注冊流程并通過點擊同意的形式在線簽署以下協(xié)議</textarea><br><button class="btn" disabled>我已經(jīng)閱讀用戶協(xié)議(5)</button></body>
<script>const btn = document.querySelector('.btn')let i = 5let cl = setInterval(function(){i--btn.innerHTML = `我已經(jīng)閱讀用戶協(xié)議(${i})`if(i === 0) {clearInterval(cl) //關(guān)閉定時器btn.disabled = falsebtn.innerHTML = '同意'}},1000)
</script>
案例:輪播圖定時器版
需求:每隔一秒鐘切換一個圖片
<body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>對人類來說會不會太超前了?</p><ul class="slider-indicator"><li class = "active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// 1. 初始數(shù)據(jù)const sliderData = [{ url: './images/slider01.jpg', title: '對人類來說會不會太超前了?', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說!', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo廚出現(xiàn)了!', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉剛:讓世界通過B站看到東方大國文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解決你的電腦配置問題!!!', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '誰不想和小貓咪貼貼呢!', color: 'rgb(99, 72, 114)' },]// 獲取元素const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')//開啟定時器let i = 0setInterval(function() {//剛打開網(wǎng)頁的時候默認(rèn)了第一張圖片,所以定時器應(yīng)該從第二張開始i++i = i % 8// console.log(sliderData[i]);img.src = sliderData[i].urlp.innerHTML = sliderData[i].titlefooter.style.backgroundColor = sliderData[i].color//先刪除以前的active document.querySelector(`.slider-indicator .active`).classList.remove('active')//找出當(dāng)前的 .active然后刪掉,//注意在HTML中一定!!!一定在最開始需要加上 一個 active//只讓當(dāng)前l(fā)i添加 activedocument.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')// 數(shù)組從0開始,小li從1開始}, 1000)</script>
</body></html>