jQuery白痴级入门教程

http://xiaoqiang.me/?p=539

本文写给那些完全不懂JS,只会一些HTML和CSS的同学!本站就是范例

会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,很实用)>>>


你可能感兴趣的:(jquery)