15天学会jquery

时间 2019-11-10
标签 15天学会 jquery 栏目 JQuery 繁體版
原文原文链接
第二章 15 Days of jQuery 比window.onload 更快一些的载入
window.onload()是传统javascript 里一个能吃苦耐劳的家伙。它长久以来一直
被程序员们做为尽快解决客户端页面载入问题的捷径。
但有时候等待页面载入仍是不够快。
只 有少数大型的图片文件会被快速的载入，而大部分大型的图片文件会使
window.onload()载入的很慢。因此当我为最近的网络营销建立一个web 应 用程
序的时候我不得但愿更快一点。有一些围绕window.onload()的新研究(好比
brother cake)的代码是一种快速的方式。若是你须要，能够试试。
可是若是你要作一些DOM(文档对象模型)javascript 的编程，那么你为何不试
试jQuery，它就像你本身亲自制做一个蛋糕，并品尝它。（双关Brother Cake，
俏皮话）。
jQuery 有一个用来做为DOM 快速载入javascript 的驾轻就熟的小函数，那就是
ready… 他在页面加载完成以前执行。
$(document).ready(function(){
// Your code here...
});
你能够用他来载入任何你想要载入的javascript，并不必定要保留jQuery 的编
码风格。让jQuery 同时去执行多个函数也是能够的。
你之前可能见过相似于init()之类的函数，你会发现jQuery 会快不少。
在之后的教程里咱们会一遍又一遍的用到这个函数。
OK 你如今能够尝试一下代码：(记得把jQuery 引用进你的页面哦，不记得的话
看看上篇。)
$(document).ready(function(){
alert("Congratluations!");
});
很Easy，不是吗？ 用几分钟时间作的双色表格。
第三章 15 Days of jQuery(Day 2)---很容易的制做双色表格
这节自己没有太多的价值，重点在它提供的这个例子上。我将代码帖出来而后对
重点部分注释一下：咱们先来看看Thewatchmakerproject 传统的作法：预览地
址(你能够查看一下源代码)。再来看看jQuery 是如何用5 行代码来搞定的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>StripingTable</title>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<!--将jQuery 引用进来-->
<script type="text/javascript">
$(document).ready(function(){ //这个就是传说的ready
$(".stripe tr").mouseover(function(){
//若是鼠标移到class 为stripe 的表格的tr 上时，执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class 值为over，而且当鼠
标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".stripe tr:even").addClass("alt");
//给class 为stripe 的表格的偶数行添加class 值为alt
});
</script>
<style>
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给全部的tr 加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0"
cellpadding="0">
<!--用class="stripe"来标识须要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
<p>PS: 飘飘说个人table 没有<thead>,我知错了...</p>
</body>
</html>
这里有一个jQuery 的技巧不得不提一下：jQuery 的链式操做，什么是链式操做
呢？ 咱们来看看，原本应该写成这样子的：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })
可是咱们写成了：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
由于鼠标移入移除都是发生在同一个对象上的，因此咱们能够将发生在同一个对
象上的动做连起来写，这样子若是有不少对象而且在他们身上发生了不少动做那
么就会节省不少代码。（我暂时是这样理解的，也不知道对不对但愿高手可以斧
正。）
第四章 15 Days of jQuery(Day 3)---巧妙的假装连接
今天的教程是草草完成的.我想把一些东西放在这15 天的前面简单的讲讲,这样
以来就可使一些js 新手不至于被一堆代码搞的晕头转向.事实上我是在即将
结尾的时候才作出的这个决定.
目标
咱们要使用jQuery 去建立一小段代码,这段代码会把一个页面全部的超连接转
换而且假装起来.
为何?
一些下属经销商认为，一部分用户有足够的悟性发现会员连接，并能尽可能避免通
过点击URL 连接直接进入浏览器，从而“欺骗”下属经销商脱离代理（假设购买
行为已经发生）
“老”办法
有不少下属经销商想方设法的掩饰他们的连接,避免人们经过连接找到他们.这
些伎俩涉及到.htaccess 和服务器端的代码. 但对于本教程,我会将重点放到”
老学校”的javascript 上:
<a onMouseOver='window.status="http://www.merchant-url-here.com";
return true;' onMouseOut='window.status="Done"; return true;'
href="http://www.affiliate-url-here.com"
target="_blank">Link Text Here</a>
这段代码被用来在浏览器状态栏显示用户鼠标指向的连接地址.好比实际连接是
www.website.com?aff=123,则能够在状态栏显示www.website.com.
问题
你是一个很活跃的下级经销商,你可能会以疯狂的速度给不少个页面添加连接.
而且还要给每一个连接添加这种效果那么你确定会厌倦的.加入有一天你要修改任
务栏里显示的连接的时候估计你会疯掉的.
jQuery 的解决办法
首先,咱们想让javascript 尽快的掩饰咱们的连接因此咱们应该先从这里开始:
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//code goes here
});
</script>
当DOM 准备好的时候咱们放在ready 里的代码就开始执行了.
接下来
要给全部咱们想假装的连接添加一个class,class 有助于jQuery 帮咱们找到需
要假装的连接而撇开其它不须要假装的连接.title 有两个做用:当鼠标划过链
接的时候会有一个小小的盒状提示显示URL:www.affsite.com 而且一样的信息
会显示在浏览器的状态栏(IE Only).
<p><a href="http://www.affsite.com?id=123"
title="http://www.affsite.com"
class="affLink">Super Duper Product</a></p>
告诉jQuery 找到有class=“affLink”的连接
$('a.affLink')
添加一个鼠标划过事件
$('a.affLink').mouseover(function(){window.status=this.title;return
true;})
简 单的说:找到class=“affLink”的全部连接,当鼠标划过它们的时候改变浏
览器状态栏信息为该连接title 的内容.这个在FireFox 并不 能正常的工做,只
是在IE 里起做用.在FireFox 的状态栏只是显示一个”Done”,或者更准确的说,
鼠标划过超连接对状态栏并无任何影响.我没有 更多的浏览器测试.
继续-mouseout jQuery 可让咱们用”链”的方式,像这样:
$('a.affLink').mouseover(function(){window.status=this.title;return
true;})
.mouseout(function(){window.status='Done';return true;});
这点代码告诉jQuery 改变浏览器状态栏信息,或者当鼠标再也不停留在连接上时
返回”Done”. 若是你不适应jQuery 的这种链的工做方式,那么你彻底能够这
样写:
$('a.affLink').mouseover(function(){window.status=this.title;return
true;});
$('a.affLink').mouseout(function(){window.status='Done';return
true;});
这就看你了.
把这些代码放到一块儿:
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.affLink').mouseover(function(){window.status=this.title;return
true;})
.mouseout(function(){window.status='Done';return true;});
});
</script>
最后的想法 大家当中可能以为今天的课程太简单了,有些还可能仍是有点不太
明白,由于大家不是二级经销商.
In “Days” to come you’ll see me tackle issues that get more involved
and apply to almost anyone with a website - whether you monetize your
traffic or not.
第五章15 Days of jQuery 安全邮件列表
规则提到如何防止垃圾邮件:不要把你的邮件地址放到任何一个mailto:连接中.
在与垃圾邮件恶魔作斗争的过程当中咱们的网页设计师和程序员总结出了一些有
创意的解决办法,让咱们快速的看一些这些常见方法的缺点(或多或少有一些).
name [at-no-spam] website.com
问题:连接式的更方便,并且把邮件地址敲入收件人栏还有可能会出错.
联系方式
问题:你冒着这么大的风险就是由于有一个垃圾邮件借用你的账户发送大量的垃
圾邮件(除非你使用真正的安全邮件脚本).而这样就扼杀了那些只想给你发个简
单邮件的用户.
javascript 加密
问题:你的邮件仍然暴露在光天化日之下,即便你使用了复杂的密码技术给它带
上面具.还有谁但愿为了发送一封邮件而启用第三方的解密网站,反正我是不会.
藏在一种简单的形式后面 (有一个例子,可是打不开
了.)http://simon.incutio.com/contact/我能想到的没有人…可是让咱们看看
是否咱们能改进观念。
可能的解决办法:AJAX
我提供的解决方案将比目前设计师们使用的方法有以下优点:
• 易于实施
• 易于修改
• 还有一些小小的花哨的效果
• 不用第三方工具来加密邮件地址
• 没有邮件地址暴露在光天化日之下
最后我想说明一点,我认为电子邮件靠这种闪烁其词的加密手段来躲避垃圾邮件
仍是很是不明智的.在实践中,我认为电子邮件加密是相对安全的,可是客观事实
是,电子邮件仍是在html 原代码里.
概念
1. 1.用jQuery 从服务器上把html 文件内容抓下来.
2. 2.把包含邮件连接的html 文件放到好的容器中是一种简单的保护机制.
示例
我要示范一些例子来显示邮件连接地址,当访客点击一个按钮或者一个连接的时
候,页面就会跳转到对应的那个例子里.
按钮点击--当即显示
连接点击--淡出
页面载入--淡出
页面载入--当即显示
(说明:所谓的当即显示,个人意思是说”没有花哨的效果而尽快的显示电子邮件
地址”)
代码
这里发表非商业共创使用许可,若是你但愿将代码使用在你的商业产品中时,请
联系我.我正在一个新的CMS for web designers 中使用它.
为何这种方式比普通的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");
});
第六章15 Days of jQuery(Day 5)---包起来--懒人用Jquery 生成的HTML
这个让咱们轻松的记念日已经到来–我恨我在计算机前已经花了48 个小时，我
但愿可以有另一个jQuery 来结束个人噩梦，而且让我上网更快。
当我一边“在用Jquery 方法编写”和一边“进行复杂的文件上传”，我已经筋
疲力尽。然而这两种操做的代码是一种较浅的，它只不过是你才刚刚开始解决的
一些简单问题。
因此下来我开始介绍：
尽管我在个人网站用全部的CSS 样式表去进行表格设计（也许这要花费两年半的
时间或者更多），我已经用了不少我能找到的在这方面的信息。回到2004 年5
月(古代史)A list a part 有一篇《关于建立阴影的伟大教程(洋葱皮投影)》可
以应用到任何图片,不管尺寸多大.
那片文章的应经不能再评论了,但仍是有些人但愿可以再出篇教程.
问题
一些css 工程师用一些”不相干”的标记,就是为了使背景图片可以应用到每一
个元素上.例如:
这里是A list a part 用到的代码:
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="object.gif" alt="The object casting a shadow" />
</div>
</div>
</div>
全部这些divs 充当一个给图片添加投影效果的”钩子”.这不见得好,咱们能够
把源代码精简成这样:
<img src="object.gif" class="dropshadow" alt="The object casting a
shadow" />
按着这个思路…
目标
在这里,我要想你展现如何用jQuery 垂手可得的将多于的标记从你的源代码中
剔除.运用这个方法,让你的代码更加干净(更重要的是)将使之后变换布局容易
的多.
解
这里,看看jQuery 是如何击退这个问题的.
$(document).ready(function(){
$("img.dropshadow")
.wrap("<div class='wrap1'><div class='wrap2'>" +
"<div class='wrap3'></div></div></div>");
});
图片就能够保持这样了:
<img src="object.gif" class="dropshadow" alt="The object casting a
shadow" />
仔细看看
$(document).ready() 是jQuery 版的window.onload()
$(“img.dropshadow”) 告诉jQuery 找到带有class=“dropshadow”的图片,
若是你想用一个id 你能够这样: $(“img#dropshadow”)wrap() (wrap() tells
jQuery to use the DOM (Document Object Method Model) to wrap the images
with the class=”dropshadow” in the html inside the parenthesis. )
最后的结果
傻乎乎的图片,可是和original Onion Skinned Drop Shadows 用的是同样的.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onion Skin DropShadwo with jQuery</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style>
.wrap0, .wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap0 {
float:left;
background:url(shadow.gif) right bottom no-repeat;
}
.wrap1 {
background:url(shadow180.gif) no-repeat;
}
.wrap2 {
background:url(corner_bl.gif) -18px 100% no-repeat;
}
.wrap3 {
padding:10px 14px 14px 10px;
background:url(corner_tr.gif) 100% -18px no-repeat;
}
body { background: #fff;}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("img.dropshadow")
.wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" +
"<div class='wrap3'></div></div></div></div>");
});
</script>
</head>
<body>
<h1>Onion Skinned - With jQuery</h1>
<p>First, the old-school, multiple divs hard coded into the html as seen
on the <a href="http://www.ploughdeep.com/onionskin/360.html">orignial
article</a>:</p>
<div class="wrap0">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="ball.jpg" alt="The object casting a shadow" />
</div>
</div>
</div>
</div>
<p style="clear:both;">And now, the jQuery method, which uses javascript
to wrap the image at runtime:</p>
<img src="ball.jpg" class = "dropshadow" alt="The object casting
a shadow" />
<p>View the source of this page and you'll see the huge difference
in markup!</p>
</body>
</html>
(这里只是代码,没有图片.要看效果去这里)
jQuery 和其它解决方法的比较
jQuery 的网站上有一个到Ajaxian 网站的连接,那里有用另一个javascrip 库
建立的Onion Skin Drop Shadow ,我相信他的代码复杂程度和代码量如今看来
自不待言.我宁愿使用jQuery.(怎么?你猜到了..)
平 心而论,没有一个库是对于每个工做或每一段代码都是合适的.本教程不是
为了证实jQuery 是一切javascrip 类库中的老大. 试试Prototype,
Scriptaculous, YUI, Rico, Behaviour, Moo.fx 和 the dozens 或者其它的.
若是你找到了一个你用起来比较顺手的,那就去用它吧.
jQuery 对于我来讲只是一个工具.我只是但愿这个教程可以提供给你更多使用
它的方法.
有关jQuery 的工具
jQuery 用难以置信的简单来操做DOM. 你应该花些时间看看jQuery 能用来作什
么,用下append(), prepend(), before(), after(), html(), and remove().
来自jQuery Docs
arap(String html)
把全部匹配的元素用其余元素的结构化标记包装起来。这种包装对于在文档中插
入额外的结构化标记最有用，并且它不会破坏原始文档的语义品质。
这个函数的原理是检查提供的第一个元素（它是由所提供的HTML 标记代码动态
生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包
装元素。
当HTML 标记代码中的元素包含文本时没法使用这个函数。所以，若是要添加文
本应该在包装完成以后再行添加。
示例:
$("p").wrap("<div class='wrap'></div>");
HTML
<p>Test Paragraph.</p>
结果
<div class='wrap'><p>Test Paragraph.</p></div>
第七章Days of jQuery 更安全的Contact Forms，不带CAPTCHA
此次的教程内容贴近我擅长的技术方向：安全的contact forms。
就像我在前一篇教程中提到的那样，一个最普通的contact forms 能够帮助访客
同你进行通讯来往而不须要暴露你的电子邮件地址给那些可恶的垃圾邮件制造
者们。
但若是spammer 们已经盯上你，没有什么比一个不安全的contact foms 更糟糕
的了。想象一下你的网络空间提供商发给你一封措辞强烈的电子邮件，通知说：
他们发现你的网站发送了大批量的性药广告以及其余垃圾邮件，另 外，直到你
中止这种行为以前，你的网站都将处于离线状态–谢谢！
那么，今天我要在这篇教程里告诉你们的是一种在任何contact forms 上添加一
个额外安全层的简单方法－即便你没有使用我提供的超级安全、超级灵活的
Ultimate Form Mail。
当前情况
你意识到spammer 们已经经过远程探测技术发现了你的contact forms 的弱点，
而你但愿他们走开。
难点
你不想使用CAPTCHA（Completely Automated Public Turing Test to Tell
Computers and Humans Apart），由于你明白，让你的访客先去阅读那些歪七扭
八的字母数字才能发送消息只能抑制他们想要互动的欲望，而不是促进它。(数
字验证的缺陷)
__
关键点：你但愿那些坏家伙们堵车到天黑，同时但愿那些好孩子们一条大道通罗
马。
解决方案
你将学会在页面加载的时候使用jQuery 来给你的contact forms 添加一些隐藏
的标签信息。当窗体信息被提交到服务器端的时候，你能够用一些简单的php
代码实现以下的步骤：
隐藏的标签被识别出来 隐藏标签的信息与你的网站访客下载到浏览器上的
cookie 里的某项标志相一致 隐藏标签的有效时间还未过时 换句话说，你的访
客们只有在一段有限的时间内才能够填写窗体并进行发送。若是一个spammer
尝试经过远程调用来提交窗体信息到你的服务器，他们将会发 现本身踢到了一
块又厚又硬的铁板，不付出点代价休想经过。
我将要告诉你的这种方法是从一位很是聪明的同事Chris Shiflett 提供的蓝本
基础上修改而成的。他是位专业的安全专家，对php 程序员常常遇到的安全问题
了如指掌（我怎么感受他又要忍不住提到他的Ultimate Form Mail 了~~汗）。
教程
基于上次那篇《斑马线表格轻松制做》的反响良好，我决定再次制做一次相似的
“手把手图文教程”。虽然要花费些时间，但很值得这么作。
手把手教程
DEMO
源代码
银弹？1)
银弹是软件领域的说法,意为解决一切问题的方法。这个来源于欧洲的传说,说是
只有银弹能够能够消灭狼人。
“那么，如今个人窗体就是100%安全的，能够假设任何免费的cntact forms 程
序，而后高枕无忧了？”
呃。。。非也。
这种安全模式基于一个关键的假定：Spammer 们老是会拿软柿子捏，浪费时间去
解决一个狡猾的对手对他们来讲就是浪费金钱。
如今， 好好听着，个人朋友们：
这个技术，尽管至关健壮，但仍然不是解决目前脆弱的窗体处理程序问题的灵丹
妙药。
个人这些安全建议的目的是为了让spammer 们知难而退。小偷们入室盗窃以前总
会进行仔细踩点，他们只对那些能够用最小代价获取最大利益的房间感兴趣。
换句话说，若是在他们动手以前有99%的机会挡住他们的试探，并且实现起来相
当容易，为何不试一试呢？这才是此项技术要实现的目标。
但这仍是治标不治本，不能解决全部问题。
第八章Days of jQuery(Day 7) 样式表切换
我第一次看到样式表切换器是在A List Apart 或者Simple Bits，那是两个设
计师最应该去的网站。
从那之后，我找到了不少可让访客经过鼠标点击某个地方切换样式表的方法。
但最近我要写一篇如何 使用jQuery 编写简单代码实现它的教程。
我将向大家逐步解说整个的过程，不只仅由于要展现jQuery 代码的简介，同时
也要揭示jQuery 库中的若干高级特性。
首先，代码
$(document).ready(function()
{
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
$(document).ready(function()
{
$(‘.styleswitch’).click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie(’style’);
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$(‘link[@rel*=style]’).each(function(i)
{
this.disabled = true;
if (this.getAttribute(‘title’) == styleName) this.disabled = false;
});
createCookie(’style’, styleName, 365);
}
其余这里没有提到的部分是你将在后面看到的建立和读取cookie 的函数。
熟悉的开篇
$(document).ready(function()
{
$('.styleswitch').click(function()
告诉jQuery“以最快的速度查找全部包含对象名‘styleswitch’的元素，并在
他们被鼠标点击时执行一个函数”。
看起来不错。当鼠标点击预先指定的元素时，switchStylestyle 函数将被调用。
从如今开始是重点。
这句话什么意思？
第一次看到这句代码的时候个人脑子有些卡壳：
$('link[@rel*=style]').each(function(i) {
在互联网上搜索了一下后我空手而归。最后不得不找到了jQuery 的做者John
Resig，向他咨询。
他直接给了我一个jQuery 网站的页面地址，里面讲解了若干jQuery 提供的高级
特性(xpath)，能够用来查找并操做页面中的若干元素。
若是你看过这些东西你就能明白上面那句神秘的代码的含义是告诉jQuery“查
找全部带rel 属性而且属性值字符串中包含‘style’的link 连接元素”。
嗯？
让咱们看看如何编写包含一个主样式表，两个备用样式表的页面：
<link rel="stylesheet" type="text/css" href="styles1.css"
title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css"
title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css"
title="styles3" media="screen" />
咱们能够看到全部样式表都含有一个包含‘style’字串的rel 属性。
因此结果一目了然，jQuery 轻松定位了页面中的样式表连接。
下一步？
each()函数将遍历全部这些样式表连接，并执行下一行中的代码：
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
“首先禁用全部的样式表连接，而后开启任何title 属性值与switchStylestyle
函数传递过来的字串相同的样式表”
一把抓啊，不过颇有效。
如今咱们须要保证的是那些样式表存在而且有效。
完整代码和演示
既然 Kelvin Luck 已经编写了这些代码，我就不在这里重复了。
DEMO
我相信Kelvin 的灵感是从 这个网站那里获得的，咱们正好能够看看使用其余工
具实现这个功能是否要比jQuery 更加复杂冗长。
第九章 Days of jQuery 使用Javascript（jQuery）实现圆角边框
当我看到这些实现圆角边框的HTML 源代码的时候，我发现这很适合用来写一篇
jQuery 教程–使用wrap()、prepend()、append() 函数。
这里是原先的HTML 代码，咱们将从这里开始：
<div class="dialog">
<div class="hd">
<div class="c"></div>
</div>
<div class="bd">
<div class="c">
<div class="s">
<main
content goes here >
</div>
</div>
</div>
<div class="ft">
<div class="c"></div>
</div>
</div>
如今咱们怎么使用jQuery 来精简这段代码呢？
首先，咱们须要一个“钩子”，一个特殊的HTML 元素，或者一个id，或者一个
对象名–来告诉jQuery 处理的目标。
如今咱们改为了这个样子：
<div class=“roundbox”> <main content goes here > </div> 下一步，咱们
使用jQuery 来将剩下的代码添加进去：
$(document).ready(function(){ $("div.roundbox") .wrap('<div
class="dialog">'+
'<div class="bd">'+
'<div class="c">'+
'<div class="s">'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
});
其余Div 标记去哪里了？
仔细观察代码，你就会发现它们都跑到了js 代码里面，在wrap 函数执行时它们
将嵌套在“钩子Div”的内部。
细心的观众会发现我漏掉了部分代码。这是由于jQuery 中的wrap()函数要求div
标签必须严格对称嵌套才能工做。
具体的，我去掉了下面两个部分：
<div class="hd"><div class="c"></div></div>
<div class="ft"><div class="c"></div></div>
添加和预置一体化
下一步咱们将会经过prepend 和append 函数将这两段代码添加进带有dialog
对象名的div 标记内部，而且使用“连锁”方法。
$('div.dialog').prepend('<div class="hd">'+
'<div class="c"></div>'+
'</div>')
.append('<div class="ft">'+
'<div class="c"></div>'+
'</div>');
示例及代码
我已经在网上放置了一个演示页面供你们查看。建议你看一下页面的源代码，体
会jQuery 给页面代码带来的清爽和便捷。
这些代码来自 Schillmania 的一篇文章，我的推荐你们下载包含点缀图片的zip
打包，很是精美。
不使用图片的圆角边框
有不少方法能够实现圆角边框–有些方法甚至不须要图片。
在jQuery 的网站上有一个用来制做无图圆角边框的插件。虽然不是适合全部人
（或者说全部程序），但也值得学习。
看看它的漂亮代码吧（使用时）：
$(document).bind("load", function(){
$("#box1").corner()
});
第十章 Days of jQuery 快速和略显粗劣的AJAX 视频教程
今天个人想法有点改变。近段时间以来我一直考虑注册一个YouTube 账号来上传
一些教程录像，如今我终于作出了决定并上传了一个。在这里我将手把手的向大
家演示为你的网站添加一些AJAX 基本应用的方法。
录像很短，由于YouTube 对上传影片的长度有限制（10 分钟之内）。固然因为
制做仓促，错误在所不免。好比在某个地方我称CGI 为“服务器端脚本”，而更
准确的说法应该是“服务器端语言”。
这是AJAX，仍是AHAH，抑或AXAH？
你将看到的东西其实更接近AHAH 而不是纯粹的AJAX。
有什么区别么？AJAX 中的“X”表明着XML。但更多时候人们喜欢使用简单的文
本或者javascript 代码或者单独文件而不是那种复杂冗长的XML。对此有篇文
章有详细论述：AJAX vs. AHAH。
至于AXAH。。。 Cody Lindley 的文章能够解释一切。对AJAX 的一些工做理念
有兴趣的读者能够看一下。
教程录像
这个页面上有我提供的演示。
第十一章15 Days of jQuery 使用jQuery 库实现“即点即改”的AJAX 化
之前我在Quirksmode 网站见过这种代码，后来又在24 Ways 网站看到了一个更
具Web 2.0 风格的方案。此次我将为你们展现两种使用jQuery 实现相同功能（甚
至更好）的方法。
目标
一个用AJAX（或AHAH）技术设计的页面，访问者无需离开就能够在看到的(x)HTML
页面上编辑内容。
方案
点击须要编辑的文本，变幻出一个带有保存和取消按钮的textarea。修改的部
分将经过AHAH 传送至服务器端的一个PHP 脚本文件，用来更新数据库（MySQL
或普通文件）。
演示
AJAX 式即点即改演示一
在这第一个演示中，我使用了一个id 为“editinplace”的div 元素。当鼠标划
过这里时，背景颜色将变成浅黄色。点击文本将启动一些DOM 操做，div 元素被
一个textarea 元素取代–内中包含原先的文本。
点击保存按钮将向服务器端的PHP 脚本文件发送新的HTML 内容，并从新输出收
到的新文本内容（经过 $_POST）。
在真实应用环境下，你还应当添加一个安全性检测，而后才能更新数据库并返回
更新后的页面内容，同事告知jQuery 执行成功的信息。
但在这个例子中，全部的修改都是成功的，发送给PHP 脚本的信息将原封不动的
返回到jQuery 代码，显示到一个普通的警告窗口里。
解释
开头部分说了不少次了，若是你不想使用jQuery 提供的document.ready 函数，
尽能够选择你本身中意的init()函数。
$(document).ready(function(){
setClickable();
});
页面上第一个被执行的就是这个setClickable()函数。它的任务就是作如下内
容：
查找包含id 为“editinplace”的div 元素，而后告诉jQuery 在这些div 被点
击时执行某些操做。
function setClickable() {
$('#editInPlace').click(function() {
读取div 内部的HTML 代码的任务将交给jQuery 的html()函数来完成。这些HTML
将会额外添加若干代码以组成textarea 里的保存和取消按钮。
"var textarea = '<div><textarea rows="10"
cols="60">'+$(this).html()+'</textarea>';
var button = '<div><input type="button" value="SAVE"
class="saveButton" /> OR <input type="button" value="CANCEL"
class="cancelButton" /></div></div>';
var revert = $(this).html();
一样仍是这些在div 内部找到的HTML 代码将会赋值给一个叫作“revert”的变
量。这个变量将用来在取消按钮被按下的事件中输出原始文本。
var revert = $(this).html();
jQuery 的DOM 函数“after”用来将新生的textarea HTML 代码放置在咱们指定
的div 元素后。我在后面紧跟着连锁上了一个remove()方法 来移除div 元素以
节省代码。
$(this).after(textarea+button).remove();
在使用jQuery 的时候，我经过对象名来定位保存和取消按钮对象。我指示jQuery
在任一按钮按下时触发最后一个函数 “saveChanges”。我告诉了jQuery 在div
元素被点击时作什么事情，但我没有在最后加上省略号由于我但愿在这个div
操做语句后面连锁其 他方法。
$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})
我再连锁了一个简单的mouseover 和mouseout 事件，告诉jQuery 在鼠标指针掠
过咱们指定的div 元素（id=editInPlace）的时候添加和移除一个对象。
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});
};//end of function setClickable
函数“saveChanges”将以按钮对象作为第一个参数，而cancel 参数则取两种
值，false 或者保存在revert 变量中的html 代码内容。
function saveChanges(obj, cancel) {
若是cancel 为假，则函数将保存更改并使用html 格式发送给服务器端的php
脚本。我在这里使用了jQuery 内置的一个DOM 函数实现对textarea 内容的提取
操做：parent()和siblings()。
if(!cancel) {
var t = $(obj).parent().siblings(0).val();
DOM 基础超出了本系列教程的范围，但在这个应用中我只是告诉了jQuery“对象
（保存按钮）有一个父元素（div）。。。去找到它。那个元素拥有一个或多个
DOM 树同级对象。。。我只想找到其中的第一个。而后提取那个对象的全部内容。”
（稍等。。。若是你对DOM 风格的代码不是很熟悉的话，前面个人注释可能并不
好理解。我仍是建议你以前google 一下“DOM javascript”或者其余相关的信
息。）
这些html 赋值给了t 变量，如今要经过POST 方法把它发送给test2.php。
$.post("test2.php",{
content: t
},function(txt){
alert( txt);
});
}
若是cancel 有一个值，那么必然是保存在revert 变量中的原始html 内容。所
以，在这个时候我但愿变量t 变为原始html 内容。
else {
var t = cancel;
}
下一步是经过jQuery 提供的DOM 函数放置一个新的div 元素，id 为
“editInPlace”，在这以后包含了textarea 元素。。。而后删除掉这个div
元素。
$(obj).parent().parent().after('<div
id="editInPlace">'+t+'</div>').remove()
在果壳中，这将告诉jQuery“在DOM 树中上跃两次。将HTML 代码附在到达位置
的对象以后，而后移除那个对象。”
最后，咱们再次调用setClickable 函数并关闭saveChange()函数。重调
setClickable()函数的含义是从新设置onMouseover,onMouseout,和onClick 事
件到初始状态。
setClickable();
}
第二个示例
第二个方法很是相似但也有点复杂。
示例二
没有用到庞大的单独div 元素，这个示例将每一个段落p 标签变换成单独的可编辑
区域。
这里的难度在于你如何在向服务器端脚本发送数据时指定正确的段落p 标签。
在这里我经过为每一个p 标签编号并将这个编号一同发送给服务器端的php 脚本的
方式解决了问题。你会在alert 窗口中看到php 脚本是如何“知道”哪一个p 标签
里的内容被修改的。
已知的问题
现实的应用中，你在使用相似的功能时首先须要验证更改的内容的合法性，而后
才能将数据发送到服务器端。显然在这里咱们刻意把这些内容忽略掉了。
第十二章15 Days of jQuery 使用不苛刻的javascript 代码实现多文件上传
好几个月之前，当我在追逐互联网上AJAX 热潮的时候，我在 FiftyFourEleven
网站上发现了一篇使用创新的javascript 代码实现当时正在困扰个人“ 单文
件元素实现多文件上传”的文章。
因此当我想写做《15 天漫游jQuery》的时候，我第一个想到的就是用jQuery
实现这个功能。
接触易用性狂热爱好者
几天前当我检查网站记录的时候，发现了一条遗漏的文章trackback。跟过去看
的时候我发现个人两篇jQuery 文章被做者引用来证实他为何讨厌
javascript。
根据这我的的说法，任何工具或技术若是没有将易用性放在第一位都将成为垃
圾。
尽管我很不一样意这位仁兄一杆子打死的态度，但他仍是让我对这篇详细教程有所
留意。当我在编写一个简单网页效果的时候，我会尽可能当心谨慎的处理。这样如
果网站访客们决定关闭javascript 代码执行功能的时候，他们仍然能够正常使
用网站的功能。
关于第一价值的两个教程
• 使用一个文件输入元素实现多文件上传，并让整个交互过程流畅温馨。
• 让多文件上传更加人性化，但要避免以牺牲可用性为代价。关键在于使用
不苛刻的javascript 代码制做多文件输入区域。
演示
• 只有一个文件输入元素，但添加了jQuery 和其余代码实现较为亲近用户
的多文件上传功能。
演示一地址
• 在页面(x)html 代码中使用了多个文件输入元素，但经过jQuery 调整为
与第一个演示相似的显示页面效果。优势是代码是不苛刻的。。。即便关
闭了javascript 执行，用户也能上传多个文件。
演示二地址
解释
单文件输入框
jQuery 的$(document).ready() 函数的工做有两个：
在文档下载量最大的时候建立一个div 元素。 查找文件上传框（假设这里只有
一个），而后给它附上一个onChange 事件。
$("input[@type=file]").change(function(){
doIt(this, fileMax);
});
doit()函数（简单又好记，呵呵~）检查是否达到了最大文件数量限制，若是不
是，它会隐藏当前文件输入框，在父div 里添加一个新的文件输入框，将输入框
内的文件名使用id “files_list”做为标记，在最后添加一个“删除”按钮。
在DOM 树中导航，我使用jQuery 的parent()函数，而后用remove()函数移除元
素。我还使用了append()和prepend()函数分别添加文件名和新的输入框。
两个关键点
- 最大文件上传数量设定：
var fileMax = 3;
- 输入框必须有适当的定位措施：
<input type="file" class="upload" name="fileX[]"/>
这样弄之后输入框可疑由访问者决定添加仍是删除，没有任何关于id 或名称的
操做。当这个窗体代码发送给服务器端脚本的时候，相关信息就已经被存放在了
一个数组中了。
多文件输入框
首先，文件容许上传的数量由页面中的文件输入框的数量决定。其次，你仍然需
要经过某种方法为每一个输入框接收到的内容用一个数组存放。
<input type="file" class="upload" name="fileX[]"/>
第二个演示跟前面的比起来最大的不一样在于，我遍历了每一个文件输入框并在其内
容有改动时执行doit()函数。经过遍历每个输入框，我能够为个人代码添加
有用的额外信息：输入框内容在“堆栈”中的顺序。
换句话说，当这段代码执行时，它会特别指定第一个输入框，或者第二个，抑或
第三个。
代码见下：
$("input[@type=file]:nthoftype("+
n+")")
jQuery 的灵活性容许咱们使用CSS 和XPath 描述语句定位指定的元素位置。
你会发现当一个文件被选中时，文件输入框都会被文件名称覆盖。点击文件名就
能够选择其余不一样的文件。
第十三章15 Days of jQuery Lightbox （插件）
Cody Lindley 移植的初版“ Thickbox”让我第一次感觉到了jQuery 的魅力。
后来他又作了一些 代码升级以修复若干跨浏览器的兼容性问题。
一些须要注意的地方
$(document).ready 取代了TB_init() 函数，做用是在每一个包含对象名
“thickbox”的连接上附加一个onClick 事件。
function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.innerHTML || this.href;
TB_show(t,this.href);
this.blur();
return false;
});
当这些连接被点击时，TB_show()函数就将执行。
$("body")
.append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(TB_remove);
$(window).resize(TB_position);
$(window).scroll(TB_position);
$("#TB_overlay").show();
$("body").append("<div id='TB_load'><div id='TB_loadContent'><img
src='images/circle_animation.gif' /></div></div>");
如你所见，在文档body 元素前添加了两个div 元素。换句话说，这两个div 元
素将被添加在页面html 代码的body 关闭元素前。
覆 盖的div 将使用一个特定的包含不透明外表的CSS 文件指定表现。TB_window
的代码用来经过AHAH 在页面中放置一张图片或者加入另外一个页面。$
(window).resize 和$(window).scroll 告诉jQuery 在用户从新调整窗口大小
或者拖动页面翻页的时候执行TB_position 函数。这是保证Thickbox 始终保持
在窗口中心部位的手 段。
接下来，Cody 查询url 的后缀。
var urlString =
/.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.
txt/g;
var urlType = url.match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType
== '.gif'){//code to show images
若是这是一个图片文件，则jQuery 的append 函数会添加html 代码到适当位置。
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img
id='TB_Image' src='"+url+"' width='"+imageWidth+"'
height='"+imageHeight+"'
alt='"+caption+"'/></a>"
+ "<div id='TB_caption'>"+caption+"</div><div
id='TB_closeWindow'><a href='#'
id='TB_closeWindowButton'>close</a></div>");
$("#TB_closeWindowButton").click(TB_remove);
另外，远程文件将使用jQuery 的load()函数导入。
$("#TB_ajaxContent").load(url, function(){
第十四章15 Days of jQuery jQuery 表格
一位叫Klaus 的朋友编写了一个小插件， 用jQuery 实现可用性极佳的
javascript 表格。
设置好正确的(x)HTML 和CSS 后，你能够像下面那样建立表格：
$.tabs(”container”); first tab on by default 若是你像在默认位置“上
方”再添加一个表格： $.tabs(”container”, 2); second tab on
Klaus 这里 示例，你能够看看最终效果。
个人改版
我稍微修改了Klaus 的代码，添加了一个简单的表单用来生成表格的表头。
用法：
很是简单。只须要输入每一个表格的表头（最多5 个），而后点击表单下方的按钮。
下一个页面将生成结果HTML 代码，你能够复制而后粘贴到文件中。
你还须要 下载Klaus 网站的CSS 文件，______作些你本身的修改，固然还要上传jQuery
框架库到你的服务器上。