解決在 IE 下無法將 HTML/XML 轉成 jQuery 物件的問題 。當傳回的內容是XML，若未將HttpRequest的dataType設為"xml"，最後在處理XML時，會發生在Firefox上可行但在IE不成功的結果。
- 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之所欲，常在我心"，才是王道!
- 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標籤裡的內容被修改的。
已知的問題
現實的應用中，你在使用類似的功能時首先需要驗證更改的內容的合法性，然後才能將數據發送到服務器端。顯然在這裡我們刻意把這些內容忽略掉了。
- 10月 14 週二 200800:48
15天學會jQuery (1-5天)
15 Days of jQuery(Day 0)---JQuery - What, Why, When, Where, Who
what
jQuery是一個了不起的javascript庫，它可以是我們用很少的幾句代碼就可以創建出漂亮的頁面效果。從網站的方面說，這使得javascript更加有趣。
如果你這樣想：「孩子，我需要另外一個javascript庫，就好比我I need another hole in my head」那麼加入這個俱樂部吧。這正是我第一次遇到的時候所想的。
我已經用過了Moo.fx, Scriptaculous, TW-SACK, 和 Prototype. 我曾參與了RICO, Yahoo YUI和其他一些庫的開發。
沒有了PHPjavascript和我一點也不親近了。但是我還是盡全力保持頭腦清醒，並儘量保持用AJAX去思考。
所以當我遇到jQuery的時候我想:「還需要另外一個javascript庫嗎?不了,謝謝…」
why
為什麼我改變我我對jQuery的看法，以及為什麼你要考慮去使用它? 很簡單,只要你看一眼過使用jQuery的頁面你就會發現它是如此的簡單易用.只用很少的幾行,就能表現出很優雅的效果. 有一天當我突然看到一些用jQuery寫的代碼時我一下子豁然開朗了. 早茶的過程中,我例行公務的去翻閱我的訂閱,去看每日必看的設計博客的時候我看到了一個用jQuery寫的javascript的例子.事實證明,這些代 碼還是有些和瀏覽器關聯的bug,不過這些概念還是我以前從來沒有見過的.
還有那些代碼…
代碼看起來很簡單看起來不像我以前見過的.但也不無道理.
我開始通讀文檔,並且驚奇的發現用一點點代碼竟然能做這麼多事情.
when
你應當在你需要的時候使用jQuery.
給你一個小型的庫文件 DOM強大的控制能力 不費吹灰之力的工作,和少許的努力.
或者
快速的通過AJAX 沒有大量無用的代碼 和一些基本的動畫效果
但是
如果你需要超級花式效果,動畫,拖放,和超級平穩動畫,那麼你可能想使用Prototype.他是一個有大量動畫效果的類庫.
where
你可以jQuery的官方網站下載到他的源代碼(10K).
who
jQuery was created by John Resig.
15 Days of jQuery(Day 1)---比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 type="text/css">
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");})
在jQuery中，執行完mouseover或者mouseout等方法之後，都會返回當前的對象，所以可以進行鏈式操作
*
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(Day 4)---安全郵件列表
規則提到如何防止垃圾郵件:不要把你的郵件地址放到任何一個mailto:鏈接中. 在與垃圾郵件惡魔做鬥爭的過程中我們的網頁設計師和程序員總結出了一些有創意的解決辦法,讓我們快速的看一些這些常見方法的缺點(或多或少有一些).
name [at-no-spam] website.com
問題:鏈接式的更方便,而且把郵件地址敲入收件人欄還有可能會出錯.
聯繫方式
問題:你冒著這麼大的風險就是因為有一個垃圾郵件借用你的帳戶發送大量的垃圾郵件(除非你使用真正的安全郵件腳本).而這樣就扼殺了那些只想給你發個簡單郵件的用戶.
javascript加密
問題:你的郵件仍然暴露在光天化日之下,即使你使用了複雜的密碼技術給它帶上面具.還有誰希望為了發送一封郵件而啟用第三方的解密網站,反正我是不會.
藏在一種簡單的形式後面 (有一個例子,但是打不開了.)http://simon.incutio.com/contact/我能想到的沒有人…但是讓我們看看是否我們能改進觀念。
可能的解決辦法:AJAX
我提供的解決方案將比目前設計師們使用的方法有如下優勢:
易於實施
易於修改
還有一些小小的花哨的效果
不用第三方工具來加密郵件地址
沒有郵件地址暴露在光天化日之下
最後我想說明一點,我認為電子郵件靠這種閃爍其詞的加密手段來躲避垃圾郵件還是非常不明智的.在實踐中,我認為電子郵件加密是相對安全的,但是客觀事實是,電子郵件還是在html原代碼裡.
概念
1.用jQuery從服務器上把html文件內容抓下來.
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
wrap(String html)
把所有匹配的元素用其他元素的結構化標記包裝起來。這種包裝對於在文檔中插入額外的結構化標記最有用，而且它不會破壞原始文檔的語義品質。
這個函數的原理是檢查提供的第一個元素（它是由所提供的HTML標記代碼動態生成的），並在它的代碼結構中找到最上層的祖先元素－－這個祖先元素就是包裝元素。
當HTML標記代碼中的元素包含文本時無法使用這個函數。因此，如果要添加文本應該在包裝完成之後再行添加。
示例:
$("p").wrap("<div class='wrap'></div>");
HTML
<p>Test Paragraph.</p>
結果
<div class='wrap'><p>Test Paragraph.</p></div>
1