添加事件
1友瘤、添加事件
添加事件方式，見代碼
顯示隱藏圖片
操作div的display屬性，在block和none之間切換即可
this使用
在匿名函數(shù)中的this就是當前對象
在onclick=demo(this) 就是當前節(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('遙遠的東方有一條龍')
// }
odiv.onclick = test
</script>
顯示隱藏函數(shù)
<!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 class="tu">
<img src="feng.jpg" alt="可愛的鳳姐"">
</div>
<button id="btn">讓鳳姐消失</button>
<button id="btn1" onclick="show()">說你愛我</button>
</body>
</html>
<script>
// 顯示和隱藏圖片操作的是div的display屬性，在block和none之間切換
var obutton = document.getElementById('btn')
obutton.onclick = function () {
// 找到指定div，將其display屬性修改為none
var odiv = document.getElementsByClassName('tu')[0]
odiv.style.display = 'none'
}
function show() {
var odiv = document.getElementsByClassName('tu')[0]
odiv.style.display = 'block'
}
</script>
this的使用
<!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>this的使用</title>
</head>
<body>
<div class="tang" style="width:200px; height:200px; background-color:red"></div>
<div class="tang" style="width:200px; height:200px; background-color:blue" onclick="demo(this)"></div>
</body>
</html>
<script>
// 點擊div颜价，將寬度有200px修改為400px
var odiv = document.getElementsByClassName('tang')[0]
odiv.onclick = function () {
console.log(this)
// this就是odiv
this.style.width = '400px'
// 給div添加內(nèi)容
this.innerHTML = '秦時明月漢時關(guān),萬里長征人未還,但使龍城飛將在,不教胡馬度陰山'
}
function demo(obj) {
// 這里面的this是window，在js里面寫的所有的函數(shù)都是window的函數(shù)诉濒，調(diào)用demo其實就是 window.demo()
console.log(this)
// var odiv = document.getElementsByClassName('tang')[1]
obj.style.height = '400px'
}
</script>
切換div的背景色
<!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>切換div的背景色</title>
</head>
<body>
<div id="bai" style="width:300px; height:300px; background-color:red;"></div>
</body>
</html>
<script>
var odiv = document.getElementById('bai')
odiv.onclick = function () {
// 先獲取div的背景色
color = this.style.backgroundColor
if (color == 'red') {
this.style.backgroundColor = 'yellow'
} else {
this.style.backgroundColor = 'red'
}
}
</script>
表單內(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>表單內(nèi)容控制</title>
</head>
<body>
<input id="ip" type="text" value="請輸入用戶名">
<input type="text" value="請輸入用戶名" onfocus="cleara(this)" onblur="recover(this)">
</body>
</html>
<script>
// clear是關(guān)鍵字周伦，不能使用函數(shù)名
function cleara(obj) {
// console.log('clear')
if (obj.value == "請輸入用戶名") {
obj.value = ''
}
}
function recover(obj) {
if (obj.value == '') {
obj.value = '請輸入用戶名'
}
}
var oinput = document.getElementById('ip')
oinput.onfocus = function () {
// 判斷要不要清空
if (this.value == "請輸入用戶名") {
this.value = ''
}
}
oinput.onblur = function () {
// 判斷內(nèi)容是不是為空，如果為空變成下面這個
if (this.value == '') {
this.value = '請輸入用戶名'
}
}
</script>
onload函數(shù)
2未荒、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>onload函數(shù)</title>
<script>
// var a = '岳云鵬'
// demo()
// onload是window的事件，意思就是等文檔加載完畢之后來執(zhí)行這個代碼
window.onload = function () {
// var odiv = document.getElementById('kong')
// console.log(odiv)
// odiv.onclick = function () {
// this.style.backgroundColor = 'cyan'
// }
}
function demo(obj) {
obj.style.backgroundColor = 'cyan'
}
</script>
</head>
<body>
<div id="kong" style="width:300px; height:300px; background-color:pink" onclick="demo(this)"></div>
</body>
<script>
// console.log(a)
// function demo() {
// console.log('你喜歡岳云鵬的相聲嗎?')
// }
</script>
</html>
<script>
// alert(a)
// demo()
function test() {
// function lala() {
// console.log('這是一個內(nèi)部函數(shù)')
// }
// lala()
window.lala = function () {
console.log('這是lala函數(shù)')
}
}
test()
// test.lala()
lala()
</script>
3脆侮、選項卡
<!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)">張學友</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屬性設置為空
for (var i = 0; i < abuttons.length; i++) {
abuttons[i].className = ''
adivs[i].className = ''
}
// 給指定的button添加樣式
obj.className = 'active'
// 給指定的div添加樣式
adivs[index].className = 'show'
}
</script>
<!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">王寶強</button>
<button>馬蓉</button>
<button>王助理</button>
<button>啤教授</button>
<div class="show">王寶強沛善、王寶強航揉、王寶強、王寶強金刁、王寶強帅涂、王寶強</div>
<div>馬蓉、馬蓉尤蛮、馬蓉媳友、馬蓉、馬蓉产捞、馬蓉</div>
<div>王助理醇锚、王助理、王助理轧葛、王助理搂抒、王助理艇搀、王助理</div>
<div>啤教授尿扯、啤教授、啤教授焰雕、啤教授</div>
</body>
</html>
<script>
// 得到所有的button
var abuttons = document.getElementsByTagName('button')
var adivs = document.getElementsByTagName('div')
// 循環(huán)button數(shù)組，給里面每一個button添加點擊事件
for (var i = 0; i < abuttons.length; i++) {
// 給指定的button手動添加一個屬性，用來保存是第幾個button
abuttons[i].index = i
abuttons[i].onclick = function () {
// 首先清掉所有button和div上面的class
for (var j = 0; j < abuttons.length; j++) {
abuttons[j].className = ''
adivs[j].className = ''
}
// 給指定的button添加樣式
this.className = 'active'
// console.log(i)
// 給指定的div添加樣式
adivs[this.index].className = 'show'
}
}
</script>
4栓撞、定時器
定時器：分為兩種，一種是周期性定時器爵赵，一種是一次性定時器
周期性：每隔5s執(zhí)行一次函數(shù)
一次性：幾秒之后執(zhí)行一次函數(shù)，執(zhí)行完畢定時器結(jié)束
var timer = setTimeout(fn, 5000)
5000ms之后執(zhí)行fn一次泊脐。然后結(jié)束
銷毀定時器 clearTimeout(timer)
計數(shù)器
圖片消失
一次性定時器
<!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 id="baby">
<img height="800px" src="meinv.jpg" alt="氣質(zhì)美女">
</div>
<button id="btn">點我給你福利</button>
</body>
</html>
<script>
var odiv = document.getElementById('baby')
var obtn = document.getElementById('btn')
// timer就是一個定時器
var timer = setTimeout(function () {
odiv.style.display = 'none'
}, 5000)
obtn.onclick = function () {
// 清除timer這個定時器
clearTimeout(timer)
}
</script>
周期性定時器
<!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>
<button onclick="demo()">一行司機上青天</button>
</body>
</html>
<script>
var timer = setInterval(function () {
console.log('兩個女孩鳴翠柳')
}, 5000)
function demo() {
clearInterval(timer)
}
</script>
圖片閃爍
<!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 id="lala" style="width:300px; height:300px; background-color:red"></div>
</body>
</html>
<script>
var odiv = document.getElementById('lala')
setInterval(function () {
color = odiv.style.backgroundColor
if (color == 'red') {
odiv.style.backgroundColor = 'yellow'
} else {
odiv.style.backgroundColor = 'red'
}
}, 50)
</script>
計數(shù)器
<!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>計數(shù)器</title>
<style>
div {
width: 100%;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="dudu">0</div>
</body>
</html>
<script>
var odiv = document.getElementById('dudu')
// 定義一個全局變量空幻，用來保存定時器對象
var timer = null
// 定義一個全局的計數(shù)器
var i = 0
odiv.onmouseover = function () {
timer = setInterval(function () {
i++
// 設置div的內(nèi)容
odiv.innerHTML = i
}, 1000)
}
odiv.onmouseout = function () {
clearInterval(timer)
}
</script>
5、獲取非行內(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]
<!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>獲取非行內(nèi)</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div id="lala"></div>
<input type="text" id="ip">
<button onclick="demo()">點我獲取div寬度</button>
</body>
</html>
<script>
var odiv = document.getElementById('lala')
function demo() {
// 獲取div的寬度,只能獲取行內(nèi)樣式
// var kuan = odiv.style.width
// 獲取非行內(nèi)樣式
// var kuan = odiv.currentStyle['width']
// var kuan = getComputedStyle(odiv, null)['width']
var kuan = getStyle(odiv, 'width')
// 顯示到input框中
var oinput = document.getElementById('ip')
oinput.value = kuan
}
// 獲取非行內(nèi)樣式的兼容性寫法
function getStyle(obj, name) {
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name]
}
</script>
}
6容客、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 : 讀取得到當前的url，設置跳轉(zhuǎn)到指定的url
reload() : 刷新整個頁面
<!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>BOM操作</title>
</head>
<body>
<button id="btn">點我</button>
<button id="btn1">摸我</button>
<button id="btn2">張家輝</button>
<button id="btn3">張家輝</button>
</body>
</html>
<script>
var obutton = document.getElementById('btn')
var obutton1 = document.getElementById('btn1')
var obutton2 = document.getElementById('btn2')
var obutton3 = document.getElementById('btn3')
obutton.onclick = function () {
ret = window.confirm('今天晚上準備吃什么')
if (ret == true) {
console.log('你點擊了確定')
} else {
console.log('你點擊了取消')
}
}
obutton1.onclick = function () {
window.open('http://www.baidu.com/', '_self')
}
obutton2.onclick = function () {
// window.history.go(2)
window.history.back()
// file:///C:/Users/ZBLi/Desktop/1805/day02/14-bom.html
}
obutton3.onclick = function () {
// 得到當前的url
// console.log(location.href)
// location.
location.reload()
}
</script>
8缩挑、select下拉框和oninput事件
onchange : 事件但两，用戶點擊下拉框觸發(fā)
selectedIndex : 用戶點擊的option的下標，下標從0開始
options : osel.options 可以得到所有的option對象供置，這是一個數(shù)組
input框的oninput事件谨湘，只要內(nèi)容改變，就會觸發(fā)
<!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>select下拉框</title>
</head>
<body>
<select name="刺客" id="sel">
<option value="1">阿珂</option>
<option value="2">蘭陵王</option>
<option value="3">孫悟空</option>
<option value="4">趙云</option>
<option value="5">李白</option>
</select>
<input type="text" id="ip">
</body>
</html>
<script>
var osel = document.getElementById('sel')
osel.onchange = function () {
// alert('我被出發(fā)了')
// alert(osel.selectedIndex)
alert(osel.options[osel.selectedIndex].innerHTML)
}
var oinput = document.getElementById('ip')
oinput.oninput = function () {
console.log(this.value)
}
</script>
