<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<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) 通過(guò)id值來(lái)獲取節(jié)點(diǎn):document.getElementById(id屬性值) - 返回對(duì)應(yīng)的標(biāo)簽節(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)容中的文本
//b)通過(guò)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)通過(guò)標(biāo)簽名獲取節(jié)點(diǎn):document.getElementsByTagName(標(biāo)簽名) - 返回一個(gè)數(shù)組
pNodes = document.getElementsByTagName('p')
//d)通過(guò)name書(shū)信獲取節(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):bodyNode.firstElementChild()
firstNode = bodyNode.firstElementChild()
console.log(firstNode)
//c)獲取最后一個(gè)子節(jié)點(diǎn):節(jié)點(diǎn).bodyNode.lastElementChild()
laseNode = bodyNode.lastElementChild()
console.log(laseNode)
//2.創(chuàng)建節(jié)點(diǎn)
//document.createElement() - 創(chuàng)建指定標(biāo)簽對(duì)象的節(jié)點(diǎn)對(duì)象
//注意:創(chuàng)建的節(jié)點(diǎn)沒(méi)有在添加在網(wǎng)頁(yè)中的是不會(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(inpuutNode)
//節(jié)點(diǎn)1.Div2Node.insertBefore(節(jié)點(diǎn)2, 節(jié)點(diǎn)3) - 在節(jié)點(diǎn)1中的節(jié)點(diǎn)3前插入節(jié)點(diǎn)2
Div2Node.insertBefore(inpuutNode, Div2Node.firstChild)
//4.拷貝節(jié)點(diǎn)
//節(jié)點(diǎn).cloneNode() - 復(fù)制指定節(jié)點(diǎn),產(chǎn)生一個(gè)新節(jié)點(diǎn)
inputNode2 = inpuutNode.cloneNode()
inputNode2.placeholder = '新節(jié)點(diǎn)'
Div2Node.appendChild(inputNode2)
//5.刪除節(jié)點(diǎn)
//a)節(jié)點(diǎn)1.removerChild(節(jié)點(diǎn)) - 刪除節(jié)點(diǎn)1中的節(jié)點(diǎn)2
Div2Node.removeChild(Div2Node.firstElementChild)
//b)節(jié)點(diǎn).remove() - 刪除指定節(jié)點(diǎn)
Div2Node.remove()
pNode = document.getElementById('p1')
console.log(pNode, typeof(pNode), pNode.innerText,pNode.innerHTML)
divNode = document.getElementById('div1')
console.log(divNode.innerHTML)
console.log(divNode.innerText)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM操作</title>
</head>
<body>
<div id="" style="background-color: yellow;height: 1000px;"></div>
</body>
</html>
<script type="text/javascript">
//1.什么是BOM
//BOM(browser object model)瀏覽器對(duì)象模型
//js自帶一個(gè)window對(duì)象,指向當(dāng)前瀏覽器;js中所有的全局變量都是綁定在window上的屬性
//在使用的時(shí)候,window可以省略
num = 10 //相當(dāng)于window.num = 10
console.log(window.num, num)
//2.window基本操作
//1)打開(kāi)新的窗口
//open(url,name屬性,窗口大小)
//a)打開(kāi)新的窗口: open(url) - 在新的窗口中打開(kāi)新頁(yè)面,
// new_window = window.open('https://www.baidu.com')
// console.log(new_window)
//b)打開(kāi)新的窗口,同時(shí)設(shè)置窗口的寬度和高度
// new_window2 = open('','','width=400,height=300')
//2)關(guān)閉窗口
//window.close() / close() - 關(guān)閉當(dāng)前窗口
//close()
//關(guān)閉其他窗口
//new_window2.close()
//3)移動(dòng)窗口
// new_window2.moveTo(100, 100)
//4)獲取窗口寬度和高度
//innerWidth/innerHeight - 獲取瀏覽器能夠顯示內(nèi)容的部分的寬高
console.log(window.innerWidth, window.innerHeight)
//outerWidth/outerHeight - 整個(gè)瀏覽器的寬高
console.log(window.outerWidth, window.outerHeight)
//3.彈框
//1)只有確定按鈕再加提示信息的彈框
window.alert('我打我自己!')
//2)一個(gè)提示信息,再加確定和取消按鈕;根據(jù)返回值是true還是false來(lái)判斷選擇的是確定還是取消
result = confirm('你是否要打自己')
console.log(result)
//3)一個(gè)提示信息,再加一個(gè)輸入框和取消確定按鈕;根據(jù)返回值是否是null來(lái)判斷點(diǎn)擊的是取消還是確定
prompt('提示信息1','提示信息2')
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="tr0" 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>
<!--要求:
1)用js將table的背景顏色設(shè)置為隨機(jī)顏色
2)將第一列的文字顏色全部變成紅色
3)在最后插入一行表格,內(nèi)容分別是41,42,43
-->
<script type="text/javascript">
//產(chǎn)生1-10的隨機(jī)整數(shù)
//randoNuM = parseInt(Math.random()*9+1)
//產(chǎn)生0-255的隨機(jī)整數(shù)
//randoNuM1 = parseInt(Math.random()*255+1)
//console.log(randoNuM1)
//獲取table節(jié)點(diǎn)
tableNode = document.getElementById('tr0')
//產(chǎn)生隨機(jī)顏色值
red = parseInt(Math.random()*256)
green = parseInt(Math.random()*256)
blue = parseInt(Math.random()*256)
//設(shè)置背景屬性
tableNode.style.backgroundColor = 'rgb('+red+','+green+','+blue+')'
//2)將第一列的文字顏色全部變成紅色
//拿所有的tr
trNodes = tableNode.getElementsByTagName('tr0')
for(x in trNodes){
//獲取每個(gè)tr
trNode = trNodes[x]
//獲取每一行的第一個(gè)td
tdNode = trNode.firstElementChild
//修改文字顏色
tdNode.style.color = 'red'
}
trNode = document.createElement('tr')
tdNode = document.createElement('td')
tdNode.innerText = '41'
trNode.appendChild(tdNode)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//開(kāi)啟定時(shí)
//1.setTimeout
/*
setTimeout(函數(shù), 定時(shí)時(shí)間, 實(shí)參對(duì)象) - 指定時(shí)間后調(diào)用指定函數(shù),并且傳入指定的參數(shù),返回一個(gè)定時(shí)器對(duì)象
函數(shù) - 可以是匿名函數(shù),也可以是普通函數(shù)的函數(shù)名
定時(shí)時(shí)間 - 單位是毫秒
實(shí)參列表 - 以對(duì)象的方式給函數(shù)提供參數(shù)
*/
// t1 = setTimeout(function(){
// console.log('我開(kāi)始打我自己')
// },5000)
//
// t2 = setTimeout(function(name, age){
// console.log(name, age)
//
// },5000,age=22, name='我秦始皇打錢')
//t1和t3的功能一樣
// function timeFunc(){
// console.log('endgame')
// }
//
// 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)
num = 5
t5 = setInterval(function(){
num --
console.log(num)
if(num == 0){
clearInterval(t5)
console.log(open('https://www.baidu.com'))
}
},1000)
//2.清楚定時(shí)
//clearTimeout(定時(shí)對(duì)象)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1. 開(kāi)啟定時(shí)
/*
1)setTimeout(函數(shù), 定時(shí)時(shí)間, 實(shí)參列表) - 指定時(shí)間后調(diào)用指定函數(shù),并且傳入指定的參數(shù); 返回一個(gè)定時(shí)器對(duì)象
函數(shù) - 可以是匿名函數(shù)盆犁,也可以是普通函數(shù)的函數(shù)名
定時(shí)時(shí)間 - 單位是毫秒
實(shí)參列表 - 函數(shù)提供參數(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ì)象)
//練習(xí): 實(shí)現(xiàn)5s后自動(dòng)跳轉(zhuǎn)到百度頁(yè)面
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id='p1'>5秒后自動(dòng)調(diào)轉(zhuǎn)</p>
<script type="text/javascript">
time = 5
pNode = document.getElementById('p1')
t1 = setInterval(function(){
time --
if(time == 0){
open('https://www.baidu.com')
clearInterval(t1)
}
pNode.innerText = time+'秒后自動(dòng)跳轉(zhuǎn)'
},1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
<!--事件綁定方式1(不推薦使用)-->
<button onclick="alert('我打我自己')">我打我自己</button>
<button id="btn1" onclick="btnClick()">刪除1</button>
<button id="btn1" onclick="btnClick()">刪除2</button>
<!--事件綁定方式(推薦使用)1-->
<button id='btn3'>刪除</button>
<button class="btn1">刪除3</button>
<button class="btn1">刪除4</button>
<button class="btn1">刪除5</button>
<br/>
<!--事件綁定方式3(推薦使用)-->
<button id="btn4">按鈕</button>
</body>
</html>
<script type="text/javascript">
//js事件驅(qū)動(dòng)語(yǔ)言
//1.事件三要素:事件源谐岁、時(shí)間醋奠、時(shí)間驅(qū)動(dòng)程序
//事件源發(fā)生某個(gè)事件就做什么事情(事件驅(qū)動(dòng)程序)
//2.事件的綁定
//1)在標(biāo)簽內(nèi)部給標(biāo)簽的事件屬性賦值
//注意:這種方式幫的時(shí)候,this指向的是window
function btnClick(){
console.log(this)
result = confirm('我打我自己1')
if(result){
document.getElementById('btn1').remove()
}
}
//2)通過(guò)給節(jié)點(diǎn)對(duì)象的事件屬性賦值來(lái)綁定
//注意:這種方式幫的時(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(){
result = confirm('是否刪除')
if(result){
this.remove()
}
}
}
// 3)
/*
a.語(yǔ)法
事件源節(jié)點(diǎn).addEventListener(事件名稱,事件驅(qū)動(dòng)程序)
b.說(shuō)明
事件名稱 - 事件屬性名去掉on
事件驅(qū)動(dòng)程序 - 事件發(fā)生后需要調(diào)用的函數(shù)
c.注意:
this是事件源
可以給同一個(gè)節(jié)點(diǎn)同一個(gè)事件綁定不同的事件驅(qū)動(dòng)程序
*/
btnNode4 = document.getElementById('btn4')
btnNode4.addEventListener('click', function(){
alert('你好')
})
btnNode4.addEventListener('click', function(){
this.style.color = 'red'
})
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.onload事件 - 頁(yè)面加載完成對(duì)應(yīng)的時(shí)間(標(biāo)簽加載成功)
window.onload = function(){
//卸載這兒的代碼,在頁(yè)面加載完成后才會(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(){
alert('我打我自己1111')
}
//2)onmouseover - 鼠標(biāo)懸停事件
pNode.onmouseover = function(){
// alert('我打我自己22222')
this.style = 'background-color:yellow'
}
pNode.onmouseout = function(){
this.style = 'background-color:red'
}
//3.鍵盤事件
//鍵盤事件一般綁定在輸入框?qū)?yīng)的標(biāo)簽上
//1)onkeypress - 按下彈起
inputNode = document.getElementById('input')
inputNode.onkeypress = function(){
console.log('鍵盤按下彈起')
}
//2)onkeydown - 按鍵按下、 onkeyup - 按鍵彈起
//4.輸入框時(shí)間
//onchange - 輸入框中的輸入內(nèi)容的時(shí)候按回車
inputNode2 = document.getElementById('input2')
inputNode2.onchange = function(){
console.log('內(nèi)容發(fā)生改變')
}
//5.事件對(duì)象
//每個(gè)事件驅(qū)動(dòng)程序中,都可以設(shè)置一個(gè)參數(shù)來(lái)表示當(dāng)前時(shí)間對(duì)象伊佃。不同類型的事件對(duì)應(yīng)時(shí)間類型和時(shí)間屬性不同
//1)鼠標(biāo)事件對(duì)象
/*
clientX/clientY - 鼠標(biāo)的位置到瀏覽器左邊和頂部的距離
offsetX/offsetY - 鼠標(biāo)的位置到事件源標(biāo)簽左邊和頂部的距離
2)鍵盤事件對(duì)象
key - 哪個(gè)按鍵被按下
*/
</script>