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