這次的教程內(nèi)容貼近我擅長的技術方向：安全的contact forms。

就像我在前一篇教程中提到的那樣，一個最普通的contact forms可以幫助訪客同你進行通信來往而不需要暴露你的電子郵件地址給那些可惡的垃圾郵件制造者們。

但如果spammer們已經(jīng)盯上你，沒有什么比一個不安全的contact foms更糟糕的了。想象一下你的網(wǎng)絡空間提供商發(fā)給你一封措辭強烈的電子郵件，通知說：他們發(fā)現(xiàn)你的網(wǎng)站發(fā)送了大批量的性藥廣告以及其他垃圾郵件，另外，直到你停止這種行為之前，你的網(wǎng)站都將處于離線狀態(tài)–謝謝！

那么，今天我要在這篇教程里告訴大家的是一種在任何contact forms上添加一個額外安全層的簡單方法－即使你沒有使用我提供的超級安全、超級靈活的ultimate form mail。

當前狀況

你意識到spammer們已經(jīng)通過遠程探測技術發(fā)現(xiàn)了你的contact forms的弱點，而你希望他們走開。

難點

你不想使用captcha（completely automated public turing test to tell computers and humans apart），因為你明白，讓你的訪客先去閱讀那些歪七扭八的字母數(shù)字才能發(fā)送消息只能抑制他們想要互動的欲望，而不是促進它。(數(shù)字驗證的缺陷)

關鍵點：你希望那些壞家伙們堵車到天黑，同時希望那些好孩子們一條大道通羅馬。

解決方案

你將學會在頁面加載的時候使用jquery來給你的contact forms添加一些隱藏的標簽信息。當窗體信息被提交到服務器端的時候，你可以用一些簡單的php代碼實現(xiàn)如下的步驟：

隱藏的標簽被識別出來 隱藏標簽的信息與你的網(wǎng)站訪客下載到瀏覽器上的cookie里的某項標志相一致 隱藏標簽的有效時間還未過期 換句話說，你的訪客們只有在一段有限的時間內(nèi)才可以填寫窗體并進行發(fā)送。如果一個spammer嘗試通過遠程調(diào)用來提交窗體信息到你的服務器，他們將會發(fā)現(xiàn)自己踢到了一塊又厚又硬的鐵板，不付出點代價休想通過。

我將要告訴你的這種方法是從一位非常聰明的同事chris shiflett提供的藍本基礎上修改而成的。他是位專業(yè)的安全專家，對php程序員經(jīng)常遇到的安全問題了如指掌（我怎么感覺他又要忍不住提到他的ultimate form mail 了~~汗）。

教程

基于上次那篇《斑馬線表格輕松制作》的反響良好，我決定再次制作一次類似的“手把手圖文教程”。雖然要花費些時間，但很值得這么做。

手把手教程

demo

源代碼

銀彈？1)

銀彈是軟件領域的說法,意為解決一切問題的方法。這個來源于歐洲的傳說,說是只有銀彈可以消滅狼人。“那么，現(xiàn)在我的窗體就是100%安全的，可以假設任何免費的cntact forms程序，然后高枕無憂了？”

呃。。。非也。

這種安全模式基于一個關鍵的假定：spammer們總是會拿軟柿子捏，浪費時間去解決一個狡猾的對手對他們來說就是浪費金錢。

現(xiàn)在， 好好聽著，我的朋友們：

這個技術，盡管相當健壯，但仍然不是解決目前脆弱的窗體處理程序問題的靈丹妙藥。

我的這些安全建議的目的是為了讓spammer們知難而退。小偷們?nèi)胧冶I竊之前總會進行仔細踩點，他們只對那些可以用最小代價獲取最大利益的房間感興趣。

換句話說，如果在他們動手之前有99%的機會擋住他們的試探，而且實現(xiàn)起來相當容易，為什么不試一試呢？這才是此項技術要實現(xiàn)的目標。

但這還是治標不治本，不能解決所有問題。

--------------------------------------------------------------------------------

