15天学会JQuery教程.docx

15天学会JQuery教程.docx

《15天学会JQuery教程.docx》由会员分享，可在线阅读，更多相关《15天学会JQuery教程.docx（34页珍藏版）》请在冰豆网上搜索。

15天学会JQuery教程

Jquery15天教程

第一章15DaysofjQueryWhat,Why,When,Where,Who

what

jQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以

创建出漂亮的页面效果。

从网站的方面说，这使得javascript更加有趣。

如果你这样想：

“孩子，我需要另外一个javascript库，就好比我Ineedanother

holeinmyhead”那么加入这个俱乐部吧。

这正是我第一次遇到的时候所想的。

我已经用过了Moo.fx,Scriptaculous,TW-SACK,和Prototype.我曾参与了

RICO,YahooYUI和其他一些库的开发。

没有了PHPjavascript和我一点也不亲近了。

但是我还是尽全力保持头脑清醒，

并尽量保持用AJAX去思考。

所以当我遇到jQuery的时候我想:

“还需要另外一个javascript库吗?

不了,谢

谢…”

why

为什么我改变我我对jQuery的看法，以及为什么你要考虑去使用它?

很简单,

只要你看一眼过使用jQuery的页面你就会发现它是如此的简单易用.只用很少

的几行,就能表现出很优雅的效果.有一天当我突然看到一些用jQuery写的代

码时我一下子豁然开朗了.早茶的过程中,我例行公务的去翻阅我的订阅,去看

每日必看的设计博客的时候我看到了一个用jQuery写的javascript的例子.事

实证明,这些代码还是有些和浏览器关联的bug,不过这些概念还是我以前从来

没有见过的.

还有那些代码…

代码看起来很简单看起来不像我以前见过的.但也不无道理.

我开始通读文档,并且惊奇的发现用一点点代码竟然能做这么多事情.

when

你应当在你需要的时候使用jQuery.

给你一个小型的库文件DOM强大的控制能力不费吹灰之力的工作,和少许的努

力.

或者

快速的通过AJAX没有大量无用的代码和一些基本的动画效果

但是

如果你需要超级花式效果,动画,拖放,和超级平稳动画,那么你可能想使用

Prototype.他是一个有大量动画效果的类库.

where

你可以jQuery的官方网站下载到他的源代码（10K）.

who

jQuerywascreatedbyJohnResig.

第二章15DaysofjQuery比window.onload更快一些的载入

window.onload（）是传统javascript里一个能吃苦耐劳的家伙。

它长久以来一直

被程序员们作为尽快解决客户端页面载入问题的捷径。

但有时候等待页面载入还是不够快。

只有少数大型的图片文件会被快速的载入，而大部分大型的图片文件会使

window.onload（）载入的很慢。

所以当我为最近的网络营销创建一个web应用程

序的时候我不得希望更快一点。

有一些围绕window.onload（）的新研究（比如

brothercake）的代码是一种快速的方式。

如果你需要，可以试试。

但是如果你要做一些DOM（文档对象模型）javascript的编程，那么你为什么不试

试jQuery，它就像你自己亲自制作一个蛋糕，并品尝它。

（双关BrotherCake，

俏皮话）。

jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是

ready…他在页面加载完成之前执行。

$（document）.ready（function（）{

//Yourcodehere...

}）;

你可以用他来载入任何你想要载入的javascript，并不一定要保留jQuery的编

码风格。

让jQuery同时去执行多个函数也是可以的。

你以前可能见过类似于init（）之类的函数，你会发现jQuery会快很多。

在以后的教程里我们会一遍又一遍的用到这个函数。

OK你现在可以尝试一下代码：

（记得把jQuery引用进你的页面哦，不记得的话

看看上篇。

）

$（document）.ready（function（）{

alert（"Congratluations!

"）;

}）;

很Easy，不是吗？

用几分钟时间做的双色表格。

第三章15DaysofjQuery（Day2）---很容易的制作双色表格

这节本身没有太多的价值，重点在它提供的这个例子上。

我将代码帖出来然后对

重点部分注释一下：

我们先来看看Thewatchmakerproject传统的做法：

预览地

址（你可以查看一下源代码）。

再来看看jQuery是如何用5行代码来搞定的:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"/xhtml1/DTD/xhtml1-transitional.dtd">

--将jQuery引用进来-->

$（document）.ready（function（）{//这个就是传说的ready

$（".stripetr"）.mouseover（function（）{

//如果鼠标移到class为stripe的表格的tr上时，执行函数

$（this）.addClass（"over"）;}）.mouseout（function（）{

//给这行添加class值为over，并且当鼠

标一出该行时执行函数

$（this）.removeClass（"over"）;}）//移除该行的class

$（".stripetr:

even"）.addClass（"alt"）;

//给class为stripe的表格的偶数行添加class值为alt

}）;

