如何正确使用jQuery代码
题外话:真得,俺折腾的不是jQuery,是寂寞!(忽见,锅碗瓢盆夹杂一堆不明物飞来……啊~哇~呀)
关注小博的童鞋朋友都知道,最近俺在疯狂得折腾jQuery,而且成果显著发文多多,也有用俺发出来的代码加到小站上的。独乐乐不如众乐乐,俺一人折腾不如一票人一起折腾。不过问题也随之出现了,有些小朋友不懂jQuery来着,而俺又是直接上代码来着,让他们看着代码兴叹怎么用呀!
好啦,这就把如何正确使用jQuery的方法步骤补上:
一、在header.php的head标签中加载jQuery库(非加不可):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
当然,如果你觉得你的主机比GG更稳定更速度,那放本地也行的!
二、添加利用这个库让元素动起来的代码(可理解为命令代码):
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
上面这段就是让首页文章列表左手边上的滑动按钮起作用的jQuery代码,那我们又该如何使用这个代码呢?有二个方法:
1.直接在header.php添加如下结构的代码:
<script type="text/javascript" >jQuery(document).ready(function($){ //注意要用这个把jQuery代码都包裹起来,不然里面的可都是无效的哦~ $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);}); //代码段二…… //代码段三……});</script>
2.推荐把方法1说的代码另存为.js文件:
jQuery(document).ready(function($){ $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);}); });
然后再在header.php的head标签中添加:
<script type="text/javascript" src="http://xxxooo.com/xxxooo.js"></script>
好了,回头看看也挺简单的吧?那以后俺可直接上jQuery代码咯!