js中元素（图片）切换和隐藏显示问题

这个知识点其实也简单，（当然是在理清思路的情况下），在没预习的情况下听的还真是艰难，上课以来唯一的一次懵逼了一天，感觉乱乱的，全是新属性，所以今晚的我破天荒的熬夜敲代码，一定要弄懂！

现在就来梳理下头绪：

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>

以上就是今天学的重点,多敲了几遍,慢慢补充吧!晚安 .