cellpadding="0">

--用class="stripe"来标识需要使用该效果的表格-->

姓名

年龄

QQ

Email

邓国梁

23

邓国梁

23

邓国梁

23

邓国梁

23

邓国梁

23

邓国梁

23

PS:

飘飘说我的table没有,我知错了...

这里有一个jQuery的技巧不得不提一下：

jQuery的链式操作，什么是链式操作

呢？

我们来看看，本来应该写成这样子的：

$（".stripetr"）.mouseover（function（）{

$（this）.addClass（"over"）;}）

$（".stripetr"）.mouseout（function（）{

$（this）.removeClass（"over"）;}）

但是我们写成了：

$（".stripetr"）.mouseover（function（）{

$（this）.addClass（"over"）;}）.mouseout（function（）{

$（this）.removeClass（"over"）;}）

因为鼠标移入移除都是发生在同一个对象上的，所以我们可以将发生在同一个对

象上的动作连起来写，这样子如果有很多对象并且在他们身上发生了很多动作那

么就会节省很多代码。

（我暂时是这样理解的，也不知道对不对希望高手能够斧

正。

）

第四章15DaysofjQuery（Day3）---巧妙的伪装链接

今天的教程是草草完成的.我想把一些东西放在这15天的前面简单的讲讲,这样

以来就可以使一些js新手不至于被一堆代码搞的晕头转向.事实上我是在即将

结尾的时候才做出的这个决定.

目标

我们要使用jQuery去创建一小段代码,这段代码会把一个页面所有的超链接转

换并且伪装起来.

为什么?

一些下属经销商认为，一部分用户有足够的悟性发现会员链接，并能尽量避免通

过点击URL链接直接进入浏览器，从而“欺骗”下属经销商脱离代理（假设购买

行为已经发生）

“老”办法

有很多下属经销商千方百计的掩饰他们的链接,避免人们通过链接找到他们.这

些伎俩涉及到.htaccess和服务器端的代码.但对于本教程,我会将重点放到”

老学校”的javascript上:

returntrue;'onMouseOut='window.status="Done";returntrue;'

href="-url-"

target="_blank">LinkTextHere

这段代码被用来在浏览器状态栏显示用户鼠标指向的链接地址.比如实际链接是

则可以在状态栏显示

问题

你是一个很活跃的下级经销商,你可能会以疯狂的速度给很多个页面添加链接.

并且还要给每个链接添加这种效果那么你肯定会厌倦的.加入有一天你要修改任

务栏里显示的链接的时候估计你会疯掉的.

jQuery的解决办法

首先,我们想让javascript尽快的掩饰我们的链接所以我们应该先从这里开始:

$（document）.ready（function（）{

//codegoeshere

}）;

当DOM准备好的时候我们放在ready里的代码就开始执行了.

接下来

要给所有我们想伪装的链接添加一个class,class有助于jQuery帮我们找到需

要伪装的链接而撇开其它不需要伪装的链接.title有两个作用:

当鼠标划过链

接的时候会有一个小小的盒状提示显示URL:

并且同样的信息

会显示在浏览器的状态栏（IEOnly）.

id=123"

title=""

class="affLink">SuperDuperProduct

告诉jQuery找到有class=“affLink”的链接

$（'a.affLink'）

添加一个鼠标划过事件

$（'a.affLink'）.mouseover（function（）{window.status=this.title;return

true;}）

简单的说:

找到class=“affLink”的所有链接,当鼠标划过它们的时候改变浏

览器状态栏信息为该链接title的内容.这个在FireFox并不能正常的工作,只

是在IE里起作用.在FireFox的状态栏只是显示一个”Done”,或者更准确的说,

鼠标划过超链接对状态栏并没有任何影响.我没有更多的浏览器测试.

继续-mouseoutjQuery可以让我们用”链”的方式,像这样:

$（'a.affLink'）.mouseover（function（）{window.status=this.title;return

true;}）

.mouseout（function（）{window.status='Done';returntrue;}）;

这点代码告诉jQuery改变浏览器状态栏信息,或者当鼠标不再停留在链接上时

返回”Done”.如果你不适应jQuery的这种链的工作方式,那么你完全可以这

样写:

$（'a.affLink'）.mouseover（function（）{window.status=this.title;return

true;}）;

$（'a.affLink'）.mouseout（function（）{window.status='Done';return

true;}）;

这就看你了.

把这些代码放到一起:

$（document）.ready（function（）{

$（'a.affLink'）.mouseover（function（）{window.status=this.title;return

true;}）

.mouseout（function（）{window.status='Done';returntrue;}）;

}）;

最后的想法你们当中可能觉得今天的课程太简单了,有些还可能还是有点不太

明白,因为你们不是二级经销商.

In“Days”tocomeyou’llseemetackleissuesthatgetmoreinvolved

