7.1 屬性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/a1.jpg"/>
<button disabled="disabled">電腦不了</button>
</body>
</html>
<script type="text/javascript">
var imgNode = document.getElementsByTagName('img')[0]
1.屬性點語法操作
節(jié)點.屬性：獲取屬性值
節(jié)點.屬性=新值：修改屬性值
var name = 'src'
imgNode.title = '圖片1'
2.通過相應方法對屬性進行操作
節(jié)點.getAttribute(屬性名)：獲取節(jié)點該屬性名對應的值
a.獲取屬性
// var srcAttr = imgNode.getAttribute('src')
var srcAttr = imgNode.getAttribute(name)
console.log((srcAttr)) // "img/a1.jpg"
b.給屬性賦值
節(jié)點.setAttribute(屬性名)：修改節(jié)點該屬性名對應的值
imgNode.setAttribute('title','帥哥250')
c.刪除屬性；如：<button disabled="disabled">電腦不了</button>
通過刪除按鈕disabled屬性來控制按鈕是否可用
var buttonNode = document.getElementsByTagName('button')[0]
//刪除disable屬性讓按鈕可用
buttonNode.removeAttribute('disabled')
// buttonNode.disabled = '' 部分瀏覽器版本可這樣讓按鈕可用
</script>
7.2 BOM基礎
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
</head>
<body>
<button onclick="windowAction()">打開窗口</button>
<button onclick="windowMove()">移動窗口</button>
</body>
</html>
<script type="text/javascript">
1.什么是BOM：瀏覽器對象模型（browser object model）
js中提供了一個全局的window烙无，用來表示當前瀏覽器
js中聲明的全局變量，其實都是綁定在window對象中的屬性
所以枚碗，在使用window屬性和方法時遥巴，前面的‘window.’可以不寫
var a = 100;
console.log(a===window.a) // true
// alert('我沒寫window.哦')
2.window基本操作
a.打開新窗口：不需要點擊即可跳轉
// window.open('http://www.baidu.com')
b.關閉窗口
// window.close()
c.移動窗口
window.moveTo(200,200)
function windowAction(){
mywindow = window.open('','','width=200,height=300')
mywindow.focus()
}
function windowMove(){
mywindow.moveTo(1000,300)
d.調(diào)整窗口大小
mywindow.resizeTo(400,400)
e.強制刷新
window.reload(true)
}
f.獲取瀏覽器用于顯示內(nèi)容部分的寬和高
console.log(window.innerWidth,window.innerHeight)
g.獲取整個瀏覽器的寬和高
console.log(window.outerWidth,window.outerHeight)
3.彈框
a.alert(提示信息):彈出提示信息(帶確定按鈕)
window.alert('alert彈出')
b.confirm(提示信息):彈出提示信息(帶確定和取消按鈕),返回值是布爾
result = window.confirm('confirm,是否刪除?')
console.log('===',result)
c.window.prompt('提示信息', '輸入框顯示的默認值'):彈出一個帶輸入框和取消確定按鈕的提示框,點 取消 返回值是null,點 確定 返回值是輸入框中的內(nèi)容..
var result = window.prompt('提示信息', '輸入框顯示的默認值')
console.log(result)
</script>
7.3 定時事件
<!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ù)
window.clearTimeout(定時對象)
函數(shù)只會調(diào)用一次啄寡，類似定時炸彈
var message = '&&&&&&&&爆炸&&&&&&&&'
var timeout1 = window.setTimeout(function(){
console.log(message)
},3000)
function clearBoom(){
window.clearTimeout(timeout1)
}
//
</script>
7.4 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#div1{
margin-top:200px ;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="div1" style="width: 200px;height: 300px;background-color: red;">
</div>
<a >
event相關屬性說明
</a>
<!--a.在標簽內(nèi)部給事件源的事件屬性賦值-->
<button id="b1" onclick=alert('彈框')>彈出彈框</button>
<button id="b11" onclick="showAlert()">彈出彈框2</button>
<button id="b2">改變背景顏色</button>
<button id="b3">改變字體顏色</button>
<button id="b4">改變樣式</button>
</body>
</html>
<script type="text/javascript">
js是事件驅動語言
1.事件3要素（事件源豪硅、事件、事件驅動的程序）
例如：
小明打狗挺物，狗嗷嗷叫懒浮。：本 事件中狗是事件源，狗被打就是事件识藤，狗嗷嗷叫就是事件驅動的程序砚著。
小明打狗，他老爸就打他痴昧。：本 事件中狗是事件源稽穆，狗被打就是事件，小明被打就是事件驅動的程序赶撰。
點擊按鈕舌镶，就彈出一個彈框：事件源是按鈕，事件是點擊按鈕豪娜，事件驅動的程序就是彈出彈框
2.綁定事件
第一步：獲取事件源
第二步：綁定事件
第三步：寫驅動程序a.在標簽內(nèi)部給事件源的事件屬性賦值
<標簽 事件屬性=‘驅動程序’></標簽>
<標簽 事件屬性=‘函數(shù)名（）’></標簽>：一般不這樣綁定
注意：這個時候被綁定的驅動程序如果是函數(shù)乎折，那么這個函數(shù)中this關鍵字是指代window的。
function showAlert(){
console.log(this)
}
b.通過節(jié)點綁定事件1
標簽節(jié)點.事件屬性 = 函數(shù)
注意：此時函數(shù)中的this就是事件源
var b2Node = document.getElementById('b2')
function changeColor(){
console.log(this) // b2Node
// b2Node.style.backgroundColor = 'yellow'
this.style.backgroundColor = 'yellow'
}
b2Node.onclick = changeColor
c.通過節(jié)點綁定事件2
標簽節(jié)點.事件屬性 = 匿名函數(shù)
var b3Node = document.getElementById('b3')
b3Node.onclick = function(){
console.log(this) // b3Node
this.style.color = 'yellow'
// this.style.backgroundColor = 'red'
}
d.通過節(jié)點綁定事件3
節(jié)點.addEventListener(事件名侵歇，函數(shù))：指定的節(jié)點產(chǎn)生指定的事件后調(diào)用指定的函數(shù)
事件名：字符串，去掉on
注意：這個時候函數(shù)中的this就是事件源吓蘑，這種方式可以給同一個事件綁定多個驅動程序
var b4Node = document.getElementById('b4')
b4Node.addEventListener('click',
function(){
console.log(this) // b4Node
this.style.color = 'red'
})
b3Node.addEventListener('click',
function(){
this.style.backgroundColor = 'red'
})
3.獲取事件對象
當事件驅動程序是一個函數(shù)時惕虑，這個函數(shù)中可以設置一個參數(shù)來獲取當前事件中的事件對象
var div1Node = document.getElementById('div1')
div1Node.onclick = function(evt){
//參數(shù)evt就是事件對象
a.(evt.clientX,evt.clientY):事件產(chǎn)生的位置的坐標，相對瀏覽器內(nèi)容部分
console.log(evt.clientX,evt.clientY)
console.log(evt.offsetX,evt.offsetY)
if(evt.offsetX<100){
this.style.backgroundColor = 'black'
}else{
this.style.backgroundColor = 'yellow'
}
}
4.常見的事件類型
</script>
7.5 常見事件類型
常見事件類型
1.onload：頁面加載完成對應的事件(標簽加載成功)
window.onload：函數(shù)
2.鼠標事件
onclick:鼠標點擊事件
onmoseover
...
3.鍵盤事件
onkeypress - 鍵盤按下彈起
onkeydown
onkeyup
4.輸入框內(nèi)容改變事件
onchange：輸入框輸入狀態(tài)結束（光標消失）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.在頁面加載完成后才去獲取節(jié)點
window.onload = function(){
//這樣js代碼就不會取到null
var pNode = document.getElementById('p1')
//點擊事件
pNode.onclick = function(){
alert('被電擊')
}
//鼠標進入事件
pNode.onmouseover = function(){
this.innerText = '鼠標進入'
this.style.backgroundColor = 'red'
}
//鼠標移出事件
pNode.onmouseout = function(){
this.innerText = '鼠標移出'
this.style.backgroundColor = 'white'
}
//鼠標按下事件
pNode.onmousedown = function(){
this.innerText = '鼠標按下'
this.style.backgroundColor = 'white'
}
//鼠標彈起事件
pNode.onmouseup = function(){
this.innerText = '鼠標彈起'
this.style.backgroundColor = 'white'
}
//鼠標彈起事件
pNode.onmousewheel = function(){
this.innerText = '鼠標滾輪'
this.style.backgroundColor = 'white'
}
pNode.onkeypress = function(){
alert('鍵盤按下')
}
}
</script>
</head>
<body>
<p id='p1' style="height: 200px;">我是段落</p>
<textarea name="" rows="4" cols=""></textarea>
</body>
</html>
<script type="text/javascript">
var textareaNode = document.getElementsByTagName('textarea')[0]
textareaNode.onkeypress = function(evt){
//鍵盤事件對象：key屬性：按鍵的值磨镶，keycode屬性：按鍵值的編碼
// console.log(evt)
// d = evt.keyCode
// if(d>=97 && d <= 122){
// d -= 32
// }
// textareaNode.innerText = String.fromCharCode(d)
}
textareaNode.onchange = function(evt){
alert('onchange事件')
}
</script>
