1.百度的延時(shí)跳轉(zhuǎn)
arguments是函數(shù)中的隱含對(duì)象[index]
arguments.callee---代表正在被調(diào)用的函數(shù)
window.location.href - 返回完整的URL
/* 例子：
function add(){
// 對(duì)象--偽數(shù)組
window.alert(arguments.callee)
return arguments[0] + arguments[1]
}
window.alert(add(1,2))
*/
# 5秒之后會(huì)跳轉(zhuǎn)到百度頁(yè)面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3><span id="counter">5</span>秒鐘以后跳到百度去</h3>
<script type="text/javascript">
/*
function add(){
// 對(duì)象--偽數(shù)組
window.alert(arguments.callee)
return arguments[0] + arguments[1]
}
window.alert(add(1,2))
*/
var countDown = 5;
var span = document.getElementById('counter')
window.setTimeout(function(){
countDown -= 1;
if(countDown==0){
window.location.;
}else{
span.textContent = countDown;
// arguments是函數(shù)中的隱含對(duì)象
// arguments.callee---代表正在被調(diào)用的函數(shù)
window.setTimeout(arguments.callee,1000);
}
} , 1000);
</script>
</body>
</html>
2.廣告的切換
通過(guò)document對(duì)象獲取頁(yè)面元素的常用方法有5個(gè):
document.getElementById('') ==>通過(guò)ID獲取單個(gè)元素
document.getElementsByTagName('')[]==>通過(guò)標(biāo)簽名獲取元素的列表
document.getElementsByClassName('')[]==>通過(guò)類名獲取元素的列表
document.querySelector('')==>通過(guò)樣式表選擇器獲取單個(gè)元素
document.querySelectorAll('')==>通過(guò)樣式表選擇器獲取的列表
document.querySelectorAll('')[]==>通過(guò)樣式表選擇器獲取的列表
setInterval()-按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。
setTimeout()-在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。
clearInterval()-顯示當(dāng)前時(shí)間 ( setInterval() 函數(shù)會(huì)每秒執(zhí)行一次函數(shù)，類似手表)。使用 clearInterval() 來(lái)停止執(zhí)行;clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值
#每過(guò)2S會(huì)切換圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 705px;
}
</style>
</head>
<body>
<div id="adv">
<img src="img/4.jpg" >
</div>
<script>
var index = 0;
var images = ["4.jpg","5.jpg","6.jpg","7.jpg"];
var img = document.querySelector('img')
// var img = document.getElementsByTagName('img')[0];
var timerId;
startIt();
var div = document.querySelector('#adv');
div.addEventListener('mouseover', stopIt);
div.addEventListener('mouseout',startIt);
function startIt(){
timerId = window.setInterval(function(){
index += 1;
index %= images.length;
img.src = 'img/' + images[index]
},2000);
}
function stopIt(){
window.clearInterval(timerId);
}
</script>
</body>
</html>
3.標(biāo)簽的綁定事件
當(dāng)你知道事件發(fā)生時(shí)要做什么,但是你不知道事件什么時(shí)候發(fā)生
在這種情況下通常的處理方式都是綁定一個(gè)事件回調(diào)函數(shù)(callback)
closeWindow以及下面的匿名函數(shù)都屬于事件發(fā)生時(shí)才執(zhí)行的回調(diào)函數(shù)
# 給標(biāo)簽綁定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="ok">確定</button>
<script type="text/javascript">
// 給okButton綁定click事件的回調(diào)函數(shù)
function closeWindow(){
if(window.confirm('Clolse the window?')){
window.close();
}
}
// okButton.addEventListener('click',closeWindow)
var okButton = document.querySelector('#ok')
okButton.addEventListener('click', function(){
// window可以去掉,默認(rèn)對(duì)象就是window
window.alert('hello world!')
// 移除事件
okButton.removeEventListener('click',arguments.callee)
// okButton.removeEventListener('click',closeWindow)
});
/*
okButton.onclick = function(){
window.alert('hello,world!');
};
function showInfo(){
window.alert('hello,world!');
};
okButton.onclick = showInfo;
*/
</script>
</body>
</html>
4.事件的冒泡處理
// addEventListener方法的第一個(gè)參數(shù)是事件名
// 第二個(gè)參數(shù)是事件發(fā)生時(shí)需要執(zhí)行的回調(diào)函數(shù)
// 第三個(gè)參數(shù)是一個(gè)布爾值
// 如果是true 表示事件捕獲 - 從外層向內(nèi)層傳遞事件
// 如果是false 表示事件冒泡 - 從內(nèi)層向外層傳遞事件
// 一般情況下 我們事件處理的方式都是事件冒泡(默認(rèn)行為)
// 如果想阻止事件的傳播行為可以調(diào)用事件對(duì)象的stopPropagation方法
#點(diǎn)擊子標(biāo)簽會(huì)一級(jí)一級(jí)向上傳遞事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#d1{
height: 400px;
width: 400px;
background-color: red;
margin: 60px auto;
}
#d2{
height: 300px;
width: 300px;
background-color: blue;
}
#d3{
height: 200px;
width: 200px;
background-color:yellow;
}
#d2,#d3{
position: relative;
left: 50px;
top:50px
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
<script>
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
d1.addEventListener('click',function(){
window.alert('I am d1!')
})
d2.addEventListener('click',function(){
window.alert('I am d2')
})
// 事件回調(diào)函數(shù)中的第一個(gè)參數(shù)就是事件對(duì)象(封裝了和事件相關(guān)的信息)
d3.addEventListener('click',function(evt){
window.alert('I am d3')
evt.stopPropagation();
})
</script>
</body>
</html>
5.按鈕顯示事件
#選中按鈕后會(huì)產(chǎn)生相應(yīng)的事件(背景顏色改變)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div button{
width: 85px;
height: 40px;
background-color: #FF0000;
color: antiquewhite;
outline: none;
border: 0;
margin: 20px;
}
</style>
</head>
<body>
<div id="buttons">
<button ><input type="checkbox"/>獅子</button>
<button ><input type="checkbox"/>老虎</button>
<button ><input type="checkbox"/>老鼠</button>
<button ><input type="checkbox"/>老鷹</button>
<button ><input type="checkbox"/>海豚</button>
<button ><input type="checkbox"/>海馬</button>
<button ><input type="checkbox"/>大象</button>
<button ><input type="checkbox"/>獵豹</button>
<button ><input type="checkbox"/>刺猬</button>
<button ><input type="checkbox"/>螞蟻</button>
</div>
<script>
var buttons = document.querySelectorAll('#buttons>button');
for (var i = 0; i < buttons.length; i += 1){
buttons[i].firstChild.addEventListener('click' , function(evt){
var checkbox = evt.target || evt.srcElement;
if(checkbox.checked){
checkbox.parentNode.style.backgroundColor = 'lightseagreen';
}else{
checkbox.parentNode.style.backgroundColor = 'red';
}
evt.stopPropagation();
});
buttons[i].addEventListener('click', function(evt){
var button = evt.target || evt.srcElement;
var checkbox = button.firstChild;
checkbox.checked = ! checkbox.checked;
if(checkbox.checked){
checkbox.parentNode.style.backgroundColor = 'lightseagreen';
}else{
checkbox.parentNode.style.backgroundColor = 'red';
}
});
}
// window.alert('你選中了' + evt.target.textContent);
/*瀏覽器兼容性處理
通過(guò)事件對(duì)象的target屬性可以獲取事件源(誰(shuí)引發(fā)了事件)
但是有的瀏覽器是通過(guò)srcElement屬性獲取事件源的
可以通過(guò)短路或運(yùn)算來(lái)解決這個(gè)兼容性問(wèn)題
var button = evt.target || evt.srcElement;
window.alert('你選中了' + button.textContent);
*/
/*
當(dāng)獲取到一個(gè)元素只會(huì)可以通過(guò)它的屬性來(lái)獲取他的父元素、子元素和兄弟元素
parentNode - 父元素
firstChild/lastChild/children - 第一個(gè)元素/最后一個(gè)元素/所有的元素
previousSibling / nextSibiling - 前一個(gè)兄弟元素 / 后一個(gè)兄弟元素
*/
</script>
</body>