andapplytoalmostanyonewithawebsite-whetheryoumonetizeyour

trafficornot.

第五章15DaysofjQuery安全邮件列表

规则提到如何防止垃圾邮件:

不要把你的邮件地址放到任何一个mailto:

链接中.

在与垃圾邮件恶魔做斗争的过程中我们的网页设计师和程序员总结出了一些有

创意的解决办法,让我们快速的看一些这些常见方法的缺点（或多或少有一些）.

name[at-no-spam]

问题:

链接式的更方便,而且把邮件地址敲入收件人栏还有可能会出错.

联系方式

问题:

你冒着这么大的风险就是因为有一个垃圾邮件借用你的帐户发送大量的垃

圾邮件（除非你使用真正的安全邮件脚本）.而这样就扼杀了那些只想给你发个简

单邮件的用户.

javascript加密

问题:

你的邮件仍然暴露在光天化日之下,即使你使用了复杂的密码技术给它带

上面具.还有谁希望为了发送一封邮件而启用第三方的解密网站,反正我是不会.

藏在一种简单的形式后面（有一个例子,但是打不开

了.）/我能想到的没有人…但是让我们看看

是否我们能改进观念。

可能的解决办法:

AJAX

我提供的解决方案将比目前设计师们使用的方法有如下优势:

•易于实施

•易于修改

•还有一些小小的花哨的效果

•不用第三方工具来加密邮件地址

•没有邮件地址暴露在光天化日之下

最后我想说明一点,我认为电子邮件靠这种闪烁其词的加密手段来躲避垃圾邮件

还是非常不明智的.在实践中,我认为电子邮件加密是相对安全的,但是客观事实

是,电子邮件还是在html原代码里.

概念

1.1.用jQuery从服务器上把html文件内容抓下来.

2.2.把包含邮件链接的html文件放到好的容器中是一种简单的保护机制.

示例

我要示范一些例子来显示邮件链接地址,当访客点击一个按钮或者一个链接的时

候,页面就会跳转到对应的那个例子里.

按钮点击--立即显示

链接点击--淡出

页面载入--淡出

页面载入--立即显示

（说明:

所谓的立即显示,我的意思是说”没有花哨的效果而尽快的显示电子邮件

地址”）

代码

这里发表非商业共创使用许可,如果你希望将代码使用在你的商业产品中时,请

联系我.我正在一个新的CMSforwebdesigners中使用它.

为什么这种方式比普通的mailto链接安全?

真正的问题是垃圾邮件制造者会使用自动化软降从html源文件中寻找电子邮

件链接,这种做法和google一样:

使用相关链接.他么就和我们大部分人一样懒

惰.所以很难所他们不会拿个本子放在键盘旁边记下你的电子邮件地址.请查看

我提供的示例的源代码,你将不会在html里找到任何的邮件地址.这几坚实的

保证了你绝对不会收到垃圾邮件,只会从朋友或者浏览者那里收到邮件.但是从

页面中移除邮件地址,…………………

最后一点说明

先仔细看看前面三个例子,你会看到我使用了AJAX回调函数来触发slideDown（）

和show（）效果.换句话说,我希望AJAX调用收到信息（html）时jQuery才开始

slideDown（）效果.把秘密粘贴到我们简单的服务段脚本并且等待服务器返回信

息.

正确的方法:

$（document）.ready（function（）{

$.post（'mailtoInfo.php',{

pass:

"secret"

},function（txt）{

$（'div.email'）.html（txt）;

$（'div.email'）.slideDown（"slow"）;

}）;

}）;

错误的方法:

$（document）.ready（function（）{

$.post（'mailtoInfo.php',{

pass:

"secret"

},function（txt）{

$（'div.email'）.html（txt）;

}）;

$（'div.email'）.slideDown（"slow"）;

}）;

第六章15DaysofjQuery（Day5）---包起来--懒人用Jquery生成的HTML

这个让我们轻松的纪念日已经到来–我恨我在计算机前已经花了48个小时，我

希望能够有另外一个jQuery来结束我的噩梦，并且让我上网更快。

当我一边“在用Jquery方法编写”和一边“进行复杂的文件上传”，我已经筋

疲力尽。

然而这两种操作的代码是一种较浅的，它只不过是你才刚刚开始解决的

一些简单问题。

所以下来我开始介绍：

尽管我在我的网站用所有的CSS样式表去进行表格设计（也许这要花费两年半的

时间或者更多），我已经用了很多我能找到的在这方面的信息。

回到2004年5

月（古代史）Alistapart有一篇《关于创建阴影的伟大教程（洋葱皮投影）》可

以应用到任何图片,无论尺寸多大.

那片文章的应经不能再评论了,但还是有些人希望能够再出篇教程.

问题

一些css工程师用一些”不相干”的标记,就是为了使背景图片能够应用到每一

个元素上.例如:

这里是Alistapart用到的代码: