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文件的函数代码分享
Jul 28 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
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文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
python实现基本进制转换的方法
2015/07/11 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python实现的质因式分解算法示例
2018/05/03 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
金融专业求职信
2014/08/05 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
节水倡议书
2015/01/19 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
网络营销实训总结
2015/08/03 职场文书