会JS的请绕行,本文对你太白痴;不会HTML和CSS的请绕行,你可能会看不懂下面的内容。(英文最好也会一点,不然会很麻烦)
什么是jQuery?
jQuery是一个JavaScript库,白痴解释就是一个JavaScript工具箱,很多现成的工具,想用什么就拿什么。省去了自己重新编写代码的烦恼,对于像我一样的JS白痴,更是容易上手。
jQuery能做什么?
他能让你的页面产生很多让人惊喜的动态效果,简单的说就是让你的网站更加漂亮,这里有很多不同的效果,点击查看>>>
怎么用jQuery?
简单的说:在页面中调用jQuery库(一个js文件),就可以方便的使用其中的工具了(使用时需要另一个js调用jQuery中的工具),从而实现想要的效果。
第一步:寻找想要的效果
本站的效果都出自两个地方:sonicHTML,jQuery tools。网络上有更多的效果,如果愿意花时间,可以去其他地方找找。
第二步:扒代码
首先推荐扒代码利器Firefox+firebug。如果没有,赶快去下!在扒代码是要十分小心两个地方!
1.静态页中的html和css
用firebug扒取页面中你想要部分的HTML和CSS代码,该部分的id和class千万不要动,保持原状!
同时,在你想要的HTML元素前,可能会有一个空的<div>例如这个效果>>>,千万不要遗漏!
2.<head></header>中的js
⑴在调用的js中,肯定会有一个js的文件名中带有“jQuery”,直接把这个文件的代码复制,变成你自己的文件。
⑵在<head></header>中一定还有另一个js,这个js中会有以下代码:
$(document).ready(function() {
// 中间为其他代码
});
这个js可能是调用的外部文件,也可能就在head(body中也有可能,不过可能性低)中以<script></script>形式出现。这个部分一定会出现之前HTML中的id或者class。一定要保持一致,如果想用其他的名字,一定要记得HTML中和js中同步,不一样就功亏一篑了
第三步:本地测试并修改错误
本地新建HTML,CSS,JS,把扒到的代码都放进去,该调用的文件都调用好。激动人心的时刻到了!用浏览器打开静态页,看是否出效果。如果出了,恭喜你!进入下一步,改造成你自己的东西!如果没出就开始仔细检查吧:
⑴HTML中可能出错的地方:
①你修改了HTML中的id或class【解决方法:改回原来的】
②遗漏了空的<div>【解决方法:检查你扒下的HTML,看看前后有没有空的<div>,有了就加上再试试】
⑵JS中可能出错的地方:
①调用路径出错【解决方法:修改为有效的调用路径,把js和HTML放一起最方便】
②遗漏了ready(上面有详细代码)这个js(可能是外部文件,可能是head中的代码)【解决方法:在原静态页中寻找有ready的这段代码,copy并加上】
③ready中的id或者class和HTML中的不一致【解决方法:在原HTML和js中找到对应关系,并修改为一致】
第四步:修改HTML和css,变成你自己的东西
这步就没有固定的方法了,你想怎么修改就怎么修改,不过千万注意HTML中的id何class要和js对应!
第五步:加入到你自己的页面中
这个基本没什么说的,不过还是想给wp的用户说一句:外部文件调用都在主题文件夹中的header.php中(我就找了半天~~~~)
附:
1.jQuery官网中十分完整的教程(很详细,想学习的推荐仔细看)>>>
2.jQuery tools 中的入门手册(短小精悍,想快速入门的强烈推荐)>>>
3.sonicHTML(greader中订阅的博客,经常有案例和Demo,很实用)>>>