- 12月 14 週日 200817:52
在 PHP 中養成 7 個面向對象的好習慣 (下)
- 12月 14 週日 200817:46
在 PHP 中養成 7 個面向對象的好習慣 (上)
如果您尚未打算用 OO 原則創建應用程序，則使用 PHP 的面向對象（OO）的語言特性，這 7 個習慣將幫助您開始在過程編程與 OO 編程之間進行轉換。
- 11月 27 週四 200823:41
XML的jQuery處理補遺
解決在 IE 下無法將 HTML/XML 轉成 jQuery 物件的問題 。當傳回的內容是XML，若未將HttpRequest的dataType設為"xml"，最後在處理XML時，會發生在Firefox上可行但在IE不成功的結果。
- 11月 15 週六 200823:59
[jQuery]是什麼? 可以吃嗎?
- 11月 15 週六 200823:47
[jQuery]你可能沒用過的Javascript小技巧
使用Javascript撰寫Client-Side程式也好些年了，卻從來沒對Javascript這個語言下過苦工，一直抱持用到哪學到哪的精神。在接觸jQuery之後，見識到不少以前沒用過的神奇寫法，一開始還真花了點時間才搞懂，在此做個簡單的分享:
陣列表示法
宣告已知元素的陣列，可以不必動用到new Array()，寫成var ary = ["1", "2", "3"];就好了，一口氣把宣告跟內容指定都搞定。
這跟C# 3.0裡的Implicit Typed Array是不是有異曲同工之妙?
抄襲? 我倒不會這麼解讀，程式語言在發展過程中，本來就該融入其他語言犀利之處、偷習他派武功的精華，從Developer的使用者角度，誰在乎意識形態搞什麼漢賊不兩立? 貫徹"Developer之所欲，常在我心"，才是王道!
- 11月 15 週六 200816:30
[javascript] 把css 與 javascript load 近來的function()
[javascript] 把css 與 javascript load 近來的function()
function loadJS(url){
var retJS = document.createElement('script');
retJS.setAttribute("language","JavaScript");
retJS.setAttribute("src", url);
document.getElementsByTagName("body").item(0).appendChild(retJS);
}
function loadCSS(url){
var retCSS = document.createElement('link');
retCSS.setAttribute("rel","stylesheet");
retCSS.setAttribute("type","text/css");
retCSS.setAttribute("href",url);
document.getElementsByTagName("head")[0].appendChild(retCSS);
}
- 11月 01 週六 200822:21
PDO (PHP Data Object) 簡易教學
PDO (PHP Data Object)
PDO(PHP Data Object)
是PHP 5新出來的東西，在PHP 6都要出來的時候，PHP
6只默認使用PDO來處理數據庫，將把所有的數據庫擴展移到了PECL，那麼默認就是沒有了我們喜愛的php_mysql.dll之類的了，那怎麼辦捏，
我們只有與時俱進了，我就小試了一把PDO。（本文只是入門級的，高手可以略過，呵呵）
- 10月 30 週四 200800:35
寫給設計人的10個jQuery特效
jQuery已經不是什麼新鮮的事兒，記得第一次聽說是在catch the digital flow上。總把它認為是非常難的東西，也就沒有認真去瞭解他了。直到學完CSS的大部分內容，才開始接觸這種"write less, do more" 的Javascrīpt框架。今天，這篇文章的最重要內容是來自Web Designer Wall的一篇教程，一篇包含了10個jQuery特效的教程。這裡不打算全文翻譯，想以自己的語言來表達，或許這樣更方便大家理解/自己以後學習，也可能更準確地描述。
提示：教程中所用的 jQuery 版本為1.2.3。這篇文章是為jQuery新手而寫的。
先試試看？ View jQuery Demos ｜ Download Demo ZIP
jQuery是如何工作的?
首先，你需要下載一個jQuery版本，並將它插入到
<head>標籤內。然後，你將需要寫函數來告訴jQuery做些什麼，下面的這個圖表將告訴你jQuery是怎樣工作的（點擊圖片，查看大圖）：
！如何獲取元素（Get the element）?
書寫 jQuery 函數是一個非常簡單的事（多虧了精彩的說明書）。關鍵是你要學習如何獲取你想要實現的效果的確切元素。
$("#header") = 獲取 id="header" 的元素$("h3") = 獲取所有<h3>$("div#content .photo") = 獲取<div id="content">裡所有用class="photo"定義的元素$("ul li") = 獲取所以 <ul> 中 <li> 的元素$("ul li:first") = 只獲取<ul>中第一個<li>1. 簡單的下拉麵板
讓我們來開始這個簡單的下拉麵板特效吧(view demo)，或許你已經見過很多次，現在，自己試試吧：
當包含class="btn-slide"的元素被點擊，它會下拉/上提<div id="panel">裡的元素。然後切換到CSS中的class="active"到<a class="btn-slide">元素。.active 將會以CSS的方式打開/關閉出面板。
$(document).ready(function(){
$(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); });
});2. 簡單的隱藏效果
如圖，當右上角的上圖標被點擊時，內容被隱藏。效果可以看Demo (view demo)
當被定義為 <img class="delete"> 的圖片被點擊，它會手找到父級元素 <div class="pane"> 並激活它的能力，慢慢消失，隱藏起來。
$(document).ready(function(){
$(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: "hide" }, "slow"); });
});3 連續過渡效果
讓我們來看看jQuery連貫性的威力吧。只需要幾行代碼，我能讓這個方塊漸變+縮放比例地飛來飛去(view demo)
Line 1: 當 <a class="run"> 被點擊
Line 2: 激活 <div id="box"> 的不透明度（opacity）=0.1，直到值達到400px，速度達到1200px/ms
Line 3: 當opacity=0.4, top=160px,height=20,width=20,以"slow"顯示
Line 4: 當opacity=1, left=0, height=100, width=100,也以"slow"顯示
Line 5: 當opacity=1, left=0, height=100, width=100, 也以"slow"顯示
Line 6: 當top=0, 以"fast"顯示
Line 7: 然後，以常速上滑 (default speed = "normal")
Line 8: 然後以"slow"下滑
Line 9:返回失效會阻止瀏覽器跳向鏈接錨點
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false;
});
});4a. 可摺疊的模式 #1
這是第一個可摺疊的樣式， (view demo)
第一行將向<div class="accordion"> 內的第一個<H3> 添加一個CSS class為"active"的值。 第二行剛是隱藏<div class="accordion">內非第一個< p >的內容。
當 <h3> 被點擊時，當前<p>下拉，而原先下拉的<p> 上提。
$(document).ready(function(){
$(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active");
});
});4b. 可摺疊模式 #2
這個實例與#1非常類似，不過，它會讓指定的面板像默認面板一樣打開(view demo)
在CSS樣式表中，設置
.accordion p 為 display:none。現在，如果你像默認打開的樣式一樣，打開第三個面板，你可以寫$(".accordion2 p").eq(2).show(); (eq = equal)來實現它，需要注意的是起始點是"0"，而不是"1"，所以，第三個相應的是"2"，而不是"3"。$(document).ready(function(){
$(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show();
$(".accordion2 h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); });
});5a. 鼠標經過激活效果 #1
這個將會實現一個非常漂亮的，當鼠標經過時出現漸變出現的效果 (view demo)
當鼠標經過菜單時，它會尋找緊接著的<em>，並在上方激活它的不透明度。
$(document).ready(function(){
$(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); });
});5b. 鼠標經過激活 #2
這個實例會顯示菜單中鏈接的
title 屬性attribute，讓其以變數方式存在，並添加<em>標籤 (view demo)
第一行會添加一個空的
<em>到菜單的<a>元素。當鼠標經過菜單鏈接時，它會顯示title的屬性，讓它以"hoverText（隱藏）"的形式顯示，並使
<em>中的文字顯示隱藏文本的值。$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); });
});6. 整塊可點擊性效果
這個實例將會教你如何實現內容中元素可點擊性效果，Best Web Gallery的側邊欄Tab就顯示這樣的效果 (view demo)
如果你想讓class="pane-list"的<ul>內的
<li> 可點擊(整塊)，你可以向 ".pane-list li"指派一個函數，使它被點擊時，函數找到 <a>元素，重定向到它的href屬性值。$(document).ready(function(){
$(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href"); return false; });
});7. 可收縮面板
讓我們組合一下上面的實例，創造一給可收縮的面板（像Gmai收件箱面板l）。作者還在Web Designer Wall 的評論列表Next2Friends裡應用這個(view demo)
First line: 隱藏<div class="message_body">裡第一個元素以後的元素
Second line: 隱藏所有第5個<li>後面的元素
Third part: 當<p class="message_head">被點擊裡，顯示/隱藏<div class="message_body">
Fourth part: 當<a class="collpase_all_message"> 被點擊時，上提所有<div class="message_body">的元素
Fifth part: 當<a class="show_all_message"> 被點擊，隱藏它，並顯示<a class="show_recent_only">，並下拉第5個<li>以後的元素
Sixth part: 當<a class="show_recent_only"> 被點擊時，隱藏它，並顯示<a class="show_all_message">，並上提第5個 <li>以後的元素
$(document).ready(function(){
//hide message_body after the first one $(".message_list .message_body:gt(0)").hide();
//hide message li after the 5th $(".message_list li:gt(4)").hide();
//toggle message_body $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) return false; });
//collapse all messages $(".collpase_all_message").click(function(){ $(".message_body").slideUp(500) return false; });
//show all messages $(".show_all_message").click(function(){ $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slideDown() return false; });
//show recent messages only $(".show_recent_only").click(function(){ $(this).hide() $(".show_all_message").show() $(".message_list li:gt(4)").slideUp() return false; });
});8. 模仿WordPress後台評論管理面板
我想你可能見過最多次這個效果是在Wordpress後台的評論管理面板。那好，讓我們來用jQuery來模仿它的效果。為了實現背景顏色，你需要包含Color Animations這個插件(view demo)
First line: 向<div class="pane"> 添加 "alt" class
Second part: 當<a class="btn-delete">被點擊，激活<div class="pane">的不透明度
Third part: 當<a class="btn-unapprove">被點擊， 首先讓<div class="pane">顯示黃色，然後變為白色，並添加類（addClass）"spam"
Fourth part: 當<a class="btn-approve">被點擊，首先讓<div class="pane">顯示綠色，然後變為白色，並移除類（removeClass）"spam"
Fifth part: 當<a class="btn-spam">被點擊，激活背景色為red並使其opacity ="hide"
//don't forget to include the Color Animations plugin//<script type="text/javascript" src="jquery.color.js"></script>
$(document).ready(function(){
$(".pane:even").addClass("alt");
$(".pane .btn-delete").click(function(){ alert("This comment will be deleted!");
$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; });
$(".pane .btn-unapprove").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast") .animate({ backgroundColor: "#ffffff" }, "slow") .addClass("spam") return false; });
$(".pane .btn-approve").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast") .animate({ backgroundColor: "#ffffff" }, "slow") .removeClass("spam") return false; });
$(".pane .btn-spam").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; });
});9. 輪換圖片展欄
如果你有一個項目需要顯示多個圖片，並且你不希望鏈向另一個頁面，那麼你可以在當前面加載目標鏈接的JPG(view demo)
首先，添加一個<em>到H2標籤。
當<p class=thumbs>內的元素被點擊：
- 以可視的形式顯示
href屬性的"largePath"路徑 - 以可視的形式顯示
title 屬性的"largeAlt" - 代換<img id="largeImg">的
scr屬性內可視的"largePath"路徑，並代換alt屬性內可視的"largeAlt" - 設置
em內的內容(h2內) 為可視的largeAlt$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){
var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html(" (" + largeAlt + ")"); return false; });
});10. 個性化不同的鏈接樣式
在現代化的瀏覽器中，個性化不同的鏈接是非常容易的事，比如想讓.pdf文件顯示特殊的樣式，你只需要添加上簡單的CSS規則：
a[href $='.pdf'] { … }就可以實現，但不幸的是IE6並不支持這個。如果想實現這個，你可以利用jQuery (view demo)
前三行代碼必需是連續的，它只是一個
<a>的href屬性中的一個CSS class。第二部分將會獲取所有href中沒有"http://www.webdesignerwall.com" 和/或沒有"#"的< a>元素，並添加"external" class和target= "_blank"。
$(document).ready(function(){
$("a[@href$=pdf]").addClass("pdf");
$("a[@href$=zip]").addClass("zip");
$("a[@href$=psd]").addClass("psd");
$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]") .addClass("external") .attr({ target: "_blank" });
});- 10月 24 週五 200800:34
15天學會jQuery (11-15)
- 10月 18 週六 200802:29
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);
}
其他這裡沒有提到的部分是你將在後面看到的創建和讀取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更加複雜冗長。
15 Days of jQuery(Day 8) --- 使用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()
});
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();
});
頁面上第一個被執行的就是這個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標籤裡的內容被修改的。
已知的問題
現實的應用中，你在使用類似的功能時首先需要驗證更改的內容的合法性，然後才能將數據發送到服務器端。顯然在這裡我們刻意把這些內容忽略掉了。
這次的教程內容貼近我擅長的技術方向：安全的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);
}
其他這裡沒有提到的部分是你將在後面看到的創建和讀取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更加複雜冗長。
15 Days of jQuery(Day 8) --- 使用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()
});
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();
});
頁面上第一個被執行的就是這個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標籤裡的內容被修改的。
已知的問題
現實的應用中，你在使用類似的功能時首先需要驗證更改的內容的合法性，然後才能將數據發送到服務器端。顯然在這裡我們刻意把這些內容忽略掉了。