15天學會jQuery (6-10)

15 Days of jQuery(Day 6) --- 更安全的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%的機會擋住他們的試探，而且實現起來相當容易，爲什麼不試一試呢？這纔是此項技術要實現的目標。
但這還是治標不治本，不能解決所有問題。
--------------------------------------------------------------------------------
15 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()

$(document).ready(function()
{
$('.styleswitch').click(function()

告訴jQuery“以最快的速度查找所有包含對象名‘styleswitch’的元素，並在他們被鼠標點擊時執行一個函數”。
看起來不錯。當鼠標點擊預先指定的元素時，switchStylestyle函數將被調用。從現在開始是重點。
這句話什麼意思？
第一次看到這句代碼的時候我的腦子有些卡殼：

$('link[@rel*=style]').each(function(i) {

$('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" />

<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;

this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;

“首先禁用所有的樣式錶鏈接，然後開啓任何title屬性值與switchStylestyle函數傳遞過來的字串相同的樣式表”
一把抓啊，不過很有效。
現在我們需要保證的是那些樣式表存在並且有效。
完整代碼和演示
既然 Kelvin Luck已經編寫了這些代碼，我就不在這裏重複了。
DEMO
我相信Kelvin的靈感是從 這個網站那裏得到的，我們正好可以看看使用其他工具實現這個功能是否要比jQuery更加複雜冗長。
--------------------------------------------------------------------------------
15 Days of jQuery(Day --- 使用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>

<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>

<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>');
});

$(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>

<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>');

$('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()
});

$(document).bind("load", function(){ 
$("#box1").corner()
});

--------------------------------------------------------------------------------
15 Days of jQuery(Day ９) --- 快速和略顯粗劣的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(Day 10) --- 使用jQuery Javascript 庫實現“即點即改”的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();
});

$(document).ready(function(){
setClickable();
});

頁面上第一個被執行的就是這個setClickable()函數。它的任務就是做以下內容：
查找包含id爲“editinplace”的div元素，然後告訴jQuery在這些div被點擊時執行某些操作。

function setClickable() {
$('#editInPlace').click(function() {

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();

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

var revert = $(this).html();jQuery

的DOM函數“after”用來將新生的textarea HTML代碼放置在我們指定的div元素後。我在後面緊跟着連鎖上了一個remove()方法 來移除div元素以節省代碼。

$(this).after(textarea+button).remove();

$(this).after(textarea+button).remove();

在使用jQuery的時候，我通過對象名來定位保存和取消按鈕對象。我指示jQuery在任一按鈕按下時觸發最後一個函數“saveChanges”。我告訴了jQuery在div元素被點擊時做什麼事情，但我沒有在最後加上分號因爲我希望在這個div操作語句後面連鎖其他方法。

$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});
})

$('.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

.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

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);
});
}

$.post("test2.php",{
content: t
},function(txt){
alert( txt);
});
}

如果cancel有一個值，那麼必然是保存在revert變量中的原始html內容。所以，在這個時候我希望變量t變爲原始html內容。

else {
var t = cancel;
}

else {
var t = cancel;
}

下一步是通過jQuery提供的DOM函數放置一個新的div元素，id爲“editInPlace”，在這之後包含了textarea元素。。。然後刪除掉這個div元素。

$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove()

$(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標籤裏的內容被修改的。
已知的問題
現實的應用中，你在使用類似的功能時首先需要驗證更改的內容的合法性，然後才能將數據發送到服務器端。顯然在這裏我們刻意把這些內容忽略掉了。