怎么在网站中正确使用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/archive/2013/04/03/3344949.html

怎么在网站中正确使用JQuery代码相关推荐

Xpath在选择器中正确，在代码中返回的是空列表问题
Xpath在选择器中正确,在代码中返回的是空列表问题一.问题: 在进行爬虫的时候我们会用到xpath解析html文件,但是会有一种情况就是在xpath选择器中可以使用,但是在代码中就无法使用的情况. ...
Vue中正确使用jQuery的方法
题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢 _^ ^_),结果遇到问题,最终倒腾解决. 编译报错:$ is undefin ...
如何在Visual Studio项目中正确添加汇编代码 .
引用注明>> [作者:张佩][镜像:www.yiiyee.cn/blog] 1. 问题描述在以往的编程经历中,本人最常使用的汇编代码是__asm {int 3}.它可以在我的代 ...
怎么书写高质量jQuery代码
众所周知,jQuery现在已经非常流行,百度新首页中也已经开始使用jQuery,今天总结下怎么书写更好的jQuery代码使jQuery代码更好.更快的执行,希望本篇jQuery教程一改大家以前不合理的 ...
jquery中邮箱地址 URL网站地址正则验证实例代码
jquery中邮箱地址 URL网站地址正则验证实例代码 QQ网站有一个网站举报的功能,看了一些js代码觉得写得很不错,我就拿下来了,下面是一个email验证与url网址验证js代码,分享给大家 ema ...
jquery的html代码中a的onclick的正确显示的代码
jquery的html代码中a的onclick的正确显示的代码 jquery的html代码中a的onclick的正确显示的代码需要转义一下,试了好久才试出来 img_delete.html('< ...
HTML中添加图片的代码是什么？html如何正确的添加图片路径？
首先我们先认识一下html中添加图片的代码: html中添加图片的就是<img>标签,是一个单标签,是可以从任何地方拉来图片添加的,但是你得正确的确定添加图片的路径,不然就显示不出来图片, ...
基于jQuery商城网站全屏图片切换代码
基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="sli ...
在vue项目中正确的引入jquery
最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...

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

怎么在网站中正确使用JQuery代码相关推荐

最新文章

热门文章