一、浏览器中的JavaScript
1.JavaScript的对象
浏览器中的JavaScript主要包含三个要点：
1.ECMAScript:JavaScript语法规范。
2.BOM:浏览器对象模型(Browser Object Model)，把浏览器当成一个对象(window)，通过这个对象可以操控浏览器。
3.DOM:文档对象模型(Document Object Model)，把整个页面当成一个对象(document)，通过这个对象可以操作整个页面。
二、延时跳转
1.location属性
window对象的location属性代表浏览器地址栏。
2.arguments对象
a.arguments是函数中的隐含对象。
b.arguments.callee代表正在被调用的函数。
c.通过arguments.callee可以获得正在被调用的函数。
代码
<!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(){
// 对象 -> 伪数组
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属性代表浏览器地址栏
window.location.href = 'https://www.baidu.com';
}else{
span.textContent = countDown;
arguments.callee
window.setTimeout(arguments.callee,1000)
}
},1000);
</script>
</body>
</html>
测试结果
1.PNG
三、轮播图
1.通过document对象获取页面元素的常用方法
a.document.getElementById('id') -> 通过ID获取单个元素
b.document.getElementsByTagName('标签名') -> 通过标签名获取元素的列表
c.document.getElementsByClassName('类名') -> 通过类名获取元素的列表
d.document.querySelector('') -> 通过样式表选择器获取单个元素
e.document.querySelectorAll('') -> 通过样式表选择器获取元素的列表
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
#adv{
width:940px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="adv">
<img src="img/image1.jpg" alt="" width="940px" height="430px"/>
</div>
<script type="text/javascript">
var index = 0;
var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg']
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.PNG
四、绑定事件
1.绑定事件的运用
a.当你知道事件发生时要做什么，但是你不知道事件什么时候发生，在这种情况下通常的处理方式都是绑定一个事件回调函数(callback)。
b.closeWindow以及下面的匿名函数都属于事件发生时才执行的回调函数。
c.给okButton绑定click事件的回调函数。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定事件</title>
</head>
<body>
<button id="ok">确定</button>
<script type="text/javascript">
var okButton = document.querySelector('#ok');
/*okButton.onclick = function(){
window.alert('hello,world!');
};
okButton.onclick = function(){
if(window.confirm('Close the window?')){
window.close();
}
};*/
function closeWindow(){
if (window.confirm('Close the window?')){
//close() -> window.close()
window.close();
}
}
// okButton.addEventListener('click',closeWindow);
okButton.addEventListener('click',function(){
window.alert('hello,world!');
//okButton.removeEventListener('click',closeWindow);
okButton.removeEventListener('click',arguments.callee);
});
</script>
</body>
</html>
测试结果
4.PNG
五、绑定冒泡捕获事件
1.添加监听事件
addEventListener方法的第一个参数是事件名。
第二个参数是事件发生时需要执行的回调函数。
第三个参数是一个布尔值。
如果是true 表示事件捕获 -> 从外层向内层传递事件
如果是false 表示事件冒泡 -> 从内层向外层传递事件
一般情况下我们事件处理的方式都是事件冒泡(默认行为)。
如果想阻止事件的传播行为可以调用事件对象的stopPropagation方法。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定冒泡捕获事件</title>
<style type="text/css">
#div1{
width: 400px;
height: 400px;
background-color: red;
position: relative;
margin: 60px auto;
}
#div2{
width: 300px;
height: 300px;
background-color: green;
position: relative;
top:50px;
left: 50px;
}
#div3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
top:50px;
left: 50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
<script type="text/javascript">
var div1 = document.querySelector('#div1');
var div2 = document.querySelector('#div2');
var div3 = document.querySelector('#div3');
//冒泡事件
div1.addEventListener('click',function(){
window.alert('I am one!')
});
div2.addEventListener('click',function(){
window.alert('I am two!')
});
//事件回调函数中的第一个参数是事件对象(封装了和事件相关的信息)
div3.addEventListener('click',function(evt){
window.alert('I am three!')
evt.stopPropagation();
});
/*
捕获事件
div1.addEventListener('click',function(){
window.alert('I am one!')
},true);
div2.addEventListener('click',function(){
window.alert('I am two!')
},true);
div3.addEventListener('click',function(evt){
window.alert('I am three!')
},true);
*/
</script>
</body>
</html>
测试结果
5.PNG
六、按钮事件
1.获取时间源
evt.target -> 选中事件源
通过事件对象的target属性可以获取事件源(谁引发了事件)。
但是有的浏览器是通过srcElement属性获取事件源的。
可以通过短路或运算来解决这个兼容性问题。
2.元素获取它的父元素、子元素以及兄弟元素
当获取到一个元素之后可以通过它的属性来获取它的父元素、子元素以及兄弟元素parentNode -> 父元素
firstChild / lastChild / children -> 第一个子元素/最后一个子元素/所有子元素
previousSibling / nextSibling -> 前一个兄弟元素 / 后一个兄弟元素
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮事件</title>
<style type="text/css">
#buttons{
width: 1000px;
height: 50px;
margin: 100px auto;
background-color: papayawhip;
position: relative;
}
#buttons button{
width: 80px;
height: 30px;
background-color: coral;
color: white;
border: none;
position: relative;
left: 80px;
top: 10px;
}
</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 type="text/javascript">
var buttons = document.querySelectorAll('#buttons>button');
for (var i=0; i < buttons.length; i++ ){
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 = 'coral';
}
//阻止冒泡事件
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){
button.style.backgroundColor = 'lightseagreen';
}else{
button.style.backgroundColor = 'coral';
}
});
}
</script>
</body>
</html>
测试结果
6.PNG
七、作业
作业1
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type="text/css">
#box{
width: 400px;
height: 350px;
margin: 0 auto;
margin-top: 100px;
}
#images{
width: 200px;
height: 50px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<div id="image">
<img src="img/picture-1.jpg"/>
</div>
<div id="images">
<img id="img1" src="img/thumb-1.jpg"/>
<img id="img2" src="img/thumb-2.jpg"/>
<img id="img3" src="img/thumb-3.jpg"/>
</div>
</div>
<script type="text/javascript">
var img1 = document.querySelector('#img1');
img1.addEventListener('click',function(){
var img = document.querySelector('#image img');
img.src = 'img/picture-1.jpg'
});
var img2 = document.querySelector('#img2');
img2.addEventListener('click',function(){
var img = document.querySelector('#image img');
img.src = 'img/picture-2.jpg'
});
var img3 = document.querySelector('#img3');
img3.addEventListener('click',function(){
var img = document.querySelector('#image img');
img.src = 'img/picture-3.jpg'
});
</script>
</body>
</html>
测试结果
1.PNG
作业2
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业2</title>
<style type="text/css">
#adv{
width:1240px;
position: relative;
margin: 0 auto;
}
ul{
float: left;
position: relative;
top: 380px;
left: 500px;
}
ul li{
list-style: none;
float: left;
font-size:20px;
color:lightslategray;
}
#li1{
color:lightgray;
}
</style>
</head>
<body>
<div id="adv">
<img src="img/image1.jpg" alt="" width="940px" height="430px"/>
<ul>
<li id="li1">●</li>
<li id="li2">●</li>
<li id="li3">●</li>
<li id="li4">●</li>
</ul>
</div>
<script type="text/javascript">
var index = 0;
var images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg']
var img = document.querySelector('img');
var timerId;
startIt();
var div = document.querySelector('#adv');
var buttons = document.querySelectorAll('li');
function startIt(){
timerId = window.setInterval(function() {
buttons[index].style.color = 'lightslategray';
index += 1;
index %= images.length;
img.src = 'img/'+ images[index];
buttons[index].style.color = 'lightgray';
},2000);
}
function stopIt(){
window.clearInterval(timerId);
}
var button1 = document.querySelector('#li1');
var button2 = document.querySelector('#li2');
var button3 = document.querySelector('#li3');
var button4 = document.querySelector('#li4');
button1.addEventListener('mouseover',function(){
button1.style.cursor = 'pointer';
stopIt();
img.src = 'img/'+ images[0];
button1.style.color='lightgray';
button2.style.color='lightslategray';
button3.style.color='lightslategray';
button4.style.color='lightslategray';
});
button1.addEventListener('mouseout',startIt);
button2.addEventListener('mouseover',function(){
button2.style.cursor = 'pointer';
stopIt();
img.src = 'img/'+ images[1];
button1.style.color='lightslategray';
button2.style.color='lightgray';
button3.style.color='lightslategray';
button4.style.color='lightslategray';
});
button2.addEventListener('mouseout',startIt);
button3.addEventListener('mouseover',function(){
button3.style.cursor = 'pointer';
stopIt();
img.src = 'img/'+ images[2];
button1.style.color='lightslategray';
button2.style.color='lightslategray';
button3.style.color='lightgray';
button4.style.color='lightslategray';
});
button3.addEventListener('mouseout',startIt);
button4.addEventListener('mouseover',function(){
button4.style.cursor = 'pointer';
stopIt();
img.src = 'img/'+ images[3];
button1.style.color='lightslategray';
button2.style.color='lightslategray';
button3.style.color='lightslategray';
button4.style.color='lightgray';
});
button4.addEventListener('mouseout',startIt);
</script>
</body>
</html>
测试结果
2.PNG
