jQuery 新手入门教程

jQuery 新手入门教程

　　什么是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元素前，可能会有一个空的

　　例如这个效果>>>，千万不要遗漏！

　　2.中的js

　　⑴在调用的js中，肯定会有一个js的文件名中带有“jQuery”，直接把这个文件的代码复制，变成你自己的文件。

　　⑵在中一定还有另一个js，这个js中会有以下代码：

　　$(document).ready(function() {

　　// 中间为其他代码

　　});

　　这个js可能是调用的外部文件，也可能就在head（body中也有可能，不过可能性低）中以形式出现。这个部分一定会出现之前HTML中的id或者class。一定要保持一致，如果想用其他的名字，一定要记得HTML中和js中同步，不一样就功亏一篑了

　　第三步：本地测试并修改错误

　　本地新建HTML，CSS，JS，把扒到的代码都放进去，该调用的文件都调用好。激动人心的时刻到了！用浏览器打开静态页，看是否出效果。如果出了，恭喜你！进入下一步，改造成你自己的东西！如果没出就开始仔细检查吧：

　　⑴HTML中可能出错的地方：

　　①你修改了HTML中的id或class【解决方法：改回原来的】

　　②遗漏了空的

　　【解决方法：检查你扒下的HTML，看看前后有没有空的，有了就加上再试试】

　　⑵JS中可能出错的地方：

　　①调用路径出错【解决方法：修改为有效的调用路径，把js和HTML放一起最方便】

　　②遗漏了ready（上面有详细代码）这个js（可能是外部文件，可能是head中的代码）【解决方法：在原静态页中寻找有ready的这段代码，copy并加上】

　　③ready中的id或者class和HTML中的不一致【解决方法：在原HTML和js中找到对应关系，并修改为一致】

　　第四步：修改HTML和css，变成你自己的东西

　　这步就没有固定的方法了，你想怎么修改就怎么修改，不过千万注意HTML中的id何class要和js对应！

　　第五步：加入到你自己的页面中

　　这个基本没什么说的，不过还是想给wp的用户说一句：外部文件调用都在主题文件夹中的header.php中（我就找了半天~~~~）

【jQuery 新手入门教程】相关文章：