目录
DOM(Document Object Model)：文档对象模型，通过 HTML DOM，JavaScript 能够访问和改变（增删改） HTML 文档的所有元素
文档(doucument)：一个页面就是一个文档
元素(element)：页面中的所有的标签都是元素，每一个元素都看成是一个对象
节点(node)：页面中所有的内容都是节点（标签、属性、文本[文字、空格、换行等]）
根元素：<html>
由文档及文档中的所有的元素(标签)组成的一个树形结构图，叫树状图(DOM树)
事件：一件事，有触发、响应、事件源（大多数事件以"on"开头，比如点击事件:onclick）
举例说明：事件---按钮被点击，弹出对话框
点击--->事件名字 按钮--->事件源 被点了--->触发 弹框--->响应
1.为元素注册事件案例(onclick事件)
2.点击按钮显示图片并设置其宽高
3.点击按钮修改p标签的内容
4.点击按钮修改a标签的地址和文字内容
5.点击按钮设置多个p标签的内容
6.点击按钮修改图片的alt和title属性
7.点击按钮修改所有文本框的值
8.点击每个图片弹出对话框
9.点击按钮修改当前按钮(自身)的value属性
10.排他功能
11.点击超链接切换图片
补充：阻止超链接的默认跳转
12.点击按钮切换图片
13.点击按钮修改性别(单选)和兴趣(多选)
补充：修改文本域的值
14.点击按钮修改div样式
下列两种方法的效果一致：
15.点击按钮隐藏和显示div
16.网页开/关灯
17.画廊(11的加强版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画廊</title>
</head>
<style>
body{
margin: 0;
padding: 0;
text-align: center;
}
#image_gallery{
width: 1000px;
overflow: hidden;
margin: auto;
}
li{
list-style: none;
float: left;
margin: 10px 30px;
}
</style>
<body>
<h2>画廊</h2>
<ul id="image_gallery">
<li><a href="images/pic1.jpg" title="大图1">
<img src="images/pic1_1.jpg" alt="小图1"/>
</a></li>
<li><a href="images/pic1.jpg" title="大图2">
<img src="images/pic1_1.jpg" alt="小图2"/>
</a></li>
<li><a href="images/pic1.jpg" title="大图3">
<img src="images/pic1_1.jpg" alt="小图3"/>
</a></li>
</ul>
<img id="image" src="images/scenery_02.jpg"/>
<p id="des">选择一个图片</p>
<script>
function my$(id) {
return document.getElementById(id);
}
var aObjs=my$("image_gallery").getElementsByTagName("a");
for(var i=0;i<aObjs.length;i++){
aObjs[i].onclick=function () {
my$("image").src=this.href;
my$("des").innerText=this.title;
return false;
}
}
</script>
</body>
</html>18.列表隔行变色
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
