怎么在网站中正确使用JQuery代码

一、在header.php的head标签中加载jQuery库（非加不可）：

 

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

 

当然，如果你觉得你的主机比Google更稳定更速度，那放本地也行的！

二、添加利用这个库让元素动起来的代码（可理解为命令代码）：

 

$('#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);}); }); [/javascript] 然后再在header.php的head标签中添加： [javascript]<script type="text/javascript" src="http://xxx.js"></script>

 

原文地址：http://zhang-zhen.com/ruhezhengqueshiyongjquerydaima.html

ps:最后一步中"http://xxx.js"格式如下： "http://wuhongge.cn/wp-content/themes/simple/js/jquery.js"（目录到wordpress的主题文件js文件中的某个.js文件）。