[hilitecolor=#808080]15 days of jquery(day 7) --- 樣式表切換[/hilitecolor]

我第一次看到樣式表切換器是在a list apart或者simple bits，那是兩個設計師最應該去的網(wǎng)站。

從那以后，我找到了很多可以讓訪客通過鼠標點擊某個地方切換樣式表的方法。但最近我要寫一篇如何 使用jquery編寫簡單代碼實現(xiàn)它的教程。

我將向你們逐步解說整個的過程，不僅僅因為要展示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);
}其他這里沒有提到的部分是你將在后面看到的創(chuàng)建和讀取cookie的函數(shù)。

熟悉的開篇

$(document).ready(function()
{
$('.styleswitch').click(function()告訴jquery“以最快的速度查找所有包含對象名‘styleswitch’的元素，并在他們被鼠標點擊時執(zhí)行一個函數(shù)”。

看起來不錯。當鼠標點擊預先指定的元素時，switchstylestyle函數(shù)將被調(diào)用。從現(xiàn)在開始是重點。

這句話什么意思？

第一次看到這句代碼的時候我的腦子有些卡殼：

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

在互聯(lián)網(wǎng)上搜索了一下后我空手而歸。最后不得不找到了jquery的作者john resig，向他咨詢。

他直接給了我一個jquery網(wǎng)站的頁面地址，里面講解了若干jquery提供的高級特性(xpath)，可以用來查找并操作頁面中的若干元素。

如果你看過這些東西你就能明白上面那句神秘的代碼的含義是告訴jquery“查找所有帶rel屬性并且屬性值字符串中包含‘style’的link鏈接元素”。

嗯？

讓我們看看如何編寫包含一個主樣式表，兩個備用樣式表的頁面：

我們可以看到所有樣式表都含有一個包含‘style’字串的rel屬性。

所以結(jié)果一目了然，jquery輕松定位了頁面中的樣式表鏈接。

下一步？

each()函數(shù)將遍歷所有這些樣式表鏈接，并執(zhí)行下一行中的代碼：

this.disabled = true;
if (this.getattribute('title') == stylename) this.disabled = false;“首先禁用所有的樣式表鏈接，然后開啟任何title屬性值與switchstylestyle函數(shù)傳遞過來的字串相同的樣式表”

一把抓啊，不過很有效。

現(xiàn)在我們需要保證的是那些樣式表存在并且有效。

完整代碼和演示

既然 kelvin luck已經(jīng)編寫了這些代碼，我就不在這里重復了。

demo

我相信kelvin的靈感是從 這個網(wǎng)站那里得到的，我們正好可以看看使用其他工具實現(xiàn)這個功能是否要比jquery更加復雜冗長。

--------------------------------------------------------------------------------

[hilitecolor=#808080]15 days of jquery(day 8) --- 使用javascript（jquery）實現(xiàn)圓角邊框[/hilitecolor]

當我看到這些實現(xiàn)圓角邊框的html源代碼的時候，我發(fā)現(xiàn)這很適合用來寫一篇jquery教程–使用wrap()、prepend()、append() 函數(shù)。

這里是原先的html代碼，我們將從這里開始：

現(xiàn)在我們怎么使用jquery來精簡這段代碼呢？

首先，我們需要一個“鉤子”，一個特殊的html元素，或者一個id，或者一個對象名–來告訴jquery處理的目標。

現(xiàn)在我們改成了這個樣子：

下一步，我們使用jquery來將剩下的代碼添加進去：

$(document).ready(function(){ $("div.roundbox") .wrap('

');
});其他div標記去哪里了？

仔細觀察代碼，你就會發(fā)現(xiàn)它們都跑到了js代碼里面，在wrap函數(shù)執(zhí)行時它們將嵌套在“鉤子div”的內(nèi)部。

細心的觀眾會發(fā)現(xiàn)我漏掉了部分代碼。這是因為jquery中的wrap()函數(shù)要求div標簽必須嚴格對稱嵌套才能工作。

具體的，我去掉了下面兩個部分：

添加和預置一體化

下一步我們將會通過prepend和append函數(shù)將這兩段代碼添加進帶有dialog對象名的div標記內(nèi)部，并且使用“連鎖”方法。

$('div.dialog').prepend('

')
.append('');示例及代碼

我已經(jīng)在網(wǎng)上放置了一個演示頁面供大家查看。建議你看一下頁面的源代碼，體會jquery給頁面代碼帶來的清爽和便捷。

這些代碼來自 schillmania的一篇文章，個人推薦大家下載包含點綴圖片的zip打包，非常精美。

不使用圖片的圓角邊框

有很多方法可以實現(xiàn)圓角邊框–有些方法甚至不需要圖片。

在jquery的網(wǎng)站上有一個用來制作無圖圓角邊框的插件。雖然不是適合所有人（或者說所有程序），但也值得學習。

看看它的漂亮代碼吧（使用時）：

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

[hilitecolor=#808080]15 days of jquery(day ９) --- 快速和略顯粗劣的ajax視頻教程[/hilitecolor]

今天我的想法有點改變。近段時間以來我一直考慮注冊一個youtube帳號來上傳一些教程錄像，現(xiàn)在我終于做出了決定并上傳了一個。在這里我將手把手的向大家演示為你的網(wǎng)站添加一些ajax基本應用的方法。

錄像很短，因為youtube對上傳影片的長度有限制（10分鐘以內(nèi)）。當然由于制作倉促，錯誤在所難免。比如在某個地方我稱cgi為“服務器端腳本”，而更準確的說法應該是“服務器端語言”。

這是ajax，還是ahah，抑或axah？

你將看到的東西其實更接近ahah而不是純粹的ajax。

有什么區(qū)別么？ajax中的“x”代表著xml。但更多時候人們喜歡使用簡單的文本或者javascript代碼或者單獨文件而不是那種復雜冗長的xml。對此有篇文章有詳細論述：ajax vs. ahah。

至于axah。。。 cody lindley的文章可以解釋一切。對ajax的一些工作理念有興趣的讀者可以看一下。

教程錄像

這個頁面上有我提供的演示。

--------------------------------------------------------------------------------

[hilitecolor=#808080]15 days of jquery(day 10) --- 使用jquery javascript 庫實現(xiàn)“即點即改”的[/hilitecolor]ajax化

以前我在quirksmode網(wǎng)站見過這種代碼，后來又在24 ways網(wǎng)站看到了一個更具web 2.0風格的方案。這次我將為大家展示兩種使用jquery實現(xiàn)相同功能（甚至更好）的方法。

目標

一個用ajax（或ahah）技術設計的頁面，訪問者無需離開就可以在看到的(x)html 頁面上編輯內(nèi)容。

方案

點擊需要編輯的文本，變幻出一個帶有保存和取消按鈕的textarea。修改的部分將通過ahah傳送至服務器端的一個php腳本文件，用來更新數(shù)據(jù)庫（mysql或普通文件）。

演示

ajax式即點即改演示一

在這第一個演示中，我使用了一個id為“editinplace”的div元素。當鼠標劃過這里時，背景顏色將變成淺黃色。點擊文本將啟動一些dom操作，div元素被一個textarea元素取代–內(nèi)中包含原先的文本。

點擊保存按鈕將向服務器端的php腳本文件發(fā)送新的html內(nèi)容，并重新輸出收到的新文本內(nèi)容（通過 $_post）。

在真實應用環(huán)境下，你還應當添加一個安全性檢測，然后才能更新數(shù)據(jù)庫并返回更新后的頁面內(nèi)容，同事告知jquery執(zhí)行成功的信息。

但在這個例子中，所有的修改都是成功的，發(fā)送給php腳本的信息將原封不動的返回到jquery代碼，顯示到一個普通的警告窗口里。

解釋

開頭部分說了很多次了，如果你不想使用jquery提供的document.ready函數(shù)，盡可以選擇你自己中意的init()函數(shù)。

$(document).ready(function(){
setclickable();
});頁面上第一個被執(zhí)行的就是這個setclickable()函數(shù)。它的任務就是做以下內(nèi)容：

查找包含id為“editinplace”的div元素，然后告訴jquery在這些div被點擊時執(zhí)行某些操作。

function setclickable() {
$('#editinplace').click(function() {讀取div內(nèi)部的html代碼的任務將交給jquery的html()函數(shù)來完成。這些html將會額外添加若干代碼以組成textarea里的保存和取消按鈕。

"var textarea = '

';
var revert = $(this).html();同樣還是這些在div內(nèi)部找到的html代碼將會賦值給一個叫做“revert”的變量。這個變量將用來在取消按鈕被按下的事件中輸出原始文本。

var revert = $(this).html();jquery的dom函數(shù)“after”用來將新生的textarea html代碼放置在我們指定的div元素后。我在后面緊跟著連鎖上了一個remove()方法 來移除div元素以節(jié)省代碼。

$(this).after(textarea+button).remove();在使用jquery的時候，我通過對象名來定位保存和取消按鈕對象。我指示jquery在任一按鈕按下時觸發(fā)最后一個函數(shù)“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函數(shù)“savechanges”將以按鈕對象做為第一個參數(shù)，而cancel參數(shù)則取兩種值，false或者保存在revert變量中的html代碼內(nèi)容。

function savechanges(obj, cancel) {如果cancel為假，則函數(shù)將保存更改并使用html格式發(fā)送給服務器端的php腳本。我在這里使用了jquery內(nèi)置的一個dom函數(shù)實現(xiàn)對textarea內(nèi)容的提取操作：parent()和siblings()。

if(!cancel) {
var t = $(obj).parent().siblings(0).val();dom基礎超出了本系列教程的范圍，但在這個應用中我只是告訴了jquery“對象（保存按鈕）有一個父元素（div）。。。去找到它。那個元素擁有一個或多個dom樹同級對象。。。我只想找到其中的第一個。然后提取那個對象的所有內(nèi)容?！?/p>

（稍等。。。如果你對dom風格的代碼不是很熟悉的話，前面我的注釋可能并不好理解。我還是建議你之前google一下“dom javascript”或者其他相關的信息。）

這些html賦值給了t變量，現(xiàn)在要通過post方法把它發(fā)送給test2.php。

$.post("test2.php",{
content: t
},function(txt){
alert( txt);
});
}如果cancel有一個值，那么必然是保存在revert變量中的原始html內(nèi)容。所以，在這個時候我希望變量t變?yōu)樵糷tml內(nèi)容。

else {
var t = cancel;
}下一步是通過jquery提供的dom函數(shù)放置一個新的div元素，id為“editinplace”，在這之后包含了textarea元素。。。然后刪除掉這個div元素。

$(obj).parent().parent().after('

').remove()在果殼中，這將告訴jquery“在dom樹中上躍兩次。將html代碼附在到達位置的對象之后，然后移除那個對象?！?/p>

最后，我們再次調(diào)用setclickable函數(shù)并關閉savechange()函數(shù)。重調(diào)setclickable()函數(shù)的含義是重新設置onmouseover,onmouseout,和onclick事件到初始狀態(tài)。

setclickable();
}第二個示例

第二個方法非常類似但也有點復雜。

示例二

沒有用到龐大的單獨div元素，這個示例將每個段落p標簽變換成單獨的可編輯區(qū)域。

這里的難度在于你如何在向服務器端腳本發(fā)送數(shù)據(jù)時指定正確的段落p標簽。

在這里我通過為每個p標簽編號并將這個編號一同發(fā)送給服務器端的php腳本的方式解決了問題。你會在alert窗口中看到php腳本是如何“知道”哪個p標簽里的內(nèi)容被修改的。

已知的問題

現(xiàn)實的應用中，你在使用類似的功能時首先需要驗證更改的內(nèi)容的合法性，然后才能將數(shù)據(jù)發(fā)送到服務器端。顯然在這里我們刻意把這些內(nèi)容忽略掉了。

本文來自csdn博客，轉(zhuǎn)載請標明出處：http://blog.csdn.net/gohands/archive/2008/01/18/2050594.aspx