Paperen对于js了解的确实不多，以前一向就是写一些简单的功能，例如检验输入非空还有地址返回的功能还有用js控制一下样式之类的，之后直接接触JQuery，用JQuery集成的效果只需要一两行的代码，但是如果不用JQuery的框架去写js代码的话可能没有一百多行都写不出来，感觉用JQuery是方便多了，但是Paperen有空的时候也还是要去认真学习一下JavaScript的，还有prototype这个框架。?

前言就说一下自己对于js的体会吧，前些时间趁自己有空用jquery做了一个切换图片的小玩意，简单到不能再简单的东西。?

http://paperen.com/demo/js-change-pic/

首先打好html结构?

<div class="banner">
  <img src="images/big_banner1.jpg" />
 </div>
 <div class="banner_nav">
  <a id="3" href="#"></a>
  <a id="2" href="#"></a>
  <a id="1" href="#"></a>
?</div>

然后写Css，完成对html的布局与美化

<style>
*{margin:0px;padding:0px;}
.banner{width:900px;height:300px;margin:30px auto 0px auto;}
.banner_nav{height:20px;width:900px;margin:5px auto;}
.banner_nav a{float:right;background:url(images/btn.jpg) left no-repeat;display:block;width:12px;height:12px;margin:0px 2px 0px 2px;}
.banner_nav a:hover,.banner_nav a.now{color:#FFFFFF;background-position:-12px;}
</style>

再调入jquery的框架

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

我这里为了方便演示例子所以引入了网上的jquery文件，当然你可以将jquery的框架下载到本地或者放到空间中去引用下载jquery?

最后我们开始写js代码：?

$(function(){
??$(".banner_nav a").click(function(){//当.banner_nav中的a元素被点击会触发这个动作
???$(".banner_nav a").removeClass('now');//去掉所有a的now属性
???var id=this.id;//获得a的id号
???$(this).addClass('now');//为该a加上now属性
???$(".banner img").fadeOut('fast',function(){//.banner中的img执行淡出的效果
????$(".banner img").attr("src","images/big_banner"+id+".jpg");//.banner的img修改scr属性为images/big_banner"+id+".jpg
???});
???$(".banner img").fadeIn('slow');//再淡入
??});
?});?

对于JQuery，Paperen我发现了外国的一个很牛的网站 http://www.sohtanaka.com?有兴趣的可以去看看，他写的blog文章那些效果都超cool的。