==== 15天學(xué)會(huì)jQuery (0-5) ====
* <html><div style="font-size:16px;color:red;font-weight:bold;">15 Days of jQuery(Day 0)---JQuery - What, Why, When, Where, Who</div></html>
**__what__**
jQuery是一個(gè)了不起的javascript庫(kù)，它可以是我們用很少的幾句代碼就可以創(chuàng)建出漂亮的頁(yè)面效果。從網(wǎng)站的方面說(shuō)，這使得javascript更加有趣。
如果你這樣想：“孩子，我需要另外一個(gè)javascript庫(kù)，就好比我I need another hole in my head”那么加入這個(gè)俱樂(lè)部吧。這正是我第一次遇到的時(shí)候所想的。
我已經(jīng)用過(guò)了Moo.fx, Scriptaculous, TW-SACK, 和 Prototype. 我曾參與了RICO, Yahoo YUI和其他一些庫(kù)的開(kāi)發(fā)。
沒(méi)有了PHPjavascript和我一點(diǎn)也不親近了。但是我還是盡全力保持頭腦清醒，并盡量保持用AJAX去思考。
所以當(dāng)我遇到j(luò)Query的時(shí)候我想:"還需要另外一個(gè)javascript庫(kù)嗎?不了,謝謝..."
**__why__**
為什么我改變我我對(duì)jQuery的看法，以及為什么你要考慮去使用它?
很簡(jiǎn)單,只要你看一眼過(guò)使用jQuery的頁(yè)面你就會(huì)發(fā)現(xiàn)它是如此的簡(jiǎn)單易用.只用很少的幾行,就能表現(xiàn)出很優(yōu)雅的效果.
有一天當(dāng)我突然看到一些用jQuery寫的代碼時(shí)我一下子豁然開(kāi)朗了. 早茶的過(guò)程中,我例行公務(wù)的去翻閱我的訂閱,去看每日必看的設(shè)計(jì)博客的時(shí)候我看到了一個(gè)用jQuery寫的javascript的例子.事實(shí)證明,這些代碼還是有些和瀏覽器關(guān)聯(lián)的bug,不過(guò)這些概念還是我以前從來(lái)沒(méi)有見(jiàn)過(guò)的.
還有那些代碼...
代碼看起來(lái)很簡(jiǎn)單看起來(lái)不像我以前見(jiàn)過(guò)的.但也不無(wú)道理.
我開(kāi)始通讀文檔,并且驚奇的發(fā)現(xiàn)用一點(diǎn)點(diǎn)代碼竟然能做這么多事情.
**__when__**
你應(yīng)當(dāng)在你需要的時(shí)候使用jQuery.
給你一個(gè)小型的庫(kù)文件
DOM強(qiáng)大的控制能力
不費(fèi)吹灰之力的工作,和少許的努力.
或者
快速的通過(guò)AJAX
沒(méi)有大量無(wú)用的代碼
和一些基本的動(dòng)畫(huà)效果
但是
如果你需要超級(jí)花式效果,動(dòng)畫(huà),拖放,和超級(jí)平穩(wěn)動(dòng)畫(huà),那么你可能想使用Prototype.他是一個(gè)有大量動(dòng)畫(huà)效果的類庫(kù).
**__where__**
你可以jQuery的官方網(wǎng)站下載到他的源代碼(10K).
**__who__**
jQuery was created by [[http://ejohn.org/|John Resig]].
----
* <html><div style="font-size:16px;color:red;font-weight:bold;">15 Days of jQuery(Day 1)---比window.onload更快一些的載入</div></html>
window.onload()是傳統(tǒng)javascript里一個(gè)能吃苦耐勞的家伙。它長(zhǎng)久以來(lái)一直被程序員們作為盡快解決客戶端頁(yè)面載入問(wèn)題的捷徑。
但有時(shí)候等待頁(yè)面載入還是不夠快。
只有少數(shù)大型的圖片文件會(huì)被快速的載入，而大部分大型的圖片文件會(huì)使window.onload()載入的很慢。所以當(dāng)我為最近的網(wǎng)絡(luò)營(yíng)銷創(chuàng)建一個(gè)web應(yīng)用程序的時(shí)候我不得希望更快一點(diǎn)。有一些圍繞window.onload()的新研究(比如brother cake)的代碼是一種快速的方式。如果你需要，可以試試。
但是如果你要做一些DOM(文檔對(duì)象模型)javascript的編程，那么你為什么不試試jQuery，它就像你自己親自制作一個(gè)蛋糕，并品嘗它。（雙關(guān)Brother Cake，俏皮話）。
jQuery有一個(gè)用來(lái)作為DOM快速載入javascript的得心應(yīng)手的小函數(shù)，那就是ready... 他在頁(yè)面加載完成之后執(zhí)行。
<code java>
$(document).ready(function(){
// Your code here...
});
</code>
你可以用他來(lái)載入任何你想要載入的javascript，并不一定要保留jQuery的編碼風(fēng)格。讓jQuery同時(shí)去執(zhí)行多個(gè)函數(shù)也是可以的。
你以前可能見(jiàn)過(guò)類似于init()之類的函數(shù)，你會(huì)發(fā)現(xiàn)jQuery會(huì)快很多。
在以后的教程里我們會(huì)一遍又一遍的用到這個(gè)函數(shù)。
OK你現(xiàn)在可以嘗試一下代碼：(記得把jQuery引用進(jìn)你的頁(yè)面哦，不記得的話看看上篇。)
<code java>
$(document).ready(function(){
alert("Congratluations!");
});
</code>
很Easy，不是嗎？ 用幾分鐘時(shí)間做的雙色表格。
----
* <html><div style="font-size:16px;color:red;font-weight:bold;">15 Days of jQuery(Day 2)---很容易的制作雙色表格
</div></html>
這節(jié)本身沒(méi)有太多的價(jià)值，重點(diǎn)在它提供的這個(gè)例子上。我將代碼帖出來(lái)然后對(duì)重點(diǎn)部分注釋一下：我們先來(lái)看看Thewatchmakerproject傳統(tǒng)的做法：預(yù)覽地址(你可以查看一下源代碼)。再來(lái)看看jQuery是如何用5行代碼來(lái)搞定的:
<code java>
<!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引用進(jìn)來(lái)-->
<script type="text/javascript">
$(document).ready(function(){ //這個(gè)就是傳說(shuō)的ready
$(".stripe tr").mouseover(function(){
//如果鼠標(biāo)移到class為stripe的表格的tr上時(shí)，執(zhí)行函數(shù)
$(this).addClass("over");}).mouseout(function(){
//給這行添加class值為over，并且當(dāng)鼠標(biāo)一出該行時(shí)執(zhí)行函數(shù)
$(this).removeClass("over");}) //移除該行的class
$(".stripe tr:even").addClass("alt");
//給class為stripe的表格的偶數(shù)行添加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; /*這個(gè)將是鼠標(biāo)高亮行的背景色*/
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"來(lái)標(biāo)識(shí)需要使用該效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>鄧國(guó)梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國(guó)梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國(guó)梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國(guó)梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國(guó)梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國(guó)梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
<p>PS: 飄飄說(shuō)我的table沒(méi)有<thead>,我知錯(cuò)了...</p>
</body>
</html>
</code>
[[http://rlog.cn/lab/StripingTable/|預(yù)覽地址]]
這里有一個(gè)jQuery的技巧不得不提一下：jQuery的鏈?zhǔn)讲僮鳎裁词擎準(zhǔn)讲僮髂兀?我們來(lái)看看，本來(lái)應(yīng)該寫成這樣子的：
<code java>
$(".stripe tr").mouseover(function(){
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })
</code>
但是我們寫成了：
<code java>
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
</code>
因?yàn)槭髽?biāo)移入移除都是發(fā)生在同一個(gè)對(duì)象上的，所以我們可以將發(fā)生在同一個(gè)對(duì)象上的動(dòng)作連起來(lái)寫，這樣子如果有很多對(duì)象并且在他們身上發(fā)生了很多動(dòng)作那么就會(huì)節(jié)省很多代碼。（我暫時(shí)是這樣理解的，也不知道對(duì)不對(duì)希望高手能夠斧正。）
----
* <html><div style="font-size:16px;color:red;font-weight:bold;">15 Days of jQuery(Day 3)---巧妙的偽裝鏈接</div></html>
今天的教程是草草完成的.我想把一些東西放在這15天的前面簡(jiǎn)單的講講,這樣以來(lái)就可以使一些js新手不至于被一堆代碼搞的暈頭轉(zhuǎn)向.事實(shí)上我是在即將結(jié)尾的時(shí)候才做出的這個(gè)決定.
**__目標(biāo)__**
我們要使用jQuery去創(chuàng)建一小段代碼,這段代碼會(huì)把一個(gè)頁(yè)面所有的超鏈接轉(zhuǎn)換并且偽裝起來(lái).
**__為什么?__**
一些下屬經(jīng)銷商認(rèn)為，一部分用戶有足夠的悟性發(fā)現(xiàn)會(huì)員鏈接，并能盡量避免通過(guò)點(diǎn)擊URL鏈接直接進(jìn)入瀏覽器，從而“欺騙”下屬經(jīng)銷商脫離代理（假設(shè)購(gòu)買行為已經(jīng)發(fā)生）
**__"老"辦法__**
有很多下屬經(jīng)銷商千方百計(jì)的掩飾他們的鏈接,避免人們通過(guò)鏈接找到他們.這些伎倆涉及到.htaccess和服務(wù)器端的代碼.
但對(duì)于本教程,我會(huì)將重點(diǎn)放到"老學(xué)校"的javascript上:
<code java>
<a onMouseOver='window.status="http://www.merchant-url-here.com";
return true;' onMouseOut='window.status="Done"; return true;'
target="_blank">Link Text Here</a>
</code>
這段代碼被用來(lái)在瀏覽器狀態(tài)欄顯示用戶鼠標(biāo)指向的鏈接地址.比如實(shí)際鏈接是www.website.com?aff=123,則可以在狀態(tài)欄顯示www.website.com.
**__問(wèn)題__**
你是一個(gè)很活躍的下級(jí)經(jīng)銷商,你可能會(huì)以瘋狂的速度給很多個(gè)頁(yè)面添加鏈接.并且還要給每個(gè)鏈接添加這種效果那么你肯定會(huì)厭倦的.加入有一天你要修改任務(wù)欄里顯示的鏈接的時(shí)候估計(jì)你會(huì)瘋掉的.
**__jQuery的解決辦法__**
首先,我們想讓javascript盡快的掩飾我們的鏈接所以我們應(yīng)該先從這里開(kāi)始:
<code java>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//code goes here
});
</script>
</code>
當(dāng)DOM準(zhǔn)備好的時(shí)候我們放在ready里的代碼就開(kāi)始執(zhí)行了.
接下來(lái)
要給所有我們想偽裝的鏈接添加一個(gè)class,class有助于jQuery幫我們找到需要偽裝的鏈接而撇開(kāi)其它不需要偽裝的鏈接.title有兩個(gè)作用:當(dāng)鼠標(biāo)劃過(guò)鏈接的時(shí)候會(huì)有一個(gè)小小的盒狀提示顯示URL:www.affsite.com并且同樣的信息會(huì)顯示在瀏覽器的狀態(tài)欄(IE Only).
<code java>
<p><a title="http://www.affsite.com"
class="affLink">Super Duper Product</a></p>
</code>
告訴jQuery找到有class="affLink"的鏈接
<code java>
$('a.affLink')
</code>
添加一個(gè)鼠標(biāo)劃過(guò)事件
<code java>
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
</code>
簡(jiǎn)單的說(shuō):找到class="affLink"的所有鏈接,當(dāng)鼠標(biāo)劃過(guò)它們的時(shí)候改變?yōu)g覽器狀態(tài)欄信息為該鏈接title的內(nèi)容.這個(gè)在FireFox并不能正常的工作,只是在IE里起作用.在FireFox的狀態(tài)欄只是顯示一個(gè)"Done",或者更準(zhǔn)確的說(shuō),鼠標(biāo)劃過(guò)超鏈接對(duì)狀態(tài)欄并沒(méi)有任何影響.我沒(méi)有更多的瀏覽器測(cè)試.
繼續(xù)-mouseout
jQuery可以讓我們用"鏈"的方式,像這樣:
<code java>
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
</code>
這點(diǎn)代碼告訴jQuery改變?yōu)g覽器狀態(tài)欄信息,或者當(dāng)鼠標(biāo)不再停留在鏈接上時(shí)返回"Done".
如果你不適應(yīng)jQuery的這種鏈的工作方式,那么你完全可以這樣寫:
<code java>
$('a.affLink').mouseover(function(){window.status=this.title;return true;});
$('a.affLink').mouseout(function(){window.status='Done';return true;});
</code>
這就看你了.
把這些代碼放到一起:
<code java>
<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>
</code>
最后的想法
你們當(dāng)中可能覺(jué)得今天的課程太簡(jiǎn)單了,有些還可能還是有點(diǎn)不太明白,因?yàn)槟銈儾皇嵌?jí)經(jīng)銷商.
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.
----
* <html><div style="font-size:16px;color:red;font-weight:bold;">15 Days of jQuery(Day 4)---安全郵件列表</div></html>
規(guī)則提到如何防止垃圾郵件:不要把你的郵件地址放到任何一個(gè)mailto:鏈接中.
在與垃圾郵件惡魔做斗爭(zhēng)的過(guò)程中我們的網(wǎng)頁(yè)設(shè)計(jì)師和程序員總結(jié)出了一些有創(chuàng)意的解決辦法,讓我們快速的看一些這些常見(jiàn)方法的缺點(diǎn)(或多或少有一些).
**__name [at-no-spam] website.com__**
問(wèn)題:鏈接式的更方便,而且把郵件地址敲入收件人欄還有可能會(huì)出錯(cuò).
**__聯(lián)系方式__**
問(wèn)題:你冒著這么大的風(fēng)險(xiǎn)就是因?yàn)橛幸粋€(gè)垃圾郵件借用你的帳戶發(fā)送大量的垃圾郵件(除非你使用真正的安全郵件腳本).而這樣就扼殺了那些只想給你發(fā)個(gè)簡(jiǎn)單郵件的用戶.
**__javascript加密__**
問(wèn)題:你的郵件仍然暴露在光天化日之下,即使你使用了復(fù)雜的密碼技術(shù)給它帶上面具.還有誰(shuí)希望為了發(fā)送一封郵件而啟用第三方的解密網(wǎng)站,反正我是不會(huì).
**__藏在一種簡(jiǎn)單的形式后面__**
(有一個(gè)例子,但是打不開(kāi)了.)http://simon.incutio.com/contact/我能想到的沒(méi)有人…但是讓我們看看是否我們能改進(jìn)觀念。
**__可能的解決辦法:AJAX__**
我提供的解決方案將比目前設(shè)計(jì)師們使用的方法有如下優(yōu)勢(shì):
* 易于實(shí)施
* 易于修改
* 還有一些小小的花哨的效果
* 不用第三方工具來(lái)加密郵件地址
* 沒(méi)有郵件地址暴露在光天化日之下
最后我想說(shuō)明一點(diǎn),我認(rèn)為電子郵件靠這種閃爍其詞的加密手段來(lái)躲避垃圾郵件還是非常不明智的.在實(shí)踐中,我認(rèn)為電子郵件加密是相對(duì)安全的,但是客觀事實(shí)是,電子郵件還是在html原代碼里.
**__概念__**
- 1.用jQuery從服務(wù)器上把html文件內(nèi)容抓下來(lái).
- 2.把包含郵件鏈接的html文件放到好的容器中是一種簡(jiǎn)單的保護(hù)機(jī)制.
**__示例__**
我要示范一些例子來(lái)顯示郵件鏈接地址,當(dāng)訪客點(diǎn)擊一個(gè)按鈕或者一個(gè)鏈接的時(shí)候,頁(yè)面就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的那個(gè)例子里.
[[http://15daysofjquery.com/examples/mailto/demo1.php|按鈕點(diǎn)擊--立即顯示]]
[[http://15daysofjquery.com/examples/mailto/demo2.php|鏈接點(diǎn)擊--淡出]]
[[http://15daysofjquery.com/examples/mailto/demo3.php|頁(yè)面載入--淡出]]
[[http://15daysofjquery.com/examples/mailto/demo4.php|頁(yè)面載入--立即顯示]]
(說(shuō)明:所謂的立即顯示,我的意思是說(shuō)"沒(méi)有花哨的效果而盡快的顯示電子郵件地址")
**__代碼__**
這里發(fā)表非商業(yè)共創(chuàng)使用許可,如果你希望將代碼使用在你的商業(yè)產(chǎn)品中時(shí),請(qǐng)聯(lián)系我.我正在一個(gè)新的CMS for web designers中使用它.
**__為什么這種方式比普通的mailto鏈接安全?__**
真正的問(wèn)題是垃圾郵件制造者會(huì)使用自動(dòng)化軟件從html源文件中尋找電子郵件鏈接,這種做法和google一樣:使用相關(guān)鏈接.
他么就和我們大部分人一樣懶惰.所以很難所他們不會(huì)拿個(gè)本子放在鍵盤旁邊記下你的電子郵件地址.
請(qǐng)查看我提供的示例的源代碼,你將不會(huì)在html里找到任何的郵件地址.
這幾堅(jiān)實(shí)的保證了你絕對(duì)不會(huì)收到垃圾郵件,只會(huì)從朋友或者瀏覽者那里收到郵件.
但是從頁(yè)面中移除郵件地址,.....................
**__最后一點(diǎn)說(shuō)明__**
先仔細(xì)看看前面三個(gè)例子,你會(huì)看到我使用了AJAX回調(diào)函數(shù)來(lái)觸發(fā)slideDown() 和 show() 效果.
換句話說(shuō),我希望AJAX調(diào)用收到信息(html)時(shí)jQuery才開(kāi)始slideDown() 效果.把秘密粘貼到我們簡(jiǎn)單的服務(wù)段腳本并且等待服務(wù)器返回信息.
**__正確的方法:__**
<code java>
$(document).ready(function(){
$.post('mailtoInfo.php',{
pass: "secret"
},function(txt){
$('div.email').html(txt);
$('div.email').slideDown("slow");
});
});
</code>
**__錯(cuò)誤的方法:__**
<code java>
$(document).ready(function(){
$.post('mailtoInfo.php',{
pass: "secret"
},function(txt){
$('div.email').html(txt);
});
$('div.email').slideDown("slow");
});
</code>
----
* <html><div style="font-size:16px;color:red;font-weight:bold;">15 Days of jQuery(Day 5)---包起來(lái)--懶人用Jquery生成的HTML</div></html>
這個(gè)讓我們輕松的紀(jì)念日已經(jīng)到來(lái)--我恨我在計(jì)算機(jī)前已經(jīng)花了48個(gè)小時(shí)，我希望能夠有另外一個(gè)jQuery來(lái)結(jié)束我的噩夢(mèng)，并且讓我上網(wǎng)更快。
當(dāng)我一邊“在用Jquery方法編寫”和一邊“進(jìn)行復(fù)雜的文件上傳”，我已經(jīng)筋疲力盡。然而這兩種操作的代碼是一種較淺的，它只不過(guò)是你才剛剛開(kāi)始解決的一些簡(jiǎn)單問(wèn)題。
所以下來(lái)我開(kāi)始介紹：
盡管我在我的網(wǎng)站用所有的CSS樣式表去進(jìn)行表格設(shè)計(jì)（也許這要花費(fèi)兩年半的時(shí)間或者更多），我已經(jīng)用了很多我能找到的在這方面的信息。回到2004年5月(古代史)A list a part有一篇[[http://www.alistapart.com/articles/onionskin/|《關(guān)于創(chuàng)建陰影的偉大教程(洋蔥皮投影)》]]可以應(yīng)用到任何圖片,無(wú)論尺寸多大.
那片文章的應(yīng)經(jīng)不能再評(píng)論了,但還是有些人希望能夠再出篇教程.
**__問(wèn)題__**
一些css工程師用一些"不相干"的標(biāo)記,就是為了使背景圖片能夠應(yīng)用到每一個(gè)元素上.例如:
這里是A list a part用到的代碼:
<code java>
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="object.gif" alt="The object casting a shadow" />
</div>
</div>
</div>
</code>
所有這些divs充當(dāng)一個(gè)給圖片添加投影效果的"鉤子".這不見(jiàn)得好,我們可以把源代碼精簡(jiǎn)成這樣:
<code java>
<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />
</code>
按著這個(gè)思路...
**__目標(biāo)__**
在這里,我要想你展示如何用jQuery輕而易舉的將多于的標(biāo)記從你的源代碼中剔除.運(yùn)用這個(gè)方法,讓你的代碼更加干凈(更重要的是)將使以后變換布局容易的多.
**__解__**
這里,看看jQuery是如何擊退這個(gè)問(wèn)題的.
<code java>
$(document).ready(function(){
$("img.dropshadow")
.wrap("<div class='wrap1'><div class='wrap2'>" +
"<div class='wrap3'></div></div></div>");
});
</code>
圖片就可以保持這樣了:
<code java>
<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />
</code>
**__仔細(xì)看看__**
$(document).ready() 是jQuery版的window.onload()
$("img.dropshadow") 告訴jQuery找到帶有class="dropshadow"的圖片,如果你想用一個(gè)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. )
**__最后的結(jié)果__**
傻乎乎的圖片,但是和original Onion Skinned Drop Shadows用的是一樣的.
<code java>
<!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 >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>
</code>
(這里只是代碼,沒(méi)有圖片.要看效果去[[http://15daysofjquery.com/examples/osds/|這里]])
**__jQuery和其它解決方法的比較__**
jQuery的網(wǎng)站上有一個(gè)到Ajaxian網(wǎng)站的鏈接,那里有用另外一個(gè)javascrip庫(kù)創(chuàng)建的Onion Skin Drop Shadow ,我相信他的代碼復(fù)雜程度和代碼量現(xiàn)在看來(lái)自不待言.我寧愿使用jQuery.(怎么?你猜到了..)
平心而論,沒(méi)有一個(gè)庫(kù)是對(duì)于每一個(gè)工作或每一段代碼都是合適的.本教程不是為了證明jQuery是一切javascrip類庫(kù)中的老大.
試試Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx 和 the dozens 或者其它的.如果你找到了一個(gè)你用起來(lái)比較順手的,那就去用它吧.
jQuery對(duì)于我來(lái)說(shuō)只是一個(gè)工具.我只是希望這個(gè)教程能夠提供給你更多使用它的方法.
**__有關(guān)jQuery的工具_(dá)_**
jQuery用難以置信的簡(jiǎn)單來(lái)操作DOM. [[http://jquery.com/docs/BaseDOM/|你應(yīng)該花些時(shí)間看看jQuery能用來(lái)做什么]],用下append(), prepend(), before(), after(), html(), and remove().
來(lái)自jQuery Docs
wrap(String html)
把所有匹配的元素用其他元素的結(jié)構(gòu)化標(biāo)記包裝起來(lái)。這種包裝對(duì)于在文檔中插入額外的結(jié)構(gòu)化標(biāo)記最有用，而且它不會(huì)破壞原始文檔的語(yǔ)義品質(zhì)。
這個(gè)函數(shù)的原理是檢查提供的第一個(gè)元素（它是由所提供的HTML標(biāo)記代碼動(dòng)態(tài)生成的），并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素－－這個(gè)祖先元素就是包裝元素。
當(dāng)HTML標(biāo)記代碼中的元素包含文本時(shí)無(wú)法使用這個(gè)函數(shù)。因此，如果要添加文本應(yīng)該在包裝完成之后再行添加。
示例:
<code java>
$("p").wrap("<div class='wrap'></div>");
</code>
HTML
<code java>
<p>Test Paragraph.</p>
</code>
結(jié)果
<code java>
<div class='wrap'><p>Test Paragraph.</p></div>
</code>
15 Days of jQuery(Day 6) --- 更安全的Contact Forms，不帶CAPTCHA
這次的教程內(nèi)容貼近我擅長(zhǎng)的技術(shù)方向：安全的contact forms。
就像我在前一篇教程中提到的那樣，一個(gè)最普通的contact forms可以幫助訪客同你進(jìn)行通信來(lái)往而不需要暴露你的電子郵件地址給那些可惡的垃圾郵件制造者們。
但如果spammer們已經(jīng)盯上你，沒(méi)有什么比一個(gè)不安全的contact foms更糟糕的了。想象一下你的網(wǎng)絡(luò)空間提供商發(fā)給你一封措辭強(qiáng)烈的電子郵件，通知說(shuō)：他們發(fā)現(xiàn)你的網(wǎng)站發(fā)送了大批量的性藥廣告以及其他垃圾郵件，另外，直到你停止這種行為之前，你的網(wǎng)站都將處于離線狀態(tài)–謝謝！
那么，今天我要在這篇教程里告訴大家的是一種在任何contact forms上添加一個(gè)額外安全層的簡(jiǎn)單方法－即使你沒(méi)有使用我提供的超級(jí)安全、超級(jí)靈活的Ultimate Form Mail。
當(dāng)前狀況
你意識(shí)到spammer們已經(jīng)通過(guò)遠(yuǎn)程探測(cè)技術(shù)發(fā)現(xiàn)了你的contact forms的弱點(diǎn)，而你希望他們走開(kāi)。
難點(diǎn)
你不想使用CAPTCHA（Completely Automated Public Turing Test to Tell Computers and Humans Apart），因?yàn)槟忝靼祝屇愕脑L客先去閱讀那些歪七扭八的字母數(shù)字才能發(fā)送消息只能抑制他們想要互動(dòng)的欲望，而不是促進(jìn)它。(數(shù)字驗(yàn)證的缺陷)
關(guān)鍵點(diǎn)：你希望那些壞家伙們堵車到天黑，同時(shí)希望那些好孩子們一條大道通羅馬。
解決方案
你將學(xué)會(huì)在頁(yè)面加載的時(shí)候使用jQuery來(lái)給你的contact forms添加一些隱藏的標(biāo)簽信息。當(dāng)窗體信息被提交到服務(wù)器端的時(shí)候，你可以用一些簡(jiǎn)單的php代碼實(shí)現(xiàn)如下的步驟：
隱藏的標(biāo)簽被識(shí)別出來(lái) 隱藏標(biāo)簽的信息與你的網(wǎng)站訪客下載到瀏覽器上的cookie里的某項(xiàng)標(biāo)志相一致 隱藏標(biāo)簽的有效時(shí)間還未過(guò)期 換句話說(shuō)，你的訪客們只有在一段有限的時(shí)間內(nèi)才可以填寫窗體并進(jìn)行發(fā)送。如果一個(gè)spammer嘗試通過(guò)遠(yuǎn)程調(diào)用來(lái)提交窗體信息到你的服務(wù)器，他們將會(huì)發(fā)現(xiàn)自己踢到了一塊又厚又硬的鐵板，不付出點(diǎn)代價(jià)休想通過(guò)。
我將要告訴你的這種方法是從一位非常聰明的同事Chris Shiflett提供的藍(lán)本基礎(chǔ)上修改而成的。他是位專業(yè)的安全專家，對(duì)php程序員經(jīng)常遇到的安全問(wèn)題了如指掌（我怎么感覺(jué)他又要忍不住提到他的Ultimate Form Mail 了~~汗）。
教程
基于上次那篇《斑馬線表格輕松制作》的反響良好，我決定再次制作一次類似的“手把手圖文教程”。雖然要花費(fèi)些時(shí)間，但很值得這么做。
手把手教程
DEMO
源代碼
銀彈？1)
銀彈是軟件領(lǐng)域的說(shuō)法,意為解決一切問(wèn)題的方法。這個(gè)來(lái)源于歐洲的傳說(shuō),說(shuō)是只有銀彈可以消滅狼人。
“那么，現(xiàn)在我的窗體就是100%安全的，可以假設(shè)任何免費(fèi)的cntact forms程序，然后高枕無(wú)憂了？”
呃。。。非也。
這種安全模式基于一個(gè)關(guān)鍵的假定：Spammer們總是會(huì)拿軟柿子捏，浪費(fèi)時(shí)間去解決一個(gè)狡猾的對(duì)手對(duì)他們來(lái)說(shuō)就是浪費(fèi)金錢。
現(xiàn)在， 好好聽(tīng)著，我的朋友們：
這個(gè)技術(shù)，盡管相當(dāng)健壯，但仍然不是解決目前脆弱的窗體處理程序問(wèn)題的靈丹妙藥。
我的這些安全建議的目的是為了讓spammer們知難而退。小偷們?nèi)胧冶I竊之前總會(huì)進(jìn)行仔細(xì)踩點(diǎn)，他們只對(duì)那些可以用最小代價(jià)獲取最大利益的房間感興趣。
換句話說(shuō)，如果在他們動(dòng)手之前有99%的機(jī)會(huì)擋住他們的試探，而且實(shí)現(xiàn)起來(lái)相當(dāng)容易，為什么不試一試呢？這才是此項(xiàng)技術(shù)要實(shí)現(xiàn)的目標(biāo)。
但這還是治標(biāo)不治本，不能解決所有問(wèn)題。
15 Days of jQuery(Day 7) --- 樣式表切換
我第一次看到樣式表切換器是在A List Apart或者Simple Bits，那是兩個(gè)設(shè)計(jì)師最應(yīng)該去的網(wǎng)站。
從那以后，我找到了很多可以讓訪客通過(guò)鼠標(biāo)點(diǎn)擊某個(gè)地方切換樣式表的方法。但最近我要寫一篇如何 使用jQuery編寫簡(jiǎn)單代碼實(shí)現(xiàn)它的教程。
我將向你們逐步解說(shuō)整個(gè)的過(guò)程，不僅僅因?yàn)橐故?span id="wmqeeuq" class="search_hit">jQuery代碼的簡(jiǎn)介，同時(shí)也要揭示jQuery庫(kù)中的若干高級(jí)特性。
首先，代碼
$(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)?
}
其他這里沒(méi)有提到的部分是你將在后面看到的創(chuàng)建和讀取cookie的函數(shù)。
熟悉的開(kāi)篇
$(document).ready(function()
{
$('.styleswitch').click(function()
告訴jQuery“以最快的速度查找所有包含對(duì)象名‘styleswitch’的元素，并在他們被鼠標(biāo)點(diǎn)擊時(shí)執(zhí)行一個(gè)函數(shù)”。
看起來(lái)不錯(cuò)。當(dāng)鼠標(biāo)點(diǎn)擊預(yù)先指定的元素時(shí)，switchStylestyle函數(shù)將被調(diào)用。從現(xiàn)在開(kāi)始是重點(diǎn)。
這句話什么意思？
第一次看到這句代碼的時(shí)候我的腦子有些卡殼：
$('link[@rel*=style]').each(function(i) {
在互聯(lián)網(wǎng)上搜索了一下后我空手而歸。最后不得不找到了jQuery的作者John Resig，向他咨詢。
他直接給了我一個(gè)jQuery網(wǎng)站的頁(yè)面地址，里面講解了若干jQuery提供的高級(jí)特性(xpath)，可以用來(lái)查找并操作頁(yè)面中的若干元素。
如果你看過(guò)這些東西你就能明白上面那句神秘的代碼的含義是告訴jQuery“查找所有帶rel屬性并且屬性值字符串中包含‘style’的link鏈接元素”。
嗯？
讓我們看看如何編寫包含一個(gè)主樣式表，兩個(gè)備用樣式表的頁(yè)面：
<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" />
我們可以看到所有樣式表都含有一個(gè)包含‘style’字串的rel屬性。
所以結(jié)果一目了然，jQuery輕松定位了頁(yè)面中的樣式表鏈接。
下一步？
each()函數(shù)將遍歷所有這些樣式表鏈接，并執(zhí)行下一行中的代碼：
this.disabled = true?
if (this.getAttribute('title') == styleName) this.disabled = false?
“首先禁用所有的樣式表鏈接，然后開(kāi)啟任何title屬性值與switchStylestyle函數(shù)傳遞過(guò)來(lái)的字串相同的樣式表”
一把抓啊，不過(guò)很有效。
現(xiàn)在我們需要保證的是那些樣式表存在并且有效。
完整代碼和演示
既然 Kelvin Luck已經(jīng)編寫了這些代碼，我就不在這里重復(fù)了。
DEMO
我相信Kelvin的靈感是從 這個(gè)網(wǎng)站那里得到的，我們正好可以看看使用其他工具實(shí)現(xiàn)這個(gè)功能是否要比jQuery更加復(fù)雜冗長(zhǎng)。
15 Days of jQuery(Day 8) --- 使用Javascript（jQuery）實(shí)現(xiàn)圓角邊框
當(dāng)我看到這些實(shí)現(xiàn)圓角邊框的HTML源代碼的時(shí)候，我發(fā)現(xiàn)這很適合用來(lái)寫一篇jQuery教程–使用wrap()、prepend()、append() 函數(shù)。
這里是原先的HTML代碼，我們將從這里開(kāi)始：
<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>
現(xiàn)在我們?cè)趺词褂?span id="wmqeeuq" class="search_hit">jQuery來(lái)精簡(jiǎn)這段代碼呢？
首先，我們需要一個(gè)“鉤子”，一個(gè)特殊的HTML元素，或者一個(gè)id，或者一個(gè)對(duì)象名–來(lái)告訴jQuery處理的目標(biāo)。
現(xiàn)在我們改成了這個(gè)樣子：
<div class=“roundbox”> <main content goes here > </div> 下一步，我們使用jQuery來(lái)將剩下的代碼添加進(jìn)去：
$(document).ready(function(){ $("div.roundbox") .wrap('<div
class="dialog">'+
'<div class="bd">'+
'<div class="c">'+
'<div class="s">'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
});
其他Div標(biāo)記去哪里了？
仔細(xì)觀察代碼，你就會(huì)發(fā)現(xiàn)它們都跑到了js代碼里面，在wrap函數(shù)執(zhí)行時(shí)它們將嵌套在“鉤子Div”的內(nèi)部。
細(xì)心的觀眾會(huì)發(fā)現(xiàn)我漏掉了部分代碼。這是因?yàn)?span id="wmqeeuq" class="search_hit">jQuery中的wrap()函數(shù)要求div標(biāo)簽必須嚴(yán)格對(duì)稱嵌套才能工作。
具體的，我去掉了下面兩個(gè)部分：
<div class="hd"><div class="c"></div></div>
<div class="ft"><div class="c"></div></div>
添加和預(yù)置一體化
下一步我們將會(huì)通過(guò)prepend和append函數(shù)將這兩段代碼添加進(jìn)帶有dialog對(duì)象名的div標(biāo)記內(nèi)部，并且使用“連鎖”方法。
$('div.dialog').prepend('<div class="hd">'+
'<div class="c"></div>'+
'</div>')
.append('<div class="ft">'+
'<div class="c"></div>'+
'</div>');
示例及代碼
我已經(jīng)在網(wǎng)上放置了一個(gè)演示頁(yè)面供大家查看。建議你看一下頁(yè)面的源代碼，體會(huì)jQuery給頁(yè)面代碼帶來(lái)的清爽和便捷。
這些代碼來(lái)自 Schillmania的一篇文章，個(gè)人推薦大家下載包含點(diǎn)綴圖片的zip打包，非常精美。
不使用圖片的圓角邊框
有很多方法可以實(shí)現(xiàn)圓角邊框–有些方法甚至不需要圖片。
在jQuery的網(wǎng)站上有一個(gè)用來(lái)制作無(wú)圖圓角邊框的插件。雖然不是適合所有人（或者說(shuō)所有程序），但也值得學(xué)習(xí)。
看看它的漂亮代碼吧（使用時(shí)）：
$(document).bind("load", function(){
$("#box1").corner()
});
15 Days of jQuery(Day ９) --- 快速和略顯粗劣的AJAX視頻教程
今天我的想法有點(diǎn)改變。近段時(shí)間以來(lái)我一直考慮注冊(cè)一個(gè)YouTube帳號(hào)來(lái)上傳一些教程錄像，現(xiàn)在我終于做出了決定并上傳了一個(gè)。在這里我將手把手的向大家演示為你的網(wǎng)站添加一些AJAX基本應(yīng)用的方法。
錄像很短，因?yàn)閅ouTube對(duì)上傳影片的長(zhǎng)度有限制（10分鐘以內(nèi)）。當(dāng)然由于制作倉(cāng)促，錯(cuò)誤在所難免。比如在某個(gè)地方我稱CGI為“服務(wù)器端腳本”，而更準(zhǔn)確的說(shuō)法應(yīng)該是“服務(wù)器端語(yǔ)言”。
這是AJAX，還是AHAH，抑或AXAH？
你將看到的東西其實(shí)更接近AHAH而不是純粹的AJAX。
有什么區(qū)別么？AJAX中的“X”代表著XML。但更多時(shí)候人們喜歡使用簡(jiǎn)單的文本或者javascript代碼或者單獨(dú)文件而不是那種復(fù)雜冗長(zhǎng)的XML。對(duì)此有篇文章有詳細(xì)論述：AJAX vs. AHAH。
至于AXAH。。。 Cody Lindley的文章可以解釋一切。對(duì)AJAX的一些工作理念有興趣的讀者可以看一下。
教程錄像
這個(gè)頁(yè)面上有我提供的演示。
15 Days of jQuery(Day 10) --- 使用jQuery Javascript 庫(kù)實(shí)現(xiàn)“即點(diǎn)即改”的AJAX化
以前我在Quirksmode網(wǎng)站見(jiàn)過(guò)這種代碼，后來(lái)又在24 Ways網(wǎng)站看到了一個(gè)更具Web 2.0風(fēng)格的方案。這次我將為大家展示兩種使用jQuery實(shí)現(xiàn)相同功能（甚至更好）的方法。
目標(biāo)
一個(gè)用AJAX（或AHAH）技術(shù)設(shè)計(jì)的頁(yè)面，訪問(wèn)者無(wú)需離開(kāi)就可以在看到的(x)HTML 頁(yè)面上編輯內(nèi)容。
方案
點(diǎn)擊需要編輯的文本，變幻出一個(gè)帶有保存和取消按鈕的textarea。修改的部分將通過(guò)AHAH傳送至服務(wù)器端的一個(gè)PHP腳本文件，用來(lái)更新數(shù)據(jù)庫(kù)（MySQL或普通文件）。
演示
AJAX式即點(diǎn)即改演示一
在這第一個(gè)演示中，我使用了一個(gè)id為“editinplace”的div元素。當(dāng)鼠標(biāo)劃過(guò)這里時(shí)，背景顏色將變成淺黃色。點(diǎn)擊文本將啟動(dòng)一些DOM操作，div元素被一個(gè)textarea元素取代–內(nèi)中包含原先的文本。
點(diǎn)擊保存按鈕將向服務(wù)器端的PHP腳本文件發(fā)送新的HTML內(nèi)容，并重新輸出收到的新文本內(nèi)容（通過(guò) $_POST）。
在真實(shí)應(yīng)用環(huán)境下，你還應(yīng)當(dāng)添加一個(gè)安全性檢測(cè)，然后才能更新數(shù)據(jù)庫(kù)并返回更新后的頁(yè)面內(nèi)容，同事告知jQuery執(zhí)行成功的信息。
但在這個(gè)例子中，所有的修改都是成功的，發(fā)送給PHP腳本的信息將原封不動(dòng)的返回到jQuery代碼，顯示到一個(gè)普通的警告窗口里。
解釋
開(kāi)頭部分說(shuō)了很多次了，如果你不想使用jQuery提供的document.ready函數(shù)，盡可以選擇你自己中意的init()函數(shù)。
$(document).ready(function(){
setClickable()?
})?
頁(yè)面上第一個(gè)被執(zhí)行的就是這個(gè)setClickable()函數(shù)。它的任務(wù)就是做以下內(nèi)容：
查找包含id為“editinplace”的div元素，然后告訴jQuery在這些div被點(diǎn)擊時(shí)執(zhí)行某些操作。
function setClickable() {
$('#editInPlace').click(function() {
讀取div內(nèi)部的HTML代碼的任務(wù)將交給jQuery的html()函數(shù)來(lái)完成。這些HTML將會(huì)額外添加若干代碼以組成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內(nèi)部找到的HTML代碼將會(huì)賦值給一個(gè)叫做“revert”的變量。這個(gè)變量將用來(lái)在取消按鈕被按下的事件中輸出原始文本。
var revert = $(this).html()?
jQuery的DOM函數(shù)“after”用來(lái)將新生的textarea HTML代碼放置在我們指定的div元素后。我在后面緊跟著連鎖上了一個(gè)remove()方法 來(lái)移除div元素以節(jié)省代碼。
$(this).after(textarea+button).remove()?
在使用jQuery的時(shí)候，我通過(guò)對(duì)象名來(lái)定位保存和取消按鈕對(duì)象。我指示jQuery在任一按鈕按下時(shí)觸發(fā)最后一個(gè)函數(shù)“saveChanges”。我告訴了jQuery在div元素被點(diǎn)擊時(shí)做什么事情，但我沒(méi)有在最后加上分號(hào)因?yàn)槲蚁Ｍ谶@個(gè)div操作語(yǔ)句后面連鎖其他方法。
$('.saveButton').click(function(){saveChanges(this, false)?})?
$('.cancelButton').click(function(){saveChanges(this, revert)?})?
})
我再連鎖了一個(gè)簡(jiǎn)單的mouseover和mouseout事件，告訴jQuery在鼠標(biāo)指針掠過(guò)我們指定的div元素（id=editInPlace）的時(shí)候添加和移除一個(gè)對(duì)象。
.mouseover(function() {
$(this).addClass("editable")?
})
.mouseout(function() {
$(this).removeClass("editable")?
})?
}?//end of function setClickable
函數(shù)“saveChanges”將以按鈕對(duì)象做為第一個(gè)參數(shù)，而cancel參數(shù)則取兩種值，false或者保存在revert變量中的html代碼內(nèi)容。
function saveChanges(obj, cancel) {
如果cancel為假，則函數(shù)將保存更改并使用html格式發(fā)送給服務(wù)器端的php腳本。我在這里使用了jQuery內(nèi)置的一個(gè)DOM函數(shù)實(shí)現(xiàn)對(duì)textarea內(nèi)容的提取操作：parent()和siblings()。
if(!cancel) {
var t = $(obj).parent().siblings(0).val()?
DOM基礎(chǔ)超出了本系列教程的范圍，但在這個(gè)應(yīng)用中我只是告訴了jQuery“對(duì)象（保存按鈕）有一個(gè)父元素（div）。。。去找到它。那個(gè)元素?fù)碛幸粋€(gè)或多個(gè)DOM樹(shù)同級(jí)對(duì)象。。。我只想找到其中的第一個(gè)。然后提取那個(gè)對(duì)象的所有內(nèi)容。”
（稍等。。。如果你對(duì)DOM風(fēng)格的代碼不是很熟悉的話，前面我的注釋可能并不好理解。我還是建議你之前google一下“DOM javascript”或者其他相關(guān)的信息。）
這些html賦值給了t變量，現(xiàn)在要通過(guò)POST方法把它發(fā)送給test2.php。
$.post("test2.php",{
content: t
},function(txt){
alert( txt)?
})?
}
如果cancel有一個(gè)值，那么必然是保存在revert變量中的原始html內(nèi)容。所以，在這個(gè)時(shí)候我希望變量t變?yōu)樵糷tml內(nèi)容。
else {
var t = cancel?
}
下一步是通過(guò)jQuery提供的DOM函數(shù)放置一個(gè)新的div元素，id為“editInPlace”，在這之后包含了textarea元素。。。然后刪除掉這個(gè)div元素。
$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove()
在果殼中，這將告訴jQuery“在DOM樹(shù)中上躍兩次。將HTML代碼附在到達(dá)位置的對(duì)象之后，然后移除那個(gè)對(duì)象。”
最后，我們?cè)俅握{(diào)用setClickable函數(shù)并關(guān)閉saveChange()函數(shù)。重調(diào)setClickable()函數(shù)的含義是重新設(shè)置onMouseover,onMouseout,和onClick事件到初始狀態(tài)。
setClickable()?
}
第二個(gè)示例
第二個(gè)方法非常類似但也有點(diǎn)復(fù)雜。
示例二
沒(méi)有用到龐大的單獨(dú)div元素，這個(gè)示例將每個(gè)段落p標(biāo)簽變換成單獨(dú)的可編輯區(qū)域。
這里的難度在于你如何在向服務(wù)器端腳本發(fā)送數(shù)據(jù)時(shí)指定正確的段落p標(biāo)簽。
在這里我通過(guò)為每個(gè)p標(biāo)簽編號(hào)并將這個(gè)編號(hào)一同發(fā)送給服務(wù)器端的php腳本的方式解決了問(wèn)題。你會(huì)在alert窗口中看到php腳本是如何“知道”哪個(gè)p標(biāo)簽里的內(nèi)容被修改的。
已知的問(wèn)題
現(xiàn)實(shí)的應(yīng)用中，你在使用類似的功能時(shí)首先需要驗(yàn)證更改的內(nèi)容的合法性，然后才能將數(shù)據(jù)發(fā)送到服務(wù)器端。顯然在這里我們刻意把這些內(nèi)容忽略掉了。
15 Days of jQuery(Day 11) --- 使用不苛刻的javascript代碼實(shí)現(xiàn)多文件上傳
好幾個(gè)月以前，當(dāng)我在追逐互聯(lián)網(wǎng)上AJAX熱潮的時(shí)候，我在 FiftyFourEleven網(wǎng)站上發(fā)現(xiàn)了一篇使用創(chuàng)新的javascript代碼實(shí)現(xiàn)當(dāng)時(shí)正在困擾我的“ 單文件元素實(shí)現(xiàn)多文件上傳”的文章。
所以當(dāng)我想寫作《15天漫游jQuery》的時(shí)候，我第一個(gè)想到的就是用jQuery實(shí)現(xiàn)這個(gè)功能。
接觸易用性狂熱愛(ài)好者
幾天前當(dāng)我檢查網(wǎng)站記錄的時(shí)候，發(fā)現(xiàn)了一條遺漏的文章trackback。跟過(guò)去看的時(shí)候我發(fā)現(xiàn)我的兩篇jQuery文章被作者引用來(lái)證明他為什么討厭javascript。
根據(jù)這個(gè)人的說(shuō)法，任何工具或技術(shù)如果沒(méi)有將易用性放在第一位都將成為垃圾。
盡管我很不同意這位仁兄一桿子打死的態(tài)度，但他還是讓我對(duì)這篇詳細(xì)教程有所留意。當(dāng)我在編寫一個(gè)簡(jiǎn)單網(wǎng)頁(yè)效果的時(shí)候，我會(huì)盡量小心謹(jǐn)慎的處理。這樣如果網(wǎng)站訪客們決定關(guān)閉javascript代碼執(zhí)行功能的時(shí)候，他們?nèi)匀豢梢哉Ｊ褂镁W(wǎng)站的功能。
關(guān)于第一價(jià)值的兩個(gè)教程
演示
演示一地址
演示二地址(這個(gè)演示有bug導(dǎo)致無(wú)法使用，作者修正了bug，使用這個(gè)后面鏈接查看演示演示二地址(no bug))
解釋
單文件輸入框
jQuery的$(document).ready() 函數(shù)的工作有兩個(gè)：
創(chuàng)建一個(gè)用來(lái)顯示最大允許上傳文件數(shù)的div元素。 查找文件上傳框（假設(shè)這里只有一個(gè)），然后給它附上一個(gè)onChange事件。
$("input[@type=file]").change(function(){
doIt(this, fileMax)?
})?
doit()函數(shù)（簡(jiǎn)單又好記，呵呵~）檢查是否達(dá)到了最大文件數(shù)量限制，如果不是，它會(huì)隱藏當(dāng)前文件輸入框，在父div里添加一個(gè)新的文件輸入框，將輸入框內(nèi)的文件名使用id “files_list”作為標(biāo)記，在最后添加一個(gè)“刪除”按鈕。
在DOM樹(shù)中導(dǎo)航，我使用jQuery的parent()函數(shù)，然后用remove()函數(shù)移除元素。我還使用了append()和prepend()函數(shù)分別添加文件名和新的輸入框。
兩個(gè)關(guān)鍵點(diǎn)
- 最大文件上傳數(shù)量設(shè)定：
var fileMax = 3?
- 輸入框必須有適當(dāng)?shù)亩ㄎ淮胧?
<input type="file" class="upload" name="fileX[]"/>
這樣弄以后輸入框可疑由訪問(wèn)者決定添加還是刪除，沒(méi)有任何關(guān)于id或名稱的操作。當(dāng)這個(gè)窗體代碼發(fā)送給服務(wù)器端腳本的時(shí)候，相關(guān)信息就已經(jīng)被存放在了一個(gè)數(shù)組中了。
多文件輸入框
首先，文件允許上傳的數(shù)量由頁(yè)面中的文件輸入框的數(shù)量決定。其次，你仍然需要通過(guò)某種方法為每個(gè)輸入框接收到的內(nèi)容用一個(gè)數(shù)組存放。
<input type="file" class="upload" name="fileX[]"/>
第二個(gè)演示跟前面的比起來(lái)最大的不同在于，我遍歷了每個(gè)文件輸入框并在其內(nèi)容有改動(dòng)時(shí)執(zhí)行doit()函數(shù)。通過(guò)遍歷每一個(gè)輸入框，我可以為我的代碼添加有用的額外信息：輸入框內(nèi)容在“堆棧”中的順序。
換句話說(shuō)，當(dāng)這段代碼執(zhí)行時(shí)，它會(huì)特別指定第一個(gè)輸入框，或者第二個(gè)，抑或第三個(gè)。
代碼見(jiàn)下：
$("input[@type=file]:nthoftype("+
n+")")
jQuery的靈活性允許我們使用CSS和XPath描述語(yǔ)句定位指定的元素位置。
你會(huì)發(fā)現(xiàn)當(dāng)一個(gè)文件被選中時(shí)，文件輸入框都會(huì)被文件名稱覆蓋。點(diǎn)擊文件名就可以選擇其他不同的文件。
15 Days of jQuery(Day 12) --- jQuery Lightbox （插件）
Cody Lindley 移植的第一版“ Thickbox”讓我第一次感受到了jQuery的魅力。后來(lái)他又做了一些 代碼升級(jí)以修復(fù)若干跨瀏覽器的兼容性問(wèn)題。
一些需要注意的地方
$(document).ready 取代了TB_init() 函數(shù)，作用是在每個(gè)包含對(duì)象名“thickbox”的鏈接上附加一個(gè)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?
})?
當(dāng)這些鏈接被點(diǎn)擊時(shí)，TB_show()函數(shù)就將執(zhí)行。
$("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>")?
如你所見(jiàn)，在文檔body元素前添加了兩個(gè)div元素。換句話說(shuō)，這兩個(gè)div元素將被添加在頁(yè)面html代碼的body關(guān)閉元素前。
覆蓋的div將使用一個(gè)特定的包含不透明外表的CSS文件指定表現(xiàn)。TB_window的代碼用來(lái)通過(guò)AHAH在頁(yè)面中放置一張圖片或者加入另一個(gè)頁(yè)面。$(window).resize 和$(window).scroll 告訴jQuery在用戶重新調(diào)整窗口大小或者拖動(dòng)頁(yè)面翻頁(yè)的時(shí)候執(zhí)行TB_position函數(shù)。這是保證Thickbox始終保持在窗口中心部位的手段。
接下來(lái)，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
如果這是一個(gè)圖片文件，則jQuery的append函數(shù)會(huì)添加html代碼到適當(dāng)位置。
$("#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)?
另外，遠(yuǎn)程文件將使用jQuery的load()函數(shù)導(dǎo)入。
$("#TB_ajaxContent").load(url, function(){
15 Days of jQuery(Day 13) --- jQuery 表格
一位叫Klaus的朋友編寫了一個(gè)小插件， 用jQuery實(shí)現(xiàn)可用性極佳的javascript表格。
設(shè)置好正確的(x)HTML 和CSS后，你可以像下面那樣創(chuàng)建表格：
$.tabs(”container”)? first tab on by default 如果你像在默認(rèn)位置“上方”再添加一個(gè)表格： $.tabs(”container”, 2)? second tab on
Klaus這里 示例，你可以看看最終效果。
我的改版
我稍微修改了Klaus的代碼，添加了一個(gè)簡(jiǎn)單的表單用來(lái)生成表格的表頭。
用法：
非常簡(jiǎn)單。只需要輸入每個(gè)表格的表頭（最多5個(gè)），然后點(diǎn)擊表單下方的按鈕。下一個(gè)頁(yè)面將生成結(jié)果HTML代碼，你可以復(fù)制然后粘貼到文件中。
你還需要 下載Klaus網(wǎng)站的CSS文件，做些你自己的修改，當(dāng)然還要上傳jQuery框架庫(kù)到你的服務(wù)器上。
這里是表格生成器的地址。
15 Days of jQuery(Day 14) --- Javascript 工具提示
Cody Lindley ，Thickbox的作者，日前發(fā)布了 jTip - jQuery 工具提示。
我對(duì)其中很多想法和思路拍案叫絕。我知道你已經(jīng)看過(guò)很多類似的工具提示代碼了。但是，Cody 的方法已經(jīng)在我的工作中顯露出了閃光點(diǎn)。
當(dāng)我檢查HTML代碼時(shí)，我發(fā)現(xiàn)了一個(gè)大問(wèn)題，可訪問(wèn)性。鏈接在javascript關(guān)閉的時(shí)候無(wú)法工作。我并不是傾向于一定要實(shí)現(xiàn)全面的可訪問(wèn)性，只是在這里我認(rèn)為可以有其他更具親和力的方式實(shí)現(xiàn)相同的功能。
尤其是，我個(gè)人不喜歡那種為了可訪問(wèn)性而去犧牲可用性來(lái)實(shí)現(xiàn)在提示框上鏈接另一個(gè)頁(yè)面鏈接的方法。我喜歡這個(gè)提示框 - 不是對(duì)Cody不尊重，只是在我這里我“需要”它能夠在各種情況下工作。
今天我要提供給大家的是Cody的工具提示代碼的小小修改。如果你不是Cody工具提示的愛(ài)好者的話，我的改版對(duì)你來(lái)說(shuō)也許不是很在意。但如果你喜歡他的作品同時(shí)希望它可以在javascript關(guān)閉的時(shí)候照常工作，這個(gè)也許是你需要的。
我的改動(dòng)
讓我產(chǎn)生修改想法的，是他的代碼在Yahoo上的應(yīng)用。我不喜歡他使用的代碼：
<a href="yahoo.htm?width=175&?link=http://www.yahoo.com"
name="Before You Click..."
id="yahooCopy"
class="jTip">Go To Yahoo</a>
所以我重寫了他的部分代碼，成了現(xiàn)在這個(gè)樣子：
<a href="http://www.yahoo.com"
rel="yahoo.htm?width=175&link=yahoo&name=Before%20
%20You%20Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>
我的示例
改進(jìn)：HTML標(biāo)準(zhǔn)校驗(yàn)
我的代碼可以通過(guò)w3.org的測(cè)試
改進(jìn)：命名
在我修改Cody的代碼的時(shí)候我發(fā)現(xiàn)他使用了一個(gè)用來(lái)存儲(chǔ)鏈接名稱的叫做“title”的變量名，這會(huì)導(dǎo)致一些混淆。
我標(biāo)出了這個(gè)命名問(wèn)題，即使我認(rèn)為這不過(guò)是個(gè)小小的失誤。
改進(jìn)：可用性
使用我的代碼，你可以讓每個(gè)提示框都含有真實(shí)鏈接地址到另一個(gè)文檔，不管內(nèi)部的還是外部的。或者你只是想要那個(gè)提示框，不想關(guān)心可用性，你同樣可以讓鏈接部分留空。
選擇權(quán)在你。
感謝
Cody提供了偉大的代碼，幫助我節(jié)省了大量的時(shí)間和精力。我的修改只是對(duì)原有代碼的輕微“調(diào)整”，希望朋友們喜歡。
15 Days of jQuery(Day 15) --- 拖拽效果和選擇器