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
框架庫到你的服務器上。
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。