jQuery 白痴级入门教程

150 阅读 0 评论 99 点赞

我是靠谱客的博主碧蓝钻石，最近开发中收集的这篇文章主要介绍jQuery 白痴级入门教程，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

会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，很实用）>>>