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 相关文章推荐
jQuery Selector选择器小结
May 06 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
微信小程序 导入图标实现过程详解
Oct 11 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实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python线性方程组求解运算示例
2018/01/17 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Django 连接sql server数据库的方法
2018/06/30 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Python扫描端口的实现
2021/01/25 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
八月一日观后感
2015/06/10 职场文书
运动会广播稿50字
2015/08/19 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers