15天學會jQuery (0-5)
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
[p]jquery是一個了不起的javascript庫，它可以是我們用很少的幾句代碼就可以創建出漂亮的頁面效果。從網站的方面說，這使得javascript更加有趣。[/p]
[p]如果你這樣想：“孩子，我需要另外一個javascript庫，就好比我i need another hole in my head”那么加入這個俱樂部吧。這正是我第一次遇到的時候所想的。[/p]
[p]我已經用過了moo.fx, scriptaculous, tw-sack, 和 prototype. 我曾參與了rico, yahoo yui和其他一些庫的開發。[/p]
[p]沒有了phpjavascript和我一點也不親近了。但是我還是盡全力保持頭腦清醒，并盡量保持用ajax去思考。[/p]
[p]所以當我遇到jquery的時候我想:“還需要另外一個javascript庫嗎?不了,謝謝…”[/p]
[p]why[/p]
[p]為什么我改變我我對jquery的看法，以及為什么你要考慮去使用它? 很簡單,只要你看一眼過使用jquery的頁面你就會發現它是如此的簡單易用.只用很少的幾行,就能表現出很優雅的效果. 有一天當我突然看到一些用jquery寫的代碼時我一下子豁然開朗了. 早茶的過程中,我例行公務的去翻閱我的訂閱,去看每日必看的設計博客的時候我看到了一個用jquery寫的javascript的例子.事實證明,這些代碼還是有些和瀏覽器關聯的bug,不過這些概念還是我以前從來沒有見過的.[/p]
[p]還有那些代碼…[/p]
[p]代碼看起來很簡單看起來不像我以前見過的.但也不無道理.[/p]
[p]我開始通讀文檔,并且驚奇的發現用一點點代碼竟然能做這么多事情.[/p]
[p]when[/p]
[p]你應當在你需要的時候使用jquery.[/p]
[p]給你一個小型的庫文件 dom強大的控制能力 不費吹灰之力的工作,和少許的努力.[/p]
[p]或者[/p]
[p]快速的通過ajax 沒有大量無用的代碼 和一些基本的動畫效果[/p]
[p]但是[/p]
[p]如果你需要超級花式效果,動畫,拖放,和超級平穩動畫,那么你可能想使用prototype.他是一個有大量動畫效果的類庫.[/p]
[p]where[/p]
[p]你可以jquery的官方網站下載到他的源代碼(10k).[/p]
[p]who[/p]
[p]jquery was created by john resig.[/p]
[p][br]--------------------------------------------------------------------------------[/p]
[p][hilitecolor=#808080][color=#ffffff]15 days of jquery(day 1)---比window.onload更快一些的載入[/color][/hilitecolor][/p]
[p][br]window.onload()是傳統javascript里一個能吃苦耐勞的家伙。它長久以來一直被程序員們作為盡快解決客戶端頁面載入問題的捷徑。[/p]
[p]但有時候等待頁面載入還是不夠快。[/p]
[p]只有少數大型的圖片文件會被快速的載入，而大部分大型的圖片文件會使window.onload()載入的很慢。所以當我為最近的網絡營銷創建一個web應用程序的時候我不得希望更快一點。有一些圍繞window.onload()的新研究(比如brother cake)的代碼是一種快速的方式。如果你需要，可以試試。[/p]
[p]但是如果你要做一些dom(文檔對象模型)javascript的編程，那么你為什么不試試jquery，它就像你自己親自制作一個蛋糕，并品嘗它。（雙關brother cake，俏皮話）。[/p]
[p]jquery有一個用來作為dom快速載入javascript的得心應手的小函數，那就是ready… 他在頁面加載完成之前執行。[/p]
[p]$(document).ready(function(){[br]// your code here...[br]});你可以用他來載入任何你想要載入的javascript，并不一定要保留jquery的編碼風格。讓jquery同時去執行多個函數也是可以的。[/p]
[p]你以前可能見過類似于init()之類的函數，你會發現jquery會快很多。[/p]
[p]在以后的教程里我們會一遍又一遍的用到這個函數。[/p]
[p]ok你現在可以嘗試一下代碼：(記得把jquery引用進你的頁面哦，不記得的話看看上篇。)[/p]
[p]$(document).ready(function(){[br]alert("congratluations!");[br]});很easy，不是嗎？ 用幾分鐘時間做的雙色表格。[/p]
[p][br]--------------------------------------------------------------------------------[/p]
[p][color=#ffffff][hilitecolor=#808080]15 days of jquery(day 2)---很容易的制作雙色表格 [/hilitecolor][/color][br]這節本身沒有太多的價值，重點在它提供的這個例子上。我將代碼帖出來然后對重點部分注釋一下：我們先來看看thewatchmakerproject傳統的做法：預覽地址(你可以查看一下源代碼)。再來看看jquery是如何用5行代碼來搞定的:[/p]
[p][br][br][br][br]
ps: 飄飄說我的table沒有,我知錯了...[br][br]預覽地址[/p]
[p]這里有一個jquery的技巧不得不提一下：jquery的鏈式操作，什么是鏈式操作呢？ 我們來看看，本來應該寫成這樣子的：[/p]
[p]$(".stripe tr").mouseover(function(){ [br] $(this).addclass("over");}) [br]$(".stripe tr").mouseout(function(){ [br] $(this).removeclass("over"); })但是我們寫成了：[/p]
[p]$(".stripe tr").mouseover(function(){ [br] $(this).addclass("over");}).mouseout(function(){ [br] $(this).removeclass("over");})因為鼠標移入移除都是發生在同一個對象上的，所以我們可以將發生在同一個對象上的動作連起來寫，這樣子如果有很多對象并且在他們身上發生了很多動作那么就會節省很多代碼。（我暫時是這樣理解的，也不知道對不對希望高手能夠斧正。）[/p]
[p][br]--------------------------------------------------------------------------------[/p]
[p][hilitecolor=#808080][color=#ffffff]15 days of jquery(day 3)---巧妙的偽裝鏈接[/color][/hilitecolor][/p]
[p][br]今天的教程是草草完成的.我想把一些東西放在這15天的前面簡單的講講,這樣以來就可以使一些js新手不至于被一堆代碼搞的暈頭轉向.事實上我是在即將結尾的時候才做出的這個決定.[/p]
[p]目標[/p]
[p]我們要使用jquery去創建一小段代碼,這段代碼會把一個頁面所有的超鏈接轉換并且偽裝起來.[/p]
[p]為什么?[/p]
[p]一些下屬經銷商認為，一部分用戶有足夠的悟性發現會員鏈接，并能盡量避免通過點擊url鏈接直接進入瀏覽器，從而“欺騙”下屬經銷商脫離代理（假設購買行為已經發生）[/p]
[p]“老”辦法[/p]
[p]有很多下屬經銷商千方百計的掩飾他們的鏈接,避免人們通過鏈接找到他們.這些伎倆涉及到.htaccess和服務器端的代碼. 但對于本教程,我會將重點放到”老學校”的javascript上:[/p]
[p]http://merchant-url-here.com[br]return true;' onmouseout='window.status="done"; return true;'[br]>link text here這段代碼被用來在瀏覽器狀態欄顯示用戶鼠標指向的鏈接地址.比如實際鏈接是[url=http://website.com?aff=123]website.com?aff=123[/url],則可以在狀態欄顯示[url=http://website.com]website.com[/url].[/p]
[p]問題[/p]
[p]你是一個很活躍的下級經銷商,你可能會以瘋狂的速度給很多個頁面添加鏈接.并且還要給每個鏈接添加這種效果那么你肯定會厭倦的.加入有一天你要修改任務欄里顯示的鏈接的時候估計你會瘋掉的.[/p]
[p]jquery的解決辦法[/p]
[p]首先,我們想讓javascript盡快的掩飾我們的鏈接所以我們應該先從這里開始:[/p]
[p][br]當dom準備好的時候我們放在ready里的代碼就開始執行了.[/p]
[p]接下來[/p]
[p]要給所有我們想偽裝的鏈接添加一個class,class有助于jquery幫我們找到需要偽裝的鏈接而撇開其它不需要偽裝的鏈接.title有兩個作用:當鼠標劃過鏈接的時候會有一個小小的盒狀提示顯示url:affsite.com并且同樣的信息會顯示在瀏覽器的狀態欄(ie only).[/p]
[p]告訴jquery找到有class=“afflink”的鏈接[/p]
[p]$('a.afflink')添加一個鼠標劃過事件[/p]
[p]$('a.afflink').mouseover(function(){window.status=this.title;return true;})簡單的說:找到class=“afflink”的所有鏈接,當鼠標劃過它們的時候改變瀏覽器狀態欄信息為該鏈接title的內容.這個在firefox并不能正常的工作,只是在ie里起作用.在firefox的狀態欄只是顯示一個”done”,或者更準確的說,鼠標劃過超鏈接對狀態欄并沒有任何影響.我沒有更多的瀏覽器測試.[/p]
[p]繼續-mouseout jquery可以讓我們用”鏈”的方式,像這樣:[/p]
[p]$('a.afflink').mouseover(function(){window.status=this.title;return true;})[br].mouseout(function(){window.status='done';return true;});這點代碼告訴jquery改變瀏覽器狀態欄信息,或者當鼠標不再停留在鏈接上時返回”done”. 如果你不適應jquery的這種鏈的工作方式,那么你完全可以這樣寫:[/p]
[p]$('a.afflink').mouseover(function(){window.status=this.title;return true;});[br]$('a.afflink').mouseout(function(){window.status='done';return true;});這就看你了.[/p]
[p]把這些代碼放到一起:[/p]
[p][br]最后的想法 你們當中可能覺得今天的課程太簡單了,有些還可能還是有點不太明白,因為你們不是二級經銷商.[/p]
[p]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.[/p]
[p][br]--------------------------------------------------------------------------------[/p]
[p][hilitecolor=#808080][color=#ffffff]15 days of jquery(day 4)---安全郵件列表[/color][/hilitecolor][/p]
[p][br]規則提到如何防止垃圾郵件:不要把你的郵件地址放到任何一個mailto:鏈接中. 在與垃圾郵件惡魔做斗爭的過程中我們的網頁設計師和程序員總結出了一些有創意的解決辦法,讓我們快速的看一些這些常見方法的缺點(或多或少有一些).[/p]
[p]name [at-no-spam] website.com[/p]
[p]問題:鏈接式的更方便,而且把郵件地址敲入收件人欄還有可能會出錯.[/p]
[p]聯系方式[/p]
[p]問題:你冒著這么大的風險就是因為有一個垃圾郵件借用你的帳戶發送大量的垃圾郵件(除非你使用真正的安全郵件腳本).而這樣就扼殺了那些只想給你發個簡單郵件的用戶.[/p]
[p]javascript加密[/p]
[p]問題:你的郵件仍然暴露在光天化日之下,即使你使用了復雜的密碼技術給它帶上面具.還有誰希望為了發送一封郵件而啟用第三方的解密網站,反正我是不會.[/p]
[p]藏在一種簡單的形式后面 (有一個例子,但是打不開了.)http://simon.incutio.com/contact/我能想到的沒有人…但是讓我們看看是否我們能改進觀念。[/p]
[p]可能的解決辦法:ajax[/p]
[p]我提供的解決方案將比目前設計師們使用的方法有如下優勢:[/p]
[p]易于實施[br]易于修改[br]還有一些小小的花哨的效果[br]不用第三方工具來加密郵件地址[br]沒有郵件地址暴露在光天化日之下[br]最后我想說明一點,我認為電子郵件靠這種閃爍其詞的加密手段來躲避垃圾郵件還是非常不明智的.在實踐中,我認為電子郵件加密是相對安全的,但是客觀事實是,電子郵件還是在html原代碼里.[/p]
[p]概念[/p]
[p]1.用jquery從服務器上把html文件內容抓下來.[br]2.把包含郵件鏈接的html文件放到好的容器中是一種簡單的保護機制.[br]示例[/p]
[p]我要示范一些例子來顯示郵件鏈接地址,當訪客點擊一個按鈕或者一個鏈接的時候,頁面就會跳轉到對應的那個例子里.[/p]
[p]按鈕點擊--立即顯示[/p]
[p]鏈接點擊--淡出[/p]
[p]頁面載入--淡出[/p]
[p]頁面載入--立即顯示[/p]
[p](說明:所謂的立即顯示,我的意思是說”沒有花哨的效果而盡快的顯示電子郵件地址”)[/p]
[p]代碼[/p]
[p]這里發表非商業共創使用許可,如果你希望將代碼使用在你的商業產品中時,請聯系我.我正在一個新的cms for web designers中使用它.[/p]
[p]為什么這種方式比普通的mailto鏈接安全?[/p]
[p]真正的問題是垃圾郵件制造者會使用自動化軟件從html源文件中尋找電子郵件鏈接,這種做法和google一樣:使用相關鏈接. 他么就和我們大部分人一樣懶惰.所以很難所他們不會拿個本子放在鍵盤旁邊記下你的電子郵件地址. 請查看我提供的示例的源代碼,你將不會在html里找到任何的郵件地址. 這幾堅實的保證了你絕對不會收到垃圾郵件,只會從朋友或者瀏覽者那里收到郵件. 但是從頁面中移除郵件地址,…………………[/p]
[p]最后一點說明[/p]
[p]先仔細看看前面三個例子,你會看到我使用了ajax回調函數來觸發slidedown() 和 show() 效果. 換句話說,我希望ajax調用收到信息(html)時jquery才開始slidedown() 效果.把秘密粘貼到我們簡單的服務段腳本并且等待服務器返回信息.[/p]
[p]正確的方法:[/p]
[p]$(document).ready(function(){[br]$.post('mailtoinfo.php',{[br] pass: "secret"[br]},function(txt){[br] $('div.email').html(txt);[br] $('div.email').slidedown("slow");[br]});[br]});錯誤的方法:[/p]
[p]$(document).ready(function(){[br]$.post('mailtoinfo.php',{[br] pass: "secret"[br]},function(txt){[br] $('div.email').html(txt);[br]});[br]$('div.email').slidedown("slow");[br]});[br]--------------------------------------------------------------------------------[/p]
[p][color=#ffffff][hilitecolor=#808080]15 days of jquery(day 5)---包起來--懶人用jquery生成的html[/hilitecolor][/color][br]這個讓我們輕松的紀念日已經到來–我恨我在計算機前已經花了48個小時，我希望能夠有另外一個jquery來結束我的噩夢，并且讓我上網更快。[/p]
[p]當我一邊“在用jquery方法編寫”和一邊“進行復雜的文件上傳”，我已經筋疲力盡。然而這兩種操作的代碼是一種較淺的，它只不過是你才剛剛開始解決的一些簡單問題。[/p]
[p]所以下來我開始介紹：[/p]
[p]盡管我在我的網站用所有的css樣式表去進行表格設計（也許這要花費兩年半的時間或者更多），我已經用了很多我能找到的在這方面的信息。回到2004年5月(古代史)a list a part有一篇《關于創建陰影的偉大教程(洋蔥皮投影)》可以應用到任何圖片,無論尺寸多大.[/p]
[p]那片文章的應經不能再評論了,但還是有些人希望能夠再出篇教程.[/p]
[p]問題[/p]
[p]一些css工程師用一些”不相干”的標記,就是為了使背景圖片能夠應用到每一個元素上.例如:[/p]
[p]這里是a list a part用到的代碼:[/p]
[p] and now, the jquery method, which uses javascript to wrap the image at runtime: view the source of this page and you'll see the huge difference in markup! |
400 186 1886
[br]
[br]