1 DOM操作
1.1 DOM簡介
DOM(document object mode的縮寫) - 文本對(duì)象模型
- document對(duì)象: js會(huì)將整個(gè)當(dāng)前網(wǎng)頁轉(zhuǎn)換成一個(gè)js對(duì)象叫document; 如果想要通過js獲取網(wǎng)頁中的內(nèi)容翼闽，必須通過document來獲炔肝亍（這個(gè)對(duì)象系統(tǒng)自動(dòng)創(chuàng)建，程序員只需要使用）
- document結(jié)構(gòu): 是一個(gè)樹結(jié)構(gòu), document下是body標(biāo)簽節(jié)點(diǎn)，再往下是各個(gè)其它標(biāo)簽節(jié)點(diǎn)(Node, 是js中Element對(duì)象指向的是html中的標(biāo)簽)；Element對(duì)象有哪些屬性淌铐，就看Element對(duì)應(yīng)的標(biāo)簽有哪些html屬性
1.2 DOM節(jié)點(diǎn)操作
1.2.1 獲取節(jié)點(diǎn)
- 直接獲取
- 通過id值來獲取節(jié)點(diǎn): document.getElementById(id屬性值) - 返回是標(biāo)簽對(duì)應(yīng)的節(jié)點(diǎn)對(duì)象
- HTML標(biāo)簽在js全部都是對(duì)象堡掏，標(biāo)簽的屬性就是對(duì)象的屬性购城；雙標(biāo)簽的內(nèi)容對(duì)應(yīng)是innerText和innerHTML屬性
- innerHTML指向的是內(nèi)容的文本和標(biāo)簽吕座； innerText只指向內(nèi)容中的文本
- 通過class值獲取節(jié)點(diǎn):document.getElementsByClassName(class屬性值) - 返回一個(gè)數(shù)組
- 通過標(biāo)簽名獲取節(jié)點(diǎn): document.getElementsByTagName(標(biāo)簽名) - 返回一個(gè)數(shù)組
- 通過name屬性獲取節(jié)點(diǎn)(被淘汰)： document.getElementsByName(name屬性值)
- 通過id值來獲取節(jié)點(diǎn): document.getElementById(id屬性值) - 返回是標(biāo)簽對(duì)應(yīng)的節(jié)點(diǎn)對(duì)象
- 獲取父節(jié)點(diǎn): 節(jié)點(diǎn).parentElement - 獲取指定節(jié)點(diǎn)對(duì)應(yīng)的父節(jié)點(diǎn)
- 獲取子節(jié)點(diǎn)
- 獲取所有子節(jié)點(diǎn): 節(jié)點(diǎn).children - 獲取自定節(jié)點(diǎn)所有的子節(jié)點(diǎn)(不會(huì)獲取孫子節(jié)點(diǎn))
- 獲取第一個(gè)子節(jié)點(diǎn): 節(jié)點(diǎn).firstElementChild
- 獲取最后一個(gè)子節(jié)點(diǎn): 節(jié)點(diǎn).lastElementChild
1.2.2 創(chuàng)建節(jié)點(diǎn)
- document.createElement(標(biāo)簽名) - 創(chuàng)建指定標(biāo)簽對(duì)象的節(jié)點(diǎn)對(duì)象
- 注意: 創(chuàng)建的節(jié)點(diǎn)在沒有添加在網(wǎng)頁中的時(shí)候是不會(huì)顯示的
1.2.3 添加節(jié)點(diǎn)
- 節(jié)點(diǎn)1.appendChild(節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1的最后添加節(jié)點(diǎn)2
- 節(jié)點(diǎn)1.insertBefore(節(jié)點(diǎn)2, 節(jié)點(diǎn)3) - 在節(jié)點(diǎn)1中的節(jié)點(diǎn)3前出入節(jié)點(diǎn)2
1.2.4 拷貝節(jié)點(diǎn)
- 節(jié)點(diǎn).cloneNode() - 賦值指定節(jié)點(diǎn)，產(chǎn)生一個(gè)新的節(jié)點(diǎn)
1.2.5 刪除節(jié)點(diǎn)
- 節(jié)點(diǎn)1.removeChild(節(jié)點(diǎn)2) - 刪除節(jié)點(diǎn)1中的節(jié)點(diǎn)2
- 節(jié)點(diǎn).remove() - 刪除指定節(jié)點(diǎn)
<body>
<p id="p1" class="c1">我是段落</p>
<img class="c1" src="img/luffy.jpg"/>
<div id="div1">
我是div
<p>我是段落2</p>
</div>
<div id="div2">
<h1 id="h1">我是標(biāo)題1</h1>
<h1 id="h2">我是標(biāo)題2</h1>
</div>
<script type="text/javascript">
// 1. 獲取節(jié)點(diǎn)
// 1.1 直接獲取
// a) 通過id值來獲取節(jié)點(diǎn): document.getElementById(id屬性值) - 返回是標(biāo)簽對(duì)應(yīng)的節(jié)點(diǎn)對(duì)象
//補(bǔ)充: HTML標(biāo)簽在js全部都是對(duì)象瘪板，標(biāo)簽的屬性就是對(duì)象的屬性吴趴；雙標(biāo)簽的內(nèi)容對(duì)應(yīng)是innerText和innerHTML屬性
// innerHTML指向的是內(nèi)容的文本和標(biāo)簽； innerText只指向內(nèi)容中的文本
pNode = document.getElementById('p1')
console.log(pNode, typeof(pNode), pNode.id, pNode.innerHTML, pNode.innerText)
divNode = document.getElementById('div1')
console.log('html:',divNode.innerHTML, typeof(divNode.innerHTML))
console.log('text:', divNode.innerText)
// divNode.innerText = "<a
// divNode.innerHTML = "<a
divNode.innerHTML = "<p id='p2'>我是段落3</p>"
//b) 通過class值獲取節(jié)點(diǎn): document.getElementsByClassName(class屬性值) - 返回一個(gè)數(shù)組
c1NodeArray = document.getElementsByClassName('c1')
console.log(c1NodeArray)
//根據(jù)下標(biāo)獲取元素
imgNode = c1NodeArray[1]
imgNode.title = '路飛'
//c) 通過標(biāo)簽名獲取節(jié)點(diǎn): document.getElementsByTagName(標(biāo)簽名) - 返回一個(gè)數(shù)組
pNodes = document.getElementsByTagName('p')
console.log(pNodes)
//d)通過name屬性獲取節(jié)點(diǎn)(被淘汰)： document.getElementsByName(name屬性值)
//document.getElementsByName()
//1.2獲取父節(jié)點(diǎn)
// 節(jié)點(diǎn).parentElement - 獲取指定節(jié)點(diǎn)對(duì)應(yīng)的父節(jié)點(diǎn)
bodyNode = pNode.parentElement
console.log(bodyNode)
//1.3獲取子節(jié)點(diǎn)
//a)獲取所有子節(jié)點(diǎn): 節(jié)點(diǎn).children - 獲取自定節(jié)點(diǎn)所有的子節(jié)點(diǎn)(不會(huì)獲取孫子節(jié)點(diǎn))
children1 = bodyNode.children
console.log(children1)
//b)獲取第一個(gè)子節(jié)點(diǎn): 節(jié)點(diǎn).firstElementChild
firstNode = bodyNode.firstElementChild
console.log(firstNode)
//c)獲取最后一個(gè)子節(jié)點(diǎn): 節(jié)點(diǎn).lastElementChild
lastNode = bodyNode.lastElementChild
console.log(lastNode)
// 2.創(chuàng)建節(jié)點(diǎn)
//document.createElement(標(biāo)簽名) - 創(chuàng)建指定標(biāo)簽對(duì)象的節(jié)點(diǎn)對(duì)象
//注意: 創(chuàng)建的節(jié)點(diǎn)在沒有添加在網(wǎng)頁中的時(shí)候是不會(huì)顯示的
inputNode = document.createElement('input')
//3.添加節(jié)點(diǎn)
div2Node = document.getElementById('div2')
// 節(jié)點(diǎn)1.appendChild(節(jié)點(diǎn)2) - 在節(jié)點(diǎn)1的最后添加節(jié)點(diǎn)2
div2Node.appendChild(inputNode)
// 節(jié)點(diǎn)1.insertBefore(節(jié)點(diǎn)2, 節(jié)點(diǎn)3) - 在節(jié)點(diǎn)1中的節(jié)點(diǎn)3前出入節(jié)點(diǎn)2
div2Node.insertBefore(inputNode, div2Node.firstElementChild)
// 4.拷貝節(jié)點(diǎn)
// 節(jié)點(diǎn).cloneNode() - 賦值指定節(jié)點(diǎn)侮攀，產(chǎn)生一個(gè)新的節(jié)點(diǎn)
inputNode2 = inputNode.cloneNode()
inputNode2.placeholder = '新節(jié)點(diǎn)'
div2Node.appendChild(inputNode2)
//5.刪除節(jié)點(diǎn)
//a)節(jié)點(diǎn)1.removeChild(節(jié)點(diǎn)2) - 刪除節(jié)點(diǎn)1中的節(jié)點(diǎn)2
div2Node.removeChild(div2Node.firstElementChild)
//b)節(jié)點(diǎn).remove() - 刪除指定節(jié)點(diǎn)
div2Node.remove()
</script>
</body>
練習(xí) 有個(gè)三行三列的表格锣枝，實(shí)現(xiàn)以下功能
- 用js將table的背景顏色設(shè)置為隨機(jī)顏色
- 將第一列的文字顏色全部變成紅色
- 在最后插入一行表格，內(nèi)容分別是 41兰英，42撇叁，43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="t1" border="" cellspacing="" cellpadding="">
<tr id="tr1">
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr id="tr2">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr id="tr3">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<script type="text/javascript">
/*
//產(chǎn)生1-10的隨機(jī)整數(shù)
randomNum = parseInt(Math.random()*9+1)
console.log(randomNum)
//產(chǎn)生0-255的隨機(jī)整數(shù)
randomNum = parseInt(Math.random()*255)
console.log(randomNum)
*/
//1)用js將table的背景顏色設(shè)置為隨機(jī)顏色
//獲取table節(jié)點(diǎn)
tableNode = document.getElementById('t1')
//產(chǎn)生隨機(jī)顏色值
red = parseInt(Math.random()*255)
green = parseInt(Math.random()*255)
blue = parseInt(Math.random()*255)
//設(shè)置背景顏色屬性
tableNode.style.backgroundColor = 'rgba('+red+','+green+','+blue+','+'0.1)'
//2)將第一列的文字顏色全部變成紅色
//拿所有的tr
trNodes = document.getElementsByTagName('tr')
console.log(trNodes)
for(x in trNodes){
console.log(x,"length")
if(x == 'length'){
break
}
//獲取每個(gè)tr
trNode = trNodes[x]
//獲取每一行的第一個(gè)td
tdNode = trNode.firstElementChild
//修改文字顏色
//tdNode.style.color = 'red'
tdNode.style = 'color:red; font-size:25px'
}
//3)在最后插入一行表格，內(nèi)容分別是 41畦贸，42陨闹，43
trNode = document.createElement('tr')
tdNode = document.createElement('td')
tdNode.innerText = '41'
trNode.appendChild(tdNode)
tdNode = tdNode.cloneNode()
tdNode.innerText = '42'
trNode.appendChild(tdNode)
tdNode = tdNode.cloneNode()
tdNode.innerText = '43'
trNode.appendChild(tdNode)
// for(x=1;x<=3;x++){
// tdNode = document.createElement('td')
// tdNode.innerText = '4'+x
// trNode.appendChild(tdNode)
// }
//
tableNode.appendChild(trNode)
</script>
</body>
</html>
2 BOM操作
2.1 什么是BOM
- BOM(browser object model)瀏覽器對(duì)象模型
- js自帶一個(gè)window對(duì)象，指向當(dāng)前瀏覽器薄坏；js中所有的全局變量都是綁定在window對(duì)象上的屬性
- 在使用的時(shí)候趋厉，window可以省略
2.2 window基本操作
2.2.1 打開新的窗口：open(url, name屬性, 窗口大小 )
- 打開新的窗口: open(url) - 在新的窗口中打開新頁面
- 打開新的窗口, 同時(shí)設(shè)置窗口的寬度和高度
2.2.2 關(guān)閉窗口
- 窗口對(duì)象.close()
- window.close() / close() - 關(guān)閉當(dāng)前窗口
- 關(guān)閉其他窗口 窗口對(duì)象.close()
2.2.3 移動(dòng)當(dāng)前窗口 只對(duì)設(shè)置了寬高的窗口有效
窗口對(duì)象.moveTo(x, y)
2.2.4 獲取窗口的寬度和高度
- innerWidth/innerHeight - 獲取瀏覽器能夠顯示內(nèi)容的部分的寬高
- outerWidth/outerHeight - 整個(gè)瀏覽器的寬高
2.2.5 彈框
- 只有確定按鈕再加提示信息的彈框: alert('提示信息!')
- 一個(gè)提示信息，再加確定和取消按鈕胶坠；根據(jù)返回值是true還是false來判斷選擇是確定還是取消: confirm('是否刪除?')
- 一個(gè)提示信息君账，再加一個(gè)輸入框和取消確定按鈕；根據(jù)返回值是否是null來判斷點(diǎn)擊的是取消還是確定: prompt('提示信息','輸入框中默認(rèn)值')
<script type="text/javascript">
//1.什么是BOM
//BOM(browser object model)瀏覽器對(duì)象模型
//js自帶一個(gè)window對(duì)象沈善，指向當(dāng)前瀏覽器乡数；js中所有的全局變量都是綁定在window對(duì)象上的屬性
//在使用的時(shí)候，window可以省略
num = 10 // 相當(dāng)于window.num = 10
console.log(window.num, num)
function func1(){
console.log('我是函數(shù)')
}
window.func1()
//2.window基本操作
//1) 打開新的窗口
//open(url, name屬性, 窗口大小 )
//a）打開新的窗口: open(url) - 在新的窗口中打開新頁面,
//new_window = window.open('https://www.baidu.com')
//console.log(new_window)
//b) 打開新的窗口, 同時(shí)設(shè)置窗口的寬度和高度
//new_window2 = open('https://www.baidu.com','','width=400,height=300')
//2)關(guān)閉窗口
//窗口對(duì)象.close()
//window.close() / close() - 關(guān)閉當(dāng)前窗口
//close()
//關(guān)閉其他窗口
//new_window2.close()
//3)移動(dòng)當(dāng)前窗口
//new_window2.moveTo(100, 100)
//4)獲取窗口的寬度和高度
// innerWidth/innerHeight - 獲取瀏覽器能夠顯示內(nèi)容的部分的寬高
//console.log(new_window2.innerWidth, new_window2.innerHeight)
// outerWidth/outerHeight - 整個(gè)瀏覽器的寬高
//console.log(new_window2.outerWidth, new_window2.outerHeight)
//3.彈框
//1) 只有確定按鈕再加提示信息的彈框
alert('提示信息!')
//2)一個(gè)提示信息闻牡，再加確定和取消按鈕净赴；根據(jù)返回值是true還是false來判斷選擇是確定還是取消
result = confirm('是否刪除?')
console.log(result)
//3)一個(gè)提示信息，再加一個(gè)輸入框和取消確定按鈕罩润；根據(jù)返回值是否是null來判斷點(diǎn)擊的是取消還是確定
result = prompt('提示信息','輸入框中默認(rèn)值')
console.log(result)
</script>
3 定時(shí)事件
3.1 開啟定時(shí)
- setTimeout(函數(shù), 定時(shí)時(shí)間, 實(shí)參列表) - 指定時(shí)間后調(diào)用指定函數(shù)劫侧，并且傳入指定的參數(shù); 返回一個(gè)定時(shí)器對(duì)象
- 函數(shù) - 可以是匿名函數(shù)，也可以是普通函數(shù)的函數(shù)名
- 定時(shí)時(shí)間 - 單位是毫秒
- 實(shí)參列表 - 函數(shù)提供參數(shù)
- setInterval(函數(shù),定時(shí)時(shí)間哨啃，參數(shù)列表) - 每隔指定的時(shí)間調(diào)用一次函數(shù)
3.2 清除定時(shí)
- clearTimeout(定時(shí)對(duì)象)
- clearInterval(定時(shí)對(duì)象)
<script type="text/javascript">
//1. 開啟定時(shí)
t1 = setTimeout(function(){
console.log('時(shí)間到！')
}, 1000)
t2 = setTimeout(function(name, age){
console.log(name, age)
}, 3000, '小明', 18)
//t1和t3的功能一樣
function timeFunc(){
console.log('時(shí)間到了')
}
t3 = setTimeout(timeFunc, 1000)
/*
2)setInterval(函數(shù),定時(shí)時(shí)間写妥，參數(shù)列表) - 每隔指定的時(shí)間調(diào)用一次函數(shù)
*/
num = 1
t4 = setInterval(function(){
num ++
console.log('~~~~:',num)
if(num == 10){
clearInterval(t4)
}
}, 2000)
// 2.清除定時(shí)
//clearTimeout(定時(shí)對(duì)象)
clearTimeout(t2)
//clearInterval(定時(shí)對(duì)象)
</script>
練習(xí)： 實(shí)現(xiàn)5s后自動(dòng)跳轉(zhuǎn)到百度頁面
<body>
<p id="p1">5秒后自動(dòng)跳轉(zhuǎn)</p>
<script type="text/javascript">
time = 5
pNode = document.getElementById('p1')
t1 = setTimeout(function(){
time--
pNode.innerText = time+'秒后自動(dòng)跳轉(zhuǎn)'
if(time == 0){
open('https://www.baidu.com')
clearInterval(t1)
}
}, 1000)
</script>
</body>
4 事件
4.1 事件簡介
- js是事件驅(qū)動(dòng)語言
- 事件三要素: 事件源拳球、事件、事件驅(qū)動(dòng)程序
- 事件源發(fā)送某個(gè)事件就做什么事情(事件驅(qū)動(dòng)程序)
4.2 事件的綁定
- 在標(biāo)簽內(nèi)部給標(biāo)簽的事件屬性賦值
注意: 這種方式綁定的時(shí)候珍特，this指向的是window - 通過給節(jié)點(diǎn)對(duì)象的事件屬性賦值來綁定
注意: 這種方式綁定的時(shí)候祝峻，this指向的是事件源 - 通過addEventListener方法進(jìn)行綁定
- 語法
- 事件源節(jié)點(diǎn).addEventListener(事件名稱,事件驅(qū)動(dòng)程序)
- 說明
- 事件名稱 - 事件屬性名去掉on
- 事件驅(qū)動(dòng)程序 - 事件發(fā)生后需要調(diào)用的函數(shù)
- 注意
- this是事件源
- 可以給同一個(gè)節(jié)點(diǎn)的同一個(gè)事件綁定不同的事件驅(qū)動(dòng)程序
- 語法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--事件綁定方式1（不推薦使用）-->
<button onclick="alert('你好！')">按鈕1</button>
<button id="btn1" onclick="btnClick()">刪除1</button>
<button id="btn2" onclick="btnClick()">刪除2</button>
<br /><br />
<!--事件綁定方式2（推薦使用）-->
<button id="btn3">刪除</button>
<button class="btn1">刪除3</button>
<button class="btn1">刪除4</button>
<button class="btn1">刪除5</button>
<br /><br />
<!--事件綁定方式3（推薦使用）-->
<button id="btn4">按鈕</button>
</body>
</html>
<script type="text/javascript">
// 1) 在標(biāo)簽內(nèi)部給標(biāo)簽的事件屬性賦值
// 注意: 這種方式綁定的時(shí)候，this指向的是window
function btnClick(){
console.log(this)
result = confirm('是否刪除?')
if(result){
document.getElementById('btn1').remove()
}
}
// 2) 通過給節(jié)點(diǎn)對(duì)象的事件屬性賦值來綁定
// 注意: 這種方式綁定的時(shí)候莱找，this指向的是事件源
btnNode = document.getElementById('btn3')
// 給事件屬性賦函數(shù)名
btnNode.onclick = btnClick
//獲取所有class值是btn1的標(biāo)簽對(duì)應(yīng)的節(jié)點(diǎn)
btn1Nodes = document.getElementsByClassName('btn1')
for(x=0;x<btn1Nodes.length;x++){
btn1Node = btn1Nodes[x]
// 給事件屬性賦匿名函數(shù)
btn1Node.onclick = function(){
console.log(this)
result = confirm('是否刪除?')
if(result){
this.remove()
}
}
}
// 3)通過addEventListener方法進(jìn)行綁定
btnNode4 = document.getElementById('btn4')
btnNode4.addEventListener('click', function(){
console.log(this)
alert('你好酬姆！')
})
btnNode4.addEventListener('click', function(){
this.style.color = 'red'
})
</script>
5 常見事件類型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.onload事件 - 頁面加載完成對(duì)應(yīng)的事件(標(biāo)簽加載成功)
window.onload = function(){
//寫在這兒的代碼，在頁面加載完成后才會(huì)執(zhí)行
pNode = document.getElementById('p1')
console.log(pNode)
}
</script>
</head>
<body>
<p id="p1">我是段落</p>
<input type="" name="input1" id="input1" value="" />
<input type="" name="input2" id="input2" value="" />
</body>
</html>
<script type="text/javascript">
//2.鼠標(biāo)事件
pNode = document.getElementById('p1')
// 1)onclick - 鼠標(biāo)點(diǎn)擊事件
pNode.onclick = function(evt){
alert('p標(biāo)簽被點(diǎn)擊')
console.log(evt)
}
//2)onmouseover - 鼠標(biāo)懸停事件
pNode.onmouseover = function(){
//alert('鼠標(biāo)移動(dòng)到標(biāo)簽上')
this.style = 'background-color:yellow'
}
//3) onmouseout - 鼠標(biāo)離開事件
pNode.onmouseout = function(){
this.style = 'background-color:pink'
}
//3.鍵盤事件
//鍵盤事件一般綁定在輸入框?qū)?yīng)的標(biāo)簽上
//1)onkeypress - 按下彈起
inputNode = document.getElementById('input1')
inputNode.onkeypress = function(evt){
console.log('鍵盤按下彈起')
console.log(evt)
}
//2)onkeydown - 按鍵按下 奥溺、 onkeyup - 按鍵彈起
inputNode.onkeydown = function(){
console.log('鍵盤按下')
}
inputNode.onkeyup = function(){
console.log('鍵盤彈起')
}
//4.輸入框事件
//onchange - 輸入框中的輸入內(nèi)容的時(shí)候按回車
inputNode2 = document.getElementById('input2')
inputNode2.onchange = function(evt){
console.log('內(nèi)容發(fā)生改變')
console.log(evt)
}
//oninput - 正在輸入
inputNode2.oninput = function(){
console.log('正在輸入')
}
//5.事件對(duì)象
/*
每個(gè)事件驅(qū)動(dòng)程序中辞色，都可以設(shè)置一個(gè)參數(shù)來表示當(dāng)前事件對(duì)象。不同類型的事件對(duì)應(yīng)事件類型和事件屬性不同
1)鼠標(biāo)事件對(duì)象
clientX/clientY - 鼠標(biāo)的位置到瀏覽器左邊和頂部的距離
offsetX/offsetY - 鼠標(biāo)的位置到事件源標(biāo)簽左邊和頂部的距離
2)鍵盤事件對(duì)象
key - 哪個(gè)按鍵被按下
*/
</script>
