jQuery 白痴级入门教程

2016-02-19 14:37 5 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的jQuery 白痴级入门教程懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

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

来源:http://www.tulaoshi.com/n/20160219/1607361.html

延伸阅读
标签: Web开发
链接(a)     对于很多追求页面美观的站长来说,默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了CSS之后我们就不用担心了。下面就看看如何修改网页的链接样式。 1. 改变整个页面的链接样式 。style type="text/css" a:link { color: #FF0000; text-decoration: none; } a:visited { c...
标签: Java JAVA基础
  使用脚本 在有些地方,你大概要加一些好的,成熟的程序到你的JSP页里,JSP的标签虽然很强大,但是完成某些工作还是比较费力的困难的。这时你可以使用脚本语言段来补充JSP标签。 使用的JSP引擎是支持脚本语言的,SUN的JSP参考文说明,必须使用Java程序语言来编写脚本,但是其他第三方的JSP引擎允许使用其他语言来写脚本程。 如何增加...
数 组 是 有 序 数 据 的 集 合 ,数 组 中 的 每 个 元 素 具 有 相 同 的 数 据 类 型 ,可 以 用 一 个 统 一 的 数 组 名 和 下 标 来 唯 一 地 确 定 数 组 中 的 元 素 。 数 组 有 一 维 数 组 和 多 维 数 组 ,下 面 我 们 分 别 介 绍 。 § 5.1 一 维 数 组 一 、 一 维 数 组 的 定 义 一 维 ...
MindManager新手入门教程 MindManager是一款创造、管理和交流思想的思维导图软件,其直观清晰的可视化界面和强大的功能可以快速捕捉、组织和共享思维、想法、资源和项目进程等等。MindManager新手入门教程专为新手用户设计,包含创建思维导图基本入门操作,让用户快速上手。 MindManager思维导图主要由中心主题、主题、子主题、附注...
标签: 电脑入门
新建的Word文档背景都是单调的白色,如果需要,我们可以按下面的方法为其添加背景或水印。 执行格式→背景,选用下列操作之一: 1.在颜色板内直接单击选择所需颜色。 2.如果上面的颜色不合要求,可单击其他颜色选取其他颜色。 3.单击填充效果可添加渐变、纹理、图案或图片。 提示:重新进行上述操作可更改背景色或填充效果;要删除设置...

经验教程

345

收藏

49
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部