jQuery 白痴级入门教程

兰亭为花醉

兰亭为花醉

2016-02-19 14:37

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的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

⑵JS中可能出错的地方:

①调用路径出错

②遗漏了ready(上面有详细代码)这个js(可能是外部文件,可能是head中的代码)

③ready中的id或者class和HTML中的不一致

第四步:修改HTML和css,变成你自己的东西
这步就没有固定的方法了,你想怎么修改就怎么修改,不过千万注意HTML中的id何class要和js对应!

第五步:加入到你自己的页面中
这个基本没什么说的,不过还是想给wp的用户说一句:外部文件调用都在主题文件夹中的header.php中(我就找了半天~~~~)
附:

1.jQuery官网中十分完整的教程(很详细,想学习的推荐仔细看)

2.jQuery tools 中的入门手册(短小精悍,想快速入门的强烈推荐)

3.sonicHTML(greader中订阅的博客,经常有案例和Demo,很实用)
展开更多 50%)
分享

猜你喜欢

jQuery 白痴级入门教程

Web开发
jQuery 白痴级入门教程

AS入门教程

flash教程
AS入门教程

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Mysql入门教程

编程语言 网络编程
Mysql入门教程

AJAX入门教程

Web开发
AJAX入门教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

文字排版入门教程

电脑网络
文字排版入门教程

JSP入门教程(1)

Java JAVA基础
JSP入门教程(1)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何辨别Linux中的open和fopen函数

如何辨别Linux中的open和fopen函数

Oracle 9i数据库中动态重配置深入分析

Oracle 9i数据库中动态重配置深入分析
下拉加载更多内容 ↓