承德網(wǎng)站制作多少錢高質(zhì)量軟文
目錄
1 DOM修改元素內(nèi)容
2 DOM修改元素常見屬性
3 修改元素樣式屬性
3.1 通過style修改元素樣式
3.2 通過類名className修改元素樣式
3.3 通過classList修改元素樣式
4?操作表單元素屬性
5 自定義屬性
6 定時器
7 事件監(jiān)聽
7.1 點擊事件 click
7.2 鼠mouseenter和移開事件mouseleave
7.3 焦點事件
7.4 鍵盤事件
7.5 用戶輸入事件 input
8 事件對象
8.1 通過事件對象獲取按下了哪個鍵
9 補充
10?環(huán)境對象 this
11 回調(diào)函數(shù)
12 補充：偽類選擇器
13 事件流
13.1 事件捕獲
13.2 事件冒泡
13.3 阻止冒泡
14 解綁事件
14.1 onclick() 方法如何解綁事件
14.2?addEventListener() 方法解綁事件
15?事件委托
16 阻止默認行為
17 頁面加載事件
18?頁面滾動事件
18.1 元素滾動事件
18.2?頁面尺寸事件
18.3?元素的尺寸和位置
18.3.1 獲取寬高
18.3.2 獲取位置
18.4 總結(jié)
19 補充：屬性選擇器
20 日期對象
20.1 實例化，獲取相應(yīng)的時間
20.2 日期對象中，常用的方法
20.3 獲取當前時間戳
1 DOM修改元素內(nèi)容
const b = document.querySelector('.box')// 1. 對象.innerText = '新的文字內(nèi)容';
b.innerText = '新的文字內(nèi)容'
b.innerText = '<strong></strong>' // 不解析標簽// 2. 對象.innerHTML = '新的文字內(nèi)容';
b.innerHTML = '<strong>我是加粗的文字</strong>' // 解析標簽2 DOM修改元素常見屬性
<div><div class="box">我是文件內(nèi)容</div><img src="./girl.jpg" alt=""></div><script>// 1.修改元素屬性const img = document.querySelector('img');img.src = './girl2.jpg'img.alt = '美女加載失敗'img.title="美女"</script>3 修改元素樣式屬性
3.1 通過style修改元素樣式
<style>.box {width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="box"></div><script>const box = document.querySelector('.box')box.style.width = '200px' // 修改元素的寬度為200px, 一定要帶單位！！！box.style.backgroundColor = 'red' // 修改元素的背景顏色為紅色, 需要用 小駝峰 命名box.style.border = '3px solid black'</script>3.2 通過類名className修改元素樣式
元素.className = '類名'
className: 會覆蓋之前的類的樣式3.3 通過classList修改元素樣式
classList 可以解決覆蓋以前的類名的問題
元素.classList.add('類名') 類名前不用加 .
元素.classList.remove('類名')
元素.classList.toggle('類名') 切換類： 有就刪掉，沒有就加上元素.classList.contains('類名') 看看有沒有包含某個類，包含返回true, 不包含返回false4?操作表單元素屬性
1. 獲取：表單.value2. 設(shè)置：表單.value = '新的值'3. 修改表單的類型<input type="text" value="請輸入用戶名">const input = document.querySelector('input')input.type = 'password'// checked 屬性 disabled 屬性<input type="checkbox" name="" id=""><button>點擊</button><script>const input = document.querySelector('input');console.log(input.value) // 1.獲取表單的值input.value = '222' // 2.修改input的值// input.type = "password" // 2.修改input的類型const input = document.querySelector('input')console.log(input.checked) // 獲取input的選中狀態(tài)input.checked = true // 修改input的選中狀態(tài)const button = document.querySelector('button')button.addEventListener('click', function() {button.disabled = true // 禁用按鈕})</script>5 自定義屬性
// data- 開頭的全部都是自定義屬性<div data-id="1" data-spm="hhh" data-scm="yyy">01</div> <div data-id="2">02</div><div data-id="3">03</div><div data-id="4">04</div><div data-id="5">05</div><script>const one = document.querySelector('div')console.log(one.dataset.id) // 通過這個獲取自定義屬性的值console.log(one.dataset.spm)</script>6 定時器
<script>// setInterval(函數(shù), 時間) 時間單位為毫秒let time= setInterval(function() {console.log('hello world') // 每隔3秒執(zhí)行一次函數(shù)，函數(shù)內(nèi)容為打印hello world;},3000)// 上述定時器賦給變量time， 返回的是數(shù)字型，是定時器的id 號，每個定時器都是獨一無二的clearInterval(time) // 清除定時器，傳入定時器的id號</script>7 事件監(jiān)聽
語法：
? ? 元素對象.addEventListener('事件類型', 事件處理函數(shù))
下面的事件直接給出實例?
7.1 點擊事件 click
隨機點名案例：
?
js中也有可以直接調(diào)用的點擊事件? ?click()
7.2 鼠mouseenter和移開事件mouseleave
7.3 焦點事件
7.4 鍵盤事件
7.5 用戶輸入事件 input
通過input事件，可以實時獲取到用戶輸入的內(nèi)容
8 事件對象
8.1 通過事件對象獲取按下了哪個鍵
e.key?
9 補充
處理字符串的方法 trim()：去除字符串前后空格 ?如果用戶輸入的是空格，則直接清空，值就變?yōu)榭樟?/p>
當頁面中有滾動事件時，讓其絲滑滾動?
10?環(huán)境對象 this
function fn() {console.log(this)// 1. 普通函數(shù)中，this 指向window
}const btn = document.querySelector('button')
btn.addEventListener('click', fn) {// 2. 事件處理函數(shù)中，this 指向事件源對象console.log(this) // 這邊this指向button
}總結(jié)：this指向函數(shù)的調(diào)用者?
11 回調(diào)函數(shù)
12 補充：偽類選擇器
:checked
13 事件流
事件流的兩個階段：
? ? 1.捕獲階段：從外向內(nèi)（父到子）
? ? 2.冒泡階段：從內(nèi)向外（子到父）
13.1 事件捕獲
<!-- 1.事件捕獲 --><div class="fan"><div class="son"></div></div><script>const fan = document.querySelector('.fan')const son = document.querySelector('.son')document.addEventListener('click', function() {alert('點擊了頁面')},true) // true 表示事件捕獲， 若為false 表示事件冒泡，默認為falsefan.addEventListener('click', function() {alert('點擊了父元素')},true)son.addEventListener('click', function() {alert('點擊了子元素')},true)</script>13.2 事件冒泡
13.3 阻止冒泡
語法：
? ? 事件對象.stopPropagation()
? （此方法可以阻斷事件流動傳播，不光在冒泡階段有效，捕獲階段也有效）
? ? ?e.stopPropagation() ?// 阻止事件冒泡
14 解綁事件
14.1 onclick() 方法如何解綁事件
14.2?addEventListener() 方法解綁事件
removeEventListener()
15?事件委托
優(yōu)點：減少了事件的注冊次數(shù)，可以提高程序性能
原理：事件委托其實是利用事件冒泡的特點
--->>>??給父元素注冊事件，當我們觸發(fā)子元素的時候，會冒泡到父元素的身上，從而觸發(fā)父元素的事件
<ul><li>第1個孩子</li><li>第2個孩子</li><li>第3個孩子</li><li>第4個孩子</li><li>第5個孩子</li><p>uuu</p></ul><script>// 1.獲取父元素const ul = document.querySelector('ul')ul.addEventListener('click', function(e) {// alert('點擊了li')// e.target 獲取當前點擊的對象e.target.style.backgroundColor = 'red' // 改變點擊的li的背景顏色為紅色// 我們指向點擊li進行變色, 不讓標簽p 變色// 2.判斷點擊的元素是否為li 可以指定元素對象進行變色if (e.target.tagName === 'LI') { // tagName 獲取標簽名// 3.是li 修改背景顏色e.target.style.backgroundColor = 'pink'}})</script>16 阻止默認行為
e.preventDefault()? ?->? 注意和前面的阻止冒泡區(qū)分下
<form action="http://www.itcast.cn"><input type="submit" value="免費注冊"></form><a href="http://www.baidu.com">百度</a><script>const form = document.querySelector('form') // 獲取form元素form.addEventListener('submit', function(e) {e.preventDefault() // 阻止默認行為 })const a = document.querySelector('a')a.addEventListener('click', function(e) {e.preventDefault() // 阻止默認行為 })</script>17 頁面加載事件
<button>按鈕</button><script>// 1.頁面加載事件// 1.1 等到資源都加載完了，在執(zhí)行js代碼，這樣的話script標簽可以放在頁面的任何位置// 等待頁面所有資源都加載完畢了，就回去執(zhí)行回調(diào)函數(shù)window.addEventListener('load', function(){const btn = document.querySelector('button')btn.addEventListener('click', function() {alert('點擊了')})})// 1.2 也可以等待具體的元素加載完畢，再去執(zhí)行相應(yīng)的代碼// 等待id為one的元素加載完畢，再去執(zhí)行回調(diào)函數(shù)img.addEventListener('load', function(){//...})// 1.3 DOMContentLoaded事件// 只等待dom結(jié)點加載完畢，不等待圖片、視頻等資源加載完畢document.addEventListener('DOMContentLoaded', function(){//...})// 注意：DOMContentLoaded事件比load事件更快一些</script>18?頁面滾動事件
18.1 元素滾動事件
scrollLeft 和 scrollTop 屬性可以獲取頁面滾動的位置，scrollLeft獲取水平滾動的位置，scrollTop獲取垂直滾動的位置。
<script>window.addEventListener('scroll', function(){console.log('滾動了')// 1.獲取頁面滾動到哪個位置// scrollLeft 和 scrollTop 屬性可以獲取頁面滾動的位置，scrollLeft獲取水平滾動的位置，scrollTop獲取垂直滾動的位置。// 注意：這兩個屬性只有當有滾動條的時候才能獲取到值，否則獲取到的都是0// 獲取被卷去的大小// 獲取元素內(nèi)容往左 往上滾出去看不到的距離// 這兩個值是可讀寫的const div = document.querySelector('div')console.log(div.scrollTop)// 2. 獲取html元素的寫法// document.documentElement.scrollTop 檢測頁面被卷去的距離console.log(document.documentElement.scrollTop) // html滾動的位置// 3. 返回頂部const backToTop = document.querySelector('backToTop') // 獲取返回頂部的元素// 給返回頂部元素添加點擊事件，點擊時把頁面滾動到頂部位置，滾動到0的位置，就是滾動到頂部位置。backToTop.addEventListener('click', function(){// 設(shè)置滾動的位置document.documentElement.scrollTop = 0// 或者// window.scrollTo(0, 0)})})</script>18.2?頁面尺寸事件
clientWidth 和 clientHeight 屬性可以獲取元素可見部分的寬度和高度
<div></div><script>// 1. clientWidth 和 clientHeight 屬性可以獲取元素可見部分的寬度和高度。const div = document.querySelector('div') // 獲取div元素console.log(div.clientWidth) // 獲取div元素的可見部分的寬度console.log(div.clientHeight) // 獲取div元素的可見部分的高度// resize 事件會在窗口或框架被調(diào)整大小時觸發(fā)。window.addEventListener('resize', function(){console.log(document.documentElement.clientWidth);})</script>18.3?元素的尺寸和位置
18.3.1 獲取寬高
?offsetWidth 和 offsetHeight:
? ? ? ? 1.獲取元素的自身寬高,包含元素自身設(shè)置的寬高, padding, border等
? ? ? ? 2. 注意:獲取的是可視寬高,如果盒子是隱藏的,獲取的結(jié)果是 0,
18.3.2 獲取位置
方式1：offsetLeft 和 offsetTop
獲取元素距離自己定位父級元素的左, 上距離：offsetLeft 和 offsetTop 為只讀屬性。比如一個窗口中有兩個盒子,小盒子在大盒子的里面,如果,大盒子有定位; 那么小盒子相對于大盒子定位,小盒子距離大盒子左, 上距離; 如果大盒子沒有定位,那么小盒子相對于窗口定位,小盒子距離窗口左, 上距離;
方式2：getBoundingClientRect()
element.getBoundingClientRect() 方法返回元素的大小及其相對于視口的位置。
18.4 總結(jié)
19 補充：屬性選擇器
20 日期對象
20.1 實例化，獲取相應(yīng)的時間
// 1.得到當前時間const date = new Date()console.log(date)// 2.得到指定時間const date1 = new Date('2024-01-01 00:00:00')console.log(date1)?20.2 日期對象中，常用的方法
// 1. 日期對象的一些方法let year = date.getFullYear()let month = date.getMonth() + 1let day = date.getDate()let hours = date.getHours()let minutes = date.getMinutes()let seconds = date.getSeconds()let xq = date.getDay() // 0-6 0代表周日// console.log(year, month, day, hours, minutes, seconds)// 月份和天數(shù)前面補零操作month = month < 10 ? '0' + month : monthday = day < 10 ? '0' + day : dayconsole.log(`${year}-${month}-${day}`)// 2. 也可以通過這種方式獲取簡單形式的時間console.log(date.toLocaleString()) // 2024/1/20 20:14:26console.log(date.toLocaleDateString()) // 2024/1/20console.log(date.toLocaleTimeString()) // 20:14:5120.3 獲取當前時間戳
因為時間是不方便相加減的，所以我們需要獲取當前時間或指定時間對應(yīng)的時間戳（單位為毫秒），利用時間戳來相加減，典型案例就是倒計時案例
// 方式1： getTime()// 用這種方法首先需要實例化日期對象const date2 = new Date()const time1 = date2.getTime()// console.log(time1)console.log('--------------')// 方式2： +new Date()console.log(+new Date())// 返回指定時間的時間戳console.log(+new Date('2024-01-01 18:30:00'))console.log('--------------')// 方式3： Date.now()console.log(Date.now())// 但是這種方式只能得到當前的時間戳，而前面兩種方式可以得到指定時間的時間戳
注意上述的天時分秒是如何換算得到的