一伺通、添加事件
- 添加事件方式赋秀，見代碼
- 顯示隱藏圖片
操作div的display屬性芹扭，在block和none之間切換即可 - this使用
在匿名函數(shù)中的this就是當(dāng)前對象
在onclick=demo(this) 就是當(dāng)前節(jié)點
修改內(nèi)容
this.innerHTML = 'xxx' - 切換背景色
表單內(nèi)容控制
見代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>添加事件</title>
</head>
<body>
<div style="width:200px; height:200px; background-color:red" onclick="alert('這是一個div')"></div>
<div style="width:200px; height:200px; background-color:blue" onclick="test()"></div>
<div id="div" style="width:200px; height:200px; background-color:green"></div>
</body>
</html>
<script>
function test() {
console.log('花田里犯了錯,說好,破曉前忘掉')
}
var odiv = document.getElementById('div')
// odiv.onclick = function () {
// console.log('遙遠(yuǎn)的東方有一條龍')
// }
odiv.onclick = test
</script>
二了赵、onload函數(shù)
- window的事件，windows.onload = function () {} 是在整個文檔加載完畢之后執(zhí)行蒸矛，但是自己寫的onclick的點擊函數(shù)不能寫到onload里面，因為內(nèi)部函數(shù)只能在內(nèi)部使用胸嘴，不能再外部使用
- 如果實在是想用雏掠，
window.lala = function () {}
三、選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>選項卡</title>
<style>
button {
width: 200px;
height: 100px;
font-size: 40px;
background-color: pink;
margin-left: 50px;
display: inline-block;
}
div {
width: 970px;
height: 600px;
font-size: 50px;
background-color: yellow;
margin-left: 50px;
margin-top: 50px;
display: none;
}
.active {
font-size: 50px;
background-color: blue;
}
.show {
display: block;
}
</style>
</head>
<body>
<button class="active" onclick="dudu(this, 0)">周杰倫</button>
<button onclick="dudu(this, 1)">王力宏</button>
<button onclick="dudu(this, 2)">張學(xué)友</button>
<button onclick="dudu(this, 3)">劉德華</button>
<div class="show">菊花臺劣像、千里之外乡话、七里香、霍元甲驾讲、聽媽媽的話蚊伞、稻香、雙節(jié)棍吮铭、簡單愛</div>
<div>花田錯时迫、龍的傳人、唯一</div>
<div>慢慢谓晌、吻別掠拳、一千個傷心的理由</div>
<div>謝謝你的愛、冰雨纸肉、天意溺欧、忘情水</div>
</body>
</html>
<script>
// 得到所有的button
var abuttons = document.getElementsByTagName('button')
// 得到所有的div
var adivs = document.getElementsByTagName('div')
function dudu(obj, index) {
// 先將所有的button的class屬性設(shè)置為空
for (var i = 0; i < abuttons.length; i++) {
abuttons[i].className = ''
adivs[i].className = ''
}
// 給指定的button添加樣式
obj.className = 'active'
// 給指定的div添加樣式
adivs[index].className = 'show'
}
</script>
四喊熟、定時器
定時器：分為兩種，一種是周期性定時器姐刁，一種是一次性定時器
- 周期性：每隔5s執(zhí)行一次函數(shù)
- 一次性：幾秒之后執(zhí)行一次函數(shù)芥牌，執(zhí)行完畢定時器結(jié)束
var timer = setTimeout(fn, 5000)
5000ms之后執(zhí)行fn一次。然后結(jié)束 - 銷毀定時器 clearTimeout(timer)
計數(shù)器
圖片消失
五聂使、獲取非行內(nèi)樣式
- IE瀏覽器獲取非行內(nèi)樣式方式
obj.currentStyle['name'] - 火狐和谷歌獲取方式
getComputedStyle(odiv, null)['width'] - 獲取非行內(nèi)樣式的兼容性寫法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
六壁拉、BOM操作
- window.setTimeout,window.setInterval
- window.alert\window.confirm
- window.open
- window.history(back、go)
history.go(1) 去往前一個網(wǎng)址
history.go(2) 去往后一個網(wǎng)址
history.back() 倒退一個網(wǎng)址 - location
href : 讀取得到當(dāng)前的url柏靶，設(shè)置跳轉(zhuǎn)到指定的url
reload() : 刷新整個頁面
七弃理、DOM操作
children
parentNode
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
firstChild
lastChild
previousSibling
nextSibling
tagName
createElement
removeChild
appendChild
insertBefore
setAttribute getAttribute
八、select下拉框和oninput事件
onchange : 事件屎蜓，用戶點擊下拉框觸發(fā)
selectedIndex : 用戶點擊的option的下標(biāo)痘昌，下標(biāo)從0開始
options : osel.options 可以得到所有的option對象，這是一個數(shù)組
input框的oninput事件炬转，只要內(nèi)容改變辆苔，就會觸發(fā)
