jQuery 白痴级入门教程


Posted in Javascript onNovember 11, 2009

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

Javascript 相关文章推荐
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
详解React中的组件通信问题
Jul 31 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
Javascript 解疑
Nov 11 #Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 #Javascript
jquery 输入框数字限制插件
Nov 10 #Javascript
通过隐藏option实现select的联动效果
Nov 10 #Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 #Javascript
asp.net HttpHandler实现图片防盗链
Nov 09 #Javascript
为javascript添加String.Format方法
Aug 11 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
在Python中移动目录结构的方法
2016/01/31 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
小车司机岗位职责
2013/11/25 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers