这个知识点其实也简单，（当然是在理清思路的情况下），在没预习的情况下听的还真是艰难，上课以来唯一的一次懵逼了一天，感觉乱乱的，全是新属性，所以今晚的我破天荒的熬夜敲代码，一定要弄懂！
现在就来梳理下头绪：
1、body里面的元素或者图片先构建好，在我们需要对其进行加一些特效的时候，这时候我们就需要用到js中的DOM对象模型；
先获取页面上需要加特效的元素,这里有三种方式,分别是:id(document.getElementById() ) 标签 ( document.getElementByTagName()) 类名 ( document.getElementByClassName()) .不过类名有浏览器兼容问题,一般不用,除非标签样式需要特殊处理.
2 事件处理
这一步对上一部获取的元素进行特效处理,这时候就需要用到函数了; 注册事件有行内式和内嵌式两种,行内式感觉属性会有点乱,(个人感觉),内嵌式的话简洁明了,一看就懂. 这里举个例子:
内嵌式 :
<body>
<a href="images/1.jpg"><img src="images/1-small.jpg"></a>
<a href="images/2.jpg"><img src="images/2-small.jpg"></a>
<a href="images/3.jpg"><img src="images/3-small.jpg"></a>
<a href="images/4.jpg"><img src="images/4-small.jpg"></a>
<a href="images/5.jpg"><img src="images/5-small.jpg"></a>
<script>
var img=document.getElementById("img";);
var links=document.getElementsByTagName("a";
for((var i=0;i<links.length;i++){){
var link=links[i];
link.onclick=function(){(){
img.src=this.href;
return false;
}
};
}
}</script>
</body>
行内式:
</head>
<body>
<a href="images/1.jpg" onclick="turn(this);return false;" id="a1"><img src="images/1-small.jpg"></a>
<a href="images/2.jpg" onclick="turn(this);return false;" id="a2"><img src="images/2-small.jpg"></a>
<a href="images/3.jpg" onclick="turn(this);return false;" id="a3"><img src="images/3-small.jpg"></a>
<a href="images/4.jpg" onclick="turn(this);return false;" id="a4"><img src="images/4-small.jpg"></a>
<a href="images/5.jpg" onclick="turn(this);return false;" id="a5"><img src="images/5-small.jpg"></a>
<img src="images/placeholder.png" id="img" width="600">
<script>
var img= document.getElementById("img");
function turn(link){){
img.src=link.href;
};
}
</script>
以上就是今天学的重点,多敲了几遍,慢慢补充吧!晚安 .