七.DOM屬性和操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/01.jpg"/>
<button disabled="disabled">點我</button>
</body>
</html>
<script type="text/javascript">
var imgNode = document.getElementsByTagName('img')[0]
//1.屬性的點語法操作
//節(jié)點.屬性 - 獲取屬性值巍杈；節(jié)點.屬性 = 新值 - 修改屬性的值
console.log(imgNode.src)
imgNode.title = '圖片1'
var name = 'src'
//2.通過相應(yīng)方法對屬性進行操作
//a.獲取屬性
//節(jié)點.getAttribute(屬性名)
var srcAttr = imgNode.getAttribute('src')
console.log(srcAttr)
//b.給屬性賦值
//節(jié)點.setAttribute(屬性名,值)
imgNode.setAttribute('title','無始大帝')
//c.刪除屬性
//節(jié)點.removeAttribute(屬性)
var buttonNode = document.getElementsByTagName('button')[0]
//讓按鈕可以點擊
buttonNode.disabled = ''
// buttonNode.removeAttribute()
</script>
八.BOM基礎(chǔ)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
</head>
<body>
<button onclick="windowAction()">打開窗口</button>
<div onclick="closeAction()" id="div1" style="height: 60px;background-color: blueviolet;width: 120px;">
</div>
</body>
</html>
<script type="text/javascript">
//1.什么是BOM - 瀏覽器對象模型(browser object model)
//js中提供了一個全局的window對象隅俘，用來表示當(dāng)前的瀏覽器
//js中聲明的全局變量，其實都是綁定在window對象中的屬性(使用window的屬性和方法的時候,前面的'windo.'可以省略)
var a = 100;//window.a = 100
console.log(a,window.a)
// alert('hello')
//2.window基本操作
//a.打開新窗口
// window.open('http://www.baidu.com')
//b.關(guān)閉窗口
// window.close()
//c.移動當(dāng)前窗口
//窗口對象.moveTo(x坐標(biāo),y坐標(biāo))
function windowAction(){
myWindow = window.open('','','width=200,height=300')
myWindow.moveTo(300,300)
//d.調(diào)整窗口大小
myWindow.resizeTo(400,400)
//e.刷新(暫時看不到效果)
//true -> 強制刷新
// window.reload(true)
}
//f.獲取瀏覽器的寬度和高度
//innerWidth/innerHeight - 瀏覽器顯示內(nèi)容部分的寬度和高度
console.log(window.innerWidth,window.innerHeight)
//outerWidth/outerHeight - 整個瀏覽器的寬度和高度
console.log(window.outerWidth,window.outerHeight)
//3.彈框
//a.alert(提示信息) - 彈出提示信息(帶確定按鈕)
// window.alert('alert彈出')
//b.confirm(提示信息) - 彈出提示信息(帶確定和取消按鈕),返回值是布爾,取消-false,確定-true
// result = window.confirm('confirm,是否刪除?')
// console.log('======:',result)
function closeAction(){
var result = window.confirm('是否刪除?')
if(!result){
return
}
var divNode = document.getElementById('div1')
divNode.remove()
}
//c.prompt(提示信息,輸入框中的默認值) - 彈出一個帶輸入框和取消轧叽，確定按鈕的提示框弯予；
// 點取消戚宦，返回值是null；點確定返回值是輸入框中輸入的內(nèi)容
var result = prompt('message','default')
console.log(result)
</script>
九.定時事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="time">0</p>
<button onclick="clearBoom()">拆炸彈</button>
</body>
</html>
<script type="text/javascript">
//1.
//setInterval(函數(shù),時間) - 每隔指定的時間調(diào)用一次函數(shù)锈嫩，時間單位是毫秒;返回定時對象
//clearInterval(定時對象) - 停止定時
//1000毫秒=1秒
var pNode = document.getElementById('time')
var num =0
var interval1 =window.setInterval(function(){
//這里面的代碼每隔1秒會執(zhí)行依次
num ++;
// console.log(num)
pNode.innerText = num
if(num == 10){
//停止指定的定時
window.clearInterval(interval1)
}
},1000)
//2.
//setTimeout(函數(shù),時間) - 隔指定的時間調(diào)用一次函數(shù)(函數(shù)只會調(diào)用一次阁苞，就像定時炸彈)
//clearTimeout(定時對象) - 停止定時
var message = '午時已到!!!!!!!!!!!!!!!!'
var timeout1 = window.setTimeout(function(){
console.log(message)
},10000)
function clearBoom(){
//
window.clearTimeout(timeout1)
console.log('沒了~')
}
</script>
十.自動跳轉(zhuǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#box1{
width: 400px;
height: 200px;
background-color: aliceblue;
margin-left: auto;
margin-right: auto;
border: 2px dotted gold;
display: none;
}
#box1 p{
line-height: 70px;
margin-left: 20px;
}
#box1 font{
position: absolute;
right: 20px;
bottom: 15px;
color: green;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="showBox()">進入百度</button>
<div id="box1">
<p>5s后自動跳轉(zhuǎn)到百度...</p>
<font onclick="jump()">馬上跳轉(zhuǎn)</font>
</div>
</body>
</html>
<script type="text/javascript">
var box1Node = document.getElementById('box1');
var pNode = box1Node.firstElementChild
function showBox(){
if(box1Node.style.display == 'block'){
return
}
//顯示提示框
box1Node.style.display = 'block';
//開始倒計時
var time =5;
interval1 = window.setInterval(function(){
time--;
pNode.innerText = time+'s后自動跳轉(zhuǎn)到百度...'
if(time==0){
//停止定時
window.clearInterval(interval1)
//打開網(wǎng)頁
window.open('https://www.baidu.com')
//隱藏提示框
box1Node.style.display = 'none'
pNode.innerText = '5s后自動跳轉(zhuǎn)到百度...'
}
},1000);
}
function jump(){
window.clearInterval(interval1)
window.open('https://www.baidu.com')
box1Node.style.display = 'none'
pNode.innerText = '5s后自動跳轉(zhuǎn)到百度...'
}
</script>
十一事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="div1" style="width: 200px;height: 200px;background-color: blueviolet;">
</div>
<button id="btn1" onclick="alert('彈框')">彈出彈框1</button>
<button id="btn11" onclick="showAlert()">彈出彈框11</button>
<button id="btn2">改變背景顏色</button>
<button id="btn3">改變字體顏色</button>
<button id="btn4">改變樣式</button>
</body>
</html>
<script type="text/javascript">
//js是事件驅(qū)動語言
//1.事件三要素(事件源困檩、事件、事件驅(qū)動程序)
/*
* 例如：
* 小明打狗那槽，狗嗷嗷叫悼沿！---在這個事件中狗是事件源，狗被打就是事件骚灸，狗嗷嗷叫就是事件驅(qū)動程序
* 小明打狗糟趾，他老爸就打他 ---在這個事件中狗是事件源，狗被打就是事件甚牲，小明被打是事件驅(qū)動程序
*
* 點擊按鈕义郑，就彈出一個彈框 - 事件源：按鈕，事件：點擊丈钙，驅(qū)動程序：彈出彈框
/
//2.綁定事件
/
* 第一步：獲取事件源
* 第二步：綁定事件
* 第三步：寫驅(qū)動程序
*
*/
//a.在標(biāo)簽內(nèi)部給事件源的事件屬性賦值
//<標(biāo)簽 事件屬性='驅(qū)動程序'></標(biāo)簽>
//<標(biāo)簽 事件屬性='函數(shù)名()'></標(biāo)簽>-一般不這樣綁定
//注意：這個時候被綁定的驅(qū)動程序如果是函數(shù)非驮，那么這個函數(shù)中的this關(guān)鍵字是window
function showAlert(){
alert('彈框')
}
//b.通過節(jié)點綁定事件1
//標(biāo)簽節(jié)點.事件屬性 = 函數(shù)
//注意：這個時候函數(shù)中的this是事件源
var btn2Node = document.getElementById('btn2')
function changeColor(){
this.style.backgroundColor = 'skyblue'
}
btn2Node.onclick = changeColor;
//c.通過節(jié)點綁定事件2
//標(biāo)簽節(jié)點.事件屬性 = 匿名函數(shù)
//注意：這個時候函數(shù)中的this是事件源
var btn3Node = document.getElementById('btn3')
btn3Node.onclick = function(){
this.style.color = 'red'
}
//d.通過節(jié)點綁定事件3(更新)
//節(jié)點.addEventListener(事件名,函數(shù)) - 指定的節(jié)點產(chǎn)生指定的事件后調(diào)用指定函數(shù)
//事件名 - 字符串，去掉on
//注意：這個時候函數(shù)中的this是事件源雏赦；這種方式可以給同一節(jié)點的同一事件綁定多個驅(qū)動程序
var btn4Node = document.getElementById('btn4')
btn4Node.addEventListener('click',function(){
this.style.color = 'yellow';
});
btn3Node.addEventListener('click',function(){
this.style.backgroundColor = 'yellow';
})
//3.獲取事件對象
//當(dāng)事件的驅(qū)動程序是一個函數(shù)的時候劫笙，函數(shù)中可以設(shè)置一個參數(shù),來獲取當(dāng)前事件的事件對象
var div1Node = document.getElementById('div1')
div1Node.onclick = function(evt){
//參數(shù)evt就是事件對象
//a.clientX/clientY - 事件產(chǎn)生的位置的坐標(biāo)(相對瀏覽器的位置)
console.log(evt.clientX,evt.clientY);
console.log(evt.offsetX,evt.offsetY);
console.log(this.style.width)
if(evt.offsetX < 100){
this.style.backgroundColor = 'red'
}else{
this.style.backgroundColor = 'blue'
}
}
</script>
十二.常見事件類型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.在頁面加載完成后才去獲取節(jié)點
window.onload = function(){
var pNode = document.getElementById('p1')
console.log(pNode)
//點擊事件
pNode.onclick = function(){
alert('被點擊!')
}
//鼠標(biāo)進入事件
pNode.onmouseover = function(){
this.innerText = '鼠標(biāo)進入'
this.style.backgroundColor = 'red';
}
//鼠標(biāo)移出事件
pNode.onmouseout = function(){
this.innerText = '輸入移出';
this.style.backgroundColor = 'white';
}
//鼠標(biāo)按下事件
pNode.onmousedown = function(){
this.innerText = '鼠標(biāo)按下'
}
//鼠標(biāo)彈起事件
pNode.onmouseup = function(){
this.innerText = '鼠標(biāo)彈起'
}
//鼠標(biāo)滾動事件
pNode.onmousewheel = function(){
this.innerText = '鼠標(biāo)滾動'
console.log('鼠標(biāo)滾動')
}
}
</script>
</head>
<body>
<p id="p1" style="height: 200px;">我是段落</p>
<textarea name="" rows="4" cols="100"></textarea>
<img src="img/03.jpg"/>
</body>
</html>
<script type="text/javascript">
var textareaNode = document.getElementsByTagName('textarea')[0]
textareaNode.onkeypress = function(evt){
//鍵盤事件對象:key屬性 - 按鍵的值，keyCode屬性 - 按鍵的值的編碼
console.log(evt)
// alert('鍵盤按下')
}
textareaNode.onchange = function(evt){
alert('onchange事件')
}
</script>
