15天学会JQuery教程Word格式文档下载.docx

1、where你可以jQuery 的官方网站下载到他的源代码（10K）.whojQuery was created by John Resig.第二章 15 Days of jQuery 比window.onload 更快一些的载入window.onload（）是传统javascript 里一个能吃苦耐劳的家伙。它长久以来一直被程序员们作为尽快解决客户端页面载入问题的捷径。但有时候等待页面载入还是不够快。只 有少数大型的图片文件会被快速的载入，而大部分大型的图片文件会使window.onload（）载入的很慢。所以当我为最近的网络营销创建一个web 应 用程序的时候我不得希望更快一点。有一些围绕w

2、indow.onload（）的新研究（比如brother cake）的代码是一种快速的方式。如果你需要，可以试试。但是如果你要做一些DOM（文档对象模型）javascript 的编程，那么你为什么不试试jQuery，它就像你自己亲自制作一个蛋糕，并品尝它。（双关Brother Cake，俏皮话）。jQuery 有一个用来作为DOM 快速载入javascript 的得心应手的小函数，那就是ready 他在页面加载完成之前执行。$（document）.ready（function（）/ Your code here.）;你可以用他来载入任何你想要载入的javascript，并不一定要保留jQuer

3、y 的编码风格。让jQuery 同时去执行多个函数也是可以的。你以前可能见过类似于init（）之类的函数，你会发现jQuery 会快很多。在以后的教程里我们会一遍又一遍的用到这个函数。OK 你现在可以尝试一下代码：（记得把jQuery 引用进你的页面哦，不记得的话看看上篇。）alert（Congratluations!）;很Easy，不是吗？ 用几分钟时间做的双色表格。第三章 15 Days of jQuery（Day 2）-很容易的制作双色表格这节本身没有太多的价值，重点在它提供的这个例子上。我将代码帖出来然后对重点部分注释一下：我们先来看看Thewatchmakerproject 传统的做

4、法：预览地址（你可以查看一下源代码）。再来看看jQuery 是如何用5 行代码来搞定的:html xmlns=/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /titleStripingTablescript src=jquery- type=text/javascript/script-将jQuery 引用进来-script type=$（document）.ready（function（） /这个就是传说的ready$（.stripe tr）.mouseover（function（）/如果鼠标

5、移到class 为stripe 的表格的tr 上时，执行函数$（this）.addClass（over）.mouseout（function（）/给这行添加class 值为over，并且当鼠标一出该行时执行函数$（this）.removeClass（） /移除该行的class.stripe tr:even）.addClass（alt/给class 为stripe 的表格的偶数行添加class 值为altstyleth background:#0066FF;color:#FFFFFF;line-height:20px;height:30px;td padding:6px 11px;border-

6、bottom:1px solid #95bce2;vertical-align:top;text-align:center;td * tr.alt td #ecf6fc; /*这行将给所有的tr 加上背景色*/tr.over td #bcd4ec; /*这个将是鼠标高亮行的背景色*/style/headbodytable class=stripe width=50% border=0 cellspacing=cellpadding=-用class=来标识需要使用该效果的表格-theadtrth姓名年龄QQEmail/theadtbodytd邓国梁23/tablepPS: 飘飘说我的table

7、没有,我知错了./body/html这里有一个jQuery 的技巧不得不提一下：jQuery 的链式操作，什么是链式操作呢？ 我们来看看，本来应该写成这样子的：）.mouseout（function（） ）但是我们写成了：因为鼠标移入移除都是发生在同一个对象上的，所以我们可以将发生在同一个对象上的动作连起来写，这样子如果有很多对象并且在他们身上发生了很多动作那么就会节省很多代码。（我暂时是这样理解的，也不知道对不对希望高手能够斧正。第四章 15 Days of jQuery（Day 3）-巧妙的伪装链接今天的教程是草草完成的.我想把一些东西放在这15 天的前面简单的讲讲,这样以来就可以使一些j

8、s 新手不至于被一堆代码搞的晕头转向.事实上我是在即将结尾的时候才做出的这个决定.目标我们要使用jQuery 去创建一小段代码,这段代码会把一个页面所有的超链接转换并且伪装起来.为什么?一些下属经销商认为，一部分用户有足够的悟性发现会员链接，并能尽量避免通过点击URL 链接直接进入浏览器，从而“欺骗”下属经销商脱离代理（假设购买行为已经发生）“老”办法有很多下属经销商千方百计的掩饰他们的链接,避免人们通过链接找到他们.这些伎俩涉及到.htaccess 和服务器端的代码. 但对于本教程,我会将重点放到”老学校”的javascript 上:a onMouseOver=window.status=-

9、url-;return true; onMouseOut=Done return true;href=target=_blankLink Text Here这段代码被用来在浏览器状态栏显示用户鼠标指向的链接地址.比如实际链接是,则可以在状态栏显示问题你是一个很活跃的下级经销商,你可能会以疯狂的速度给很多个页面添加链接.并且还要给每个链接添加这种效果那么你肯定会厌倦的.加入有一天你要修改任务栏里显示的链接的时候估计你会疯掉的.jQuery 的解决办法首先,我们想让javascript 尽快的掩饰我们的链接所以我们应该先从这里开始:jquery.js/code goes here当DOM 准备好的

10、时候我们放在ready 里的代码就开始执行了.接下来要给所有我们想伪装的链接添加一个class,class 有助于jQuery 帮我们找到需要伪装的链接而撇开其它不需要伪装的链接.title 有两个作用:当鼠标划过链接的时候会有一个小小的盒状提示显示URL: 并且同样的信息会显示在浏览器的状态栏（IE Only）.a href=?id=123title=class=affLinkSuper Duper Product所有这些divs 充当一个给图片添加投影效果的”钩子”.这不见得好,我们可以把源代码精简成这样: class=dropshadowThe object casting ashado

11、w按着这个思路在这里,我要想你展示如何用jQuery 轻而易举的将多于的标记从你的源代码中剔除.运用这个方法,让你的代码更加干净（更重要的是）将使以后变换布局容易的多.解这里,看看jQuery 是如何击退这个问题的.img.dropshadow.wrap（div class=wrap1wrap2 +wrap3图片就可以保持这样了:仔细看看$（document）.ready（） 是jQuery 版的window.onload（）$（“img.dropshadow”） 告诉jQuery 找到带有class=“dropshadow”的图片,如果你想用一个id 你可以这样: $（“img#dropshadow”）wrap（） （wrap（） tellsjQuery to use the DOM （Document Object Method Model） to wrap the imageswith the class=”dropshadow” in the html inside the parenthesis. ）最后的结果傻乎乎的图片,但是和original Onion Skinned Drop Shadows 用的是一样的.Onion Skin DropShadwo with jQuerycharset=iso