jQuery 白痴级入门教程
更新时间：2009年11月11日 17:41:20 作者：
本文写给那些完全不懂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？
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中需要注意的细节问题小结，使用jquery的朋友可以参考下。2011-12-12
在做一个表单签核系统时，需在要签核页面中将表单内容（事先做好的PHP页面）显示出来，于就是想能不能利用Ajax技术把这个事先做好的页面嵌入到签核页面中呢？2009-02-02
这篇文章主要介绍了jquery实现弹出层效果的方法,实例分析了jQuery实现弹出层的技巧,涉及jQuery操作页面元素与样式的技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jquery实现不同大小浏览器使用不同的css样式表的方法,需要的朋友可以参考下2014-04-04
下面小编就为大家带来一篇浅谈jquery中使用canvas的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
想要实现从本地中加载json文件，通过事件来动态的插入到ul中时，遇到了一小bug,下面小编给大家解答下2016-12-12
这篇文章主要介绍了jQuery中的关系查找方法，关系查找方法分有children()子级、siblings()兄弟的一些方式，下文都有介绍到，文章内容介绍详细，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-03-03
BootStrap glyphicon图标无法显示的解决方法
如果不注意bootstrap引入css和fonts的规范，则可能会导致bootstrap 在显示glyphicon图标时无法正常显示，显示为方框。该怎么解决呢？下面小编给大家解答下2016-09-09
本文是jQuery学习笔记系列文章的第一篇，跟大多数开篇文章一样，我们来讲解下jQuery最基础的东西，希望大家能够喜欢。2015-01-01
下面小编就为大家带来一篇修改jquery中dialog的title属性方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论