一、屬性操作
<body>
<p id="p1">我是段落<a id="a1" >必讀</a></p>
<img src="img/luffy.jpg"/>
</body>
1.節(jié)點屬性的增刪改查
a.查
1.節(jié)點.屬性
標簽相關(guān)屬性:
innerHTML
作用：獲取標簽內(nèi)容(包含雙標簽內(nèi)容中的其他標簽和文件)
innerText
作用：標簽中的文本內(nèi)容
href,src,text,value,id等,根據(jù)標簽屬性直接獲取
注意:標簽中的class屬性在節(jié)點中對應(yīng)的是className
alert(pNode.innerHTML)
alert(pNode.innerText)
alert(aNode.href)
alert(imgNode.src)
樣式相關(guān)屬性:
可以通過style來獲取樣式相關(guān)屬性
aNode.style.color //獲取字體顏色
aNode.style.display //獲取display的值
2.節(jié)點.getAttributse(屬性名)
alert(aNode.getAttribute('href'))
alert(aNode.getAttribute('style'))
b.改、增
1.節(jié)點.屬性 = 新值
imgNode.src = 'img/aaa.ico'
imgNode.title = '路飛'
pNode.style.color = 'rgb(255, 0, 0)'
pNode.ytIndex = 0 //添加屬性
alert(pNode.ytIndex)
2.節(jié)點.setAttribute(屬性名, 新值)
注意：inner相關(guān)的無效
imgNode.setAttribute('src', 'img/jd_logo.ico')
c.刪
節(jié)點.removeAttribute(屬性名)
imgNode.removeAttribute('src')
二、BOM操作
1.BOM
解釋：瀏覽器對象模型(browser object model)
js提供了一個全局的對象window -> 瀏覽器
js中聲明的所有的全局變量其實都是添加給window的屬性
var a = 100
console.log(a, window.a)
2.基本操作
a.open()
作用：打開一個新的窗口
輸出：返回被打開的窗口對應(yīng)的對象
語法：
open() - 空白窗口
open(url) - 在新窗口打開指定網(wǎng)頁
open(url,'','width=300,height=200')
說明：打開新的窗口并且設(shè)置窗口的寬度和高度
newWindow = window.open('01車牌號限行案例.html','', 'width=300,height=200')
b.moveTo(x,y)
作用：移動窗口
newWindow.moveTo(100, 100)
**c.resizeTo(x,y)
作用：設(shè)置窗口的大小
newWindow.resizeTo(500, 600)
d.瀏覽的寬高
inner是內(nèi)容的寬度和高度
outer是瀏覽器的寬度和高度
console.log('=====:',newWindow.innerWidth, newWindow.innerHeight)
console.log('!!!!!:',newWindow.outerWidth, newWindow.outerHeight)
3.彈框
a.alert(提示信息)
說明：提示框，只有提示信息和確定按鈕
b.confirm(提示信息)
說明：提示框，有確定和取消按鈕
返回值：返回是布爾值，true->點擊確定，false->點擊取消
result = confirm('是否確定刪除?')
console.log(result)
c.prompt
說明：提示框，有一個輸入框，一個確定按鈕和取消按鈕;
返回值：返回值是字符串，點擊確定返回值是輸入框中的內(nèi)容，點擊取消返回值是null
result = prompt('提示信息', '輸入框中的默認值')
console.log(result)
三、計時事件
<p id="p1">5</p>
1.定時器
a.開啟定時器
1.setInterval(函數(shù),時間)
作用：每隔指定的時間調(diào)用一次指定的函數(shù)
返回值：定時器對象
2.setTimeout(函數(shù),時間)
作用：隔指定時間后調(diào)用一次指定函數(shù)
注意：函數(shù)只會調(diào)用一次，相當于定時炸彈
說明：
函數(shù) - 可以是函數(shù)名，也可以是匿名函數(shù)
時間 - 單位是毫秒
b.停止定時
clearInterval(定時器對象)
作用：停止指定的定時器
clearTimeout(定時器對象)
作用：停止指定的定時器
函數(shù)傳遞方式
//方案一：先聲明函數(shù)，在傳遞函數(shù)
function timeAction(){
console.log('aaa')
}
timer1 = setInterval(timeAction, 1000)
//方案二: 直接傳遞匿名函數(shù)
timer2 = setInterval(function(){
console.log('bbb')
},1000)
timer22 = setTimeout(function(){
console.log('時間到!')
},5000)
//練習(xí)：數(shù)字遞增
num = 5
pNode = document.getElementById('p1')
timer3 = setInterval(function(){
num--
pNode.innerText = num
if(num == 0){
//停止定時
clearInterval(timer3)
}
},1000)
四、事件綁定
<style type="text/css">
#box1{
width: 150px;
height: 150px;
background-color: lawngreen;
}
</style>
<body>
<button onclick="alert('按鈕點擊')">按鈕0</button>
<button onclick="buttonAction()">按鈕1</button>
<button id="btn2">按鈕2</button>
<button id="btn3">按鈕3</button>
<div id="box1">
</div>
</body>
1.事件三要素: 事件源、事件、事件驅(qū)動程序
示例：
小明打狗，狗咬他 -- 事件源：狗 事件：打狗 事件驅(qū)動程序: 狗咬他
小明打狗，他爸打他 -- 事件源：狗 事件：打狗 事件驅(qū)動程序: 他爸打他
點擊按鈕，跳轉(zhuǎn)到其他頁面 -- 事件源: 按鈕 事件:點擊按鈕 事件驅(qū)動程序:跳轉(zhuǎn)到其他頁面
2.綁定事件
a.直接通過標簽綁定事件
1.直接在事件對應(yīng)的屬性里寫js代碼
2.直接在事件對應(yīng)的屬性里寫調(diào)用函數(shù),這個函數(shù)中的this是window
function buttonAction(){
console.log(this)
}
b.通過節(jié)點綁定事件
給節(jié)點的事件屬性賦函數(shù)或者匿名函數(shù)
//函數(shù)中this就是事件源(當前被點擊的按鈕)
btnNode2 = document.getElementById('btn2')
//給點擊事件綁定函數(shù)
btnNode2.onclick = buttonAction
//給鼠標進入事件綁定函數(shù)
btnNode2.onmouseover = function(){
this.style.fontSize = '30px'
}
btnNode2.onmouseover = function(evt){
this.style.color = 'red'
}
c.通過節(jié)點綁定事件
節(jié)點.addEventListener(事件名, 事件驅(qū)動程序)
事件名: 去掉事件名前面的on, 例如onclick -> click
這種方式綁定事件，可以給同一個事件源的同一個事件綁定不同的驅(qū)動程序
this是事件源, evt是事件對象
btnNode3 = document.getElementById('btn3')
btnNode3.addEventListener('click', function(evt){
console.log(this)
//alert('按鈕3被點擊')
this.style.color = 'red'
})
btnNode3.addEventListener('click', function(evt){
console.log(evt)
this.style.fontSize = '30px'
})
驅(qū)動程序中的evt參數(shù),代表事件對象
boxNode1 = document.getElementById('box1')
boxNode1.addEventListener('click', function(evt){
if(evt.offsetX <= 75){
this.style.backgroundColor = 'red'
}else{
this.style.backgroundColor = 'yellow'
}
})
補充：js中的隨機數(shù)
console.log(Math.random()) //隨機數(shù)0-1(小數(shù))
console.log(parseInt(Math.random()*255)) //0-100的整數(shù)
console.log(parseInt(Math.random()*90+10)) //10-100的整數(shù)
事件冒泡和事件捕獲
事件冒泡：子標簽上產(chǎn)生的事件會傳遞給父標簽
事件捕獲：讓事件不在傳遞給父標簽，即阻止事件冒泡
語法：事件.stopPropagation()
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
//獲取節(jié)點
divNode1 = document.getElementById('div1')
divNode2 = document.getElementById('div2')
divNode3 = document.getElementById('div3')
//綁定事件
divNode1.addEventListener('click', function(){
alert('div1被點擊')
})
divNode2.addEventListener('click', function(evt){
alert('div2被點擊')
evt.stopPropagation()
})
divNode3.addEventListener('click', function(evt){
alert('div3被點擊')
//讓evt事件對象不傳遞個當期標簽的父標簽
evt.stopPropagation()
})
