初识javascript美术馆

不断学习，对前端开发来说很是重要，况且咱还是菜鸟更需要好好学习。jquery虽然可以满足很多需求，但是想好好学习下原生javascript，按捺不住，那颗折腾的心。
最近看javascript dom 编程艺术，今天看到javascript美术馆，觉得这个写的不错，由浅到深入，那些例子可以衍变出很多效果。
下面和jquery博客一起去初识javascript美术馆吧。
现在这个例子感觉有点神似tab选项卡,切换来着。
HTML结构部分代码
<ul>
    <li><a href="http://img01.taobaocdn.com/bao/uploaded/i1/T1.1CCXjx3XXXzYd3._111717.jpg_160x160.jpg" rel="nofollow">哆啦a梦</a></li>
    <li><a href="http://img01.taobaocdn.com/bao/uploaded/i1/T1EAWQXjtvXXaaewYa_120947.jpg_160x160.jpg" rel="nofollow">汽车图案</a></li>
    <li><a href="http://img01.taobaocdn.com/bao/uploaded/i1/T1ise1XbBcXXbZlnEW_025017.jpg_160x160.jpg" rel="nofollow">喜洋洋</a></li>
</ul>
<img src="http://img01.taobaocdn.com/bao/uploaded/i1/T1.1CCXjx3XXXzYd3._111717.jpg_160x160.jpg" id="placeholder" rel="nofollow">
接下来要实现javascript代码部分
给函数起个好点名字，这边就沿用书中的命名方式了，好方便以后继续学习之用。
function showPic(whichpic)
whichpic代表一个元素的节点,可以进步一说明,那就是指向某个图片的a标签元素。
我们需要制定那个图片的文件路径，这个路径可以通过在whichpic元素上调用getAttribute()方法来查出，只需要把”href”当做参数传递给getAttribute()方法，就可以知道那个图片的文件路径了
whichpic.getAttribute(“href”);
然后我们把这个路径存到一个变量中以便我们在后面再次使用，命名变量为source:
var source=whichpic.getAttribute(“href”);
下面，我们需要下面那个图片检索出来，img中已经有id，这样getElementById()来实现很是没有压力。
document.getElementById(“placeholder”);
依然存入变量，命名为placeholder
var placeholder=document.getElementById(“placeholder”);
下面使用setAttribute()方法对placeholder元素的src属性进行刷新重新赋值。
placeholder.setAttribute(“src”,source);
PS:存入变量感觉和 jquery 中差不多，一来方便调用，二来估计就是提高运算效率了，自己 feel的，如果说的不合适，欢迎指正，改进下。
完整的showPic()函数代码清单如下:
function showPic(whichpic){
    var socure=whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",socure);
}
函数都已经部署完成，我们现在需要个事件处理函数，我们想让用户点击某个链接的时候触发一个动作，显示那个指定的图片，所以onclick就你啦，完成这个艰巨任务吧。
通过onclick事件处理函数去触发的动作是调用showPic()函数,而要想调用这个函数，就得给它传递一个参数，一个带有href属性的元素节点.在HTML结构中，当我把onclick事件处理函数嵌入一些链接时候，我们需要把那些链接本身当做showPic()函数的参数。
有个简单有效的办法可以实现这个，使用this关键字showPic(this)
综上所述,我们使用onclick事件处理函数去调用showPic(this)方法.使用事件处理函数调用javascript代码语法是这样的event=”javascript statement(s)”
用onclick替代下 就是onclick=”showPic(this)”
可是放入的遇到一个问题,在onclick事件发生时候，不仅showPic(this)函数被调用,链接点击的时候默认行为也会发生，用户会在新窗口打开图片，这个不是我们想到的效果，必须阻止这样的效果发生。
是这样的在我们对某个元素进行添加事件处理函数后，一旦发生预定事件，相应的javascript代码就会得到执行；那些javascript代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。比如我们可以给某个链接加个onclick事件处理函数，并让这个处理函数所触发的javasript代码返回布尔值true或者false。这样的话，当这个链接被点击的时候，如果那段javasript代码返回个onclick事件处理的函数值是true,onclick事件处理函数认为这个链接被点击了，反之的话如果那段javascript代码返回onclick事件处理函数值是false,onlick事件处理函数认为 这个链接没有被点击。
可以用个简单的例子来测试验证个
1
<a href="http://www.jqueryba.com/" onclick="return false">Click Me Jquerya</a>
看到了吧当点击这个链接的时候，因为onclick事件处理函数触发javascript的代码值是false，所以这个链接再被点击的时候默认行为将不会发生。
这样的话，咱就明朗了,只需要onclick=”showPic(this);return false”;
这样一个简单的javascript美术馆就可以实现了，继续学习加油中。
在线效果DEOM

转自 jquery http://www.jqueryba.com/695.html