事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="btn" value="点我">
<div id="main">1111</div>
<script>
// 事件：当什么时候做什么事情
// 触发-响应
//1 获取按钮
var btn = document.getElementById('btn');
//2 给按钮注册事件
//事件名称 click
//事件源：谁触发的事件
//事件处理函数：
btn.onclick = function () {
alert('别点我，疼');
}
// 给div注册事件
var div = document.getElementById('main');
div.onclick = function () {
alert('我是div');
}
</script>
</body>
</html>
点击按钮切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="点我" id="btn">
<br>
<img src="images/a.jpg" id="mv" alt="" width="400" height="300">
<script>
// 1 获取元素
var btn = document.getElementById('btn');
var mv = document.getElementById('mv');
// 2 给按钮注册事件
var flag = 1; // 当flag的值是1 的时候 对应a.jpg 当flag的值是2的时候 对应 b.jpg
btn.onclick = function () {
// 3 切换图片
if (flag === 1) {
mv.src = 'images/b.jpg';
flag = 2;
} else if (flag === 2) {
mv.src = 'images/a.jpg';
flag = 1;
}
}
</script>
</body>
</html>
非表单元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="link" href="http://www.baidu.com" title="我是百度">百度</a>
<img id="mv" src="images/a.jpg" alt="美女">
<script>
var link = document.getElementById('link');
var mv = document.getElementById('mv');
// 获取DOM对象的属性值
console.log(link.id);
console.log(link.href);
console.log(link.title);
console.log(mv.id);
console.log(mv.src);
console.log(mv.alt);
// 设置DOM对象的属性
link.href = 'http://www.google.com';
link.title = 'google';
</script>
</body>
</html>
点击按钮隐藏显示div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
background-color: red;
width: 200px;
height: 200px;
}
.show {
display: block;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隐藏">
<br>
<div id="box" >
</div>
<script>
//1 获取元素
var btn = document.getElementById('btn');
//2 给按钮注册事件
// isShow记录了box的状态，true 显示 ，false 隐藏
var isShow = true;
btn.onclick = function () {
//3 控制div的显示隐藏
var box = document.getElementById('box');
if (isShow) {
// 为什么DOM对象的对应的标签的class属性的名字叫做className ，应为class 在js中是关键字
// 关键字不可以作为变量或者属性的名字
box.className = 'hidden';
// 如何设置按钮对应的元素的属性
// btn.value = '显示';
this.value = '显示';
isShow = false;
} else {
box.className = 'show';
this.value = '隐藏';
isShow = true;
}
}
//4 改变按钮中的文字
</script>
</body>
</html>
a标签的点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="link" href="http://www.baidu.com">百度</a>
<script>
var link = document.getElementById('link');
link.onclick = function () {
alert('点击我了');
// 取消a标签的默认行为（跳转到href）
return false;
}
</script>
</body>
</html>
美女相册
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
}
#imagegallery a {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery a img {
border: 0;
}
</style>
<link rel="stylesheet" href="">
<script src=""> </script>
</head>
<body>
<h2>
美女画廊
</h2>
<div id="imagegallery">
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100px" alt="美女1" />
</a>
<a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100px" alt="美女2" />
</a>
<a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100px" alt="美女3" />
</ 
