怎么在网站中正确使用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文件)。

原文地址:https://www.cnblogs.com/homg/p/3344949.html