15天学会jquery(完整版)

Jquery15天教程第一章15DaysofjQueryWhat,Why,When,Where,WhowhatjQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说，这使得javascript更加有趣。如果你这样想：“孩子，我需要另外一个javascript库，就好比我Ineedanotherholeinmyhead”那么加入这个俱乐部吧。这正是我第一次遇到的时候所想的。我已经用过了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).whojQuerywascreatedbyJohnResig.第二章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==Content-Typecontent=text/html;charset=gb2312/titleStripingTable/titlescriptsrc=jquery-latest.pack.jstype=text/javascript/script!--将jQuery引用进来--scripttype=text/javascript$(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});/scriptstyleth{background:#0066FF;color:#FFFFFF;line-height:20px;height:30px;}td{padding:6px11px;border-bottom:1pxsolid#95bce2;vertical-align:top;text-align:center;}td*{padding:6px11px;}tr.alttd{background:#ecf6fc;/*这行将给所有的tr加上背景色*/}tr.overtd{background:#bcd4ec;/*这个将是鼠标高亮行的背景色*/}/style/headbodytableclass=stripewidth=50%border=0cellspacing=0cellpadding=0!--用class=stripe来标识需要使用该效果的表格--theadtrth姓名/thth年龄/ththQQ/ththEmail/th/tr/theadtbodytrtd邓国梁/tdtd23/tdtd31540205/[e-mail]/td/trtrtd邓国梁/tdtd23/tdtd31540205/[e-mail]/td/trtrtd邓国梁/tdtd23/tdtd31540205/[e-mail]/td/trtrtd邓国梁/tdtd23/tdtd31540205/[e-mail]/td/trtrtd邓国梁/tdtd23/tdtd31540205/[e-mail]/td/trtrtd邓国梁/tdtd23/tdtd31540205/[e-mail]/td/tr/tbody/tablepPS:飘飘说我的table没有thead,我知错了.../p/body/html这里有一个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上:aonMouseOver='window.status=='window.status=Done;returntrue;'href==_blankLinkTextHere/a这段代码被用来在浏览器状态栏显示用户鼠标指向的链接地址.比如实际链接是=123,则可以在状态栏显示问题你是一个很活跃的下级经销商,你可能会以疯狂的速度给很多个页面添加链接.并且还要给每个链接添加这种效果那么你肯定会厌倦的.加入有一天你要修改任务栏里显示的链接的时候估计你会疯掉的.jQuery的解决办法首先,我们想让javascript尽快的掩饰我们的链接所以我们应该先从这里开始:scriptsrc=jquery.js/scriptscripttype=text/javascript$(document).ready(function(){//codegoeshere});/script当DOM准备好的时候我们放在ready里的代码就开始执行了.接下来要给所有我们想伪装的链接添加一个class,class有助于jQuery帮我们找到需要伪装的链接而撇开其它不需要伪装的链接.title有两个作用:当鼠标划过链接的时候会有一个小小的盒状提示显示URL:并且同样的信息会显示在浏览器的状态栏(IEOnly).pahref==123title==affLinkSuperDuperProduct/a/p告诉jQuery找到有cla