what jQuery是一個了不起的.庫，它可以是我們用很少的幾句代碼就可以建立出漂亮的頁面效果。從網站的方面說，這使得.更加有趣。 如果你這樣想：“孩子，我需要另外一個.庫，就好比我I need another hole in my head”那麼加入這個俱樂部吧。這正是我第一次遇到的時候所想的。 我已經用過了Moo.fx, .aculous, TW-SACK, 和 Prototype. 我曾參與了RICO, Yahoo YUI和其他一些庫的開發。 沒有了PHP.和我一點也不親近了。但是我還是盡全力保持頭腦清醒，并盡量保持用AJAX去思考。 是以當我遇到jQuery的時候我想:“還需要另外一個.庫嗎?不了,謝謝…” why 為什麼我改變我我對jQuery的看法，以及為什麼你要考慮去使用它? 很簡單,隻要你看一眼過使用jQuery的頁面你就會發現它是如此的簡單易用.隻用很少的幾行,就能表現出很優雅的效果. 有一天當我突然看到一些用jQuery寫的代碼時我一下子豁然開朗了. 早茶的過程中,我例行公務的去翻閱我的訂閱,去看每日必看的設計部落格的時候我看到了一個用jQuery寫的.的例子.事實證明,這些代碼還是有些和浏覽器關聯的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()是傳統.裡一個能吃苦耐勞的家夥。它長久以來一直被程式員們作為盡快解決用戶端頁面載入問題的捷徑。 但有時候等待頁面載入還是不夠快。 隻有少數大型的圖檔檔案會被快速的載入，而大部分大型的圖檔檔案會使window.onload()載入的很慢。是以當我為最近的網絡營銷建立一個web應用程式的時候我不得希望更快一點。有一些圍繞window.onload()的新研究(比如brother cake)的代碼是一種快速的方式。如果你需要，可以試試。 但是如果你要做一些DOM(文檔對象模型).的程式設計，那麼你為什麼不試試jQuery，它就像你自己親自制作一個蛋糕，并品嘗它。（雙關Brother Cake，俏皮話）。 jQuery有一個用來作為DOM快速載入.的得心應手的小函數，那就是ready… 他在頁面加載完成之後執行。 $(document).ready(function(){ // Your code here... }); 你可以用他來載入任何你想要載入的.，并不一定要保留jQuery的編碼風格。讓jQuery同時去執行多個函數也是可以的。 你以前可能見過類似于init()之類的函數，你會發現jQuery會快很多。 在以後的教程裡我們會一遍又一遍的用到這個函數。 OK你現在可以嘗試一下代碼：(記得把jQuery引用進你的頁面哦，不記得的話看看上篇。) $(document).ready(function(){ alert("Congratluations!"); }); 很Easy，不是嗎？ 用幾分鐘時間做的雙色表格。 15 Days of jQuery(Day 2)---很容易的制作雙色表格 這節本身沒有太多的價值，重點在它提供的這個例子上。我将代碼帖出來然後對重點部分注釋一下：我們先來看看Thewatchmakerproject傳統的做法：預覽位址(你可以檢視一下源代碼)。再來看看jQuery是如何用5行代碼來搞定的:
<. src="jquery-latest.pack.js" type="text/.">
<. type="text/."> $(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 });
--用class="stripe"來辨別需要使用該效果的表格-->
| 姓名 | 年齡 | ||
|---|---|---|---|
| 鄧國梁 | 23 | 31540205 | [email protected] |
| 鄧國梁 | 23 | 31540205 | [email protected] |
| 鄧國梁 | 23 | 31540205 | [email protected] |
| 鄧國梁 | 23 | 31540205 | [email protected] |
| 鄧國梁 | 23 | 31540205 | [email protected] |
| 鄧國梁 | 23 | 31540205 | [email protected] |
PS: 飄飄說我的table沒有,我知錯了...
預覽位址 這裡有一個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和伺服器端的代碼. 但對于本教程,我會将重點放到”老學校”的.上: Link Text Here 這段代碼被用來在浏覽器狀态欄顯示使用者滑鼠指向的連結位址.比如實際連結是www.website.com?aff=123,則可以在狀态欄顯示www.website.com. 問題 你是一個很活躍的下級經銷商,你可能會以瘋狂的速度給很多個頁面添加連結.并且還要給每個連結添加這種效果那麼你肯定會厭倦的.加入有一天你要修改工作列裡顯示的連結的時候估計你會瘋掉的. jQuery的解決辦法 首先,我們想讓.盡快的掩飾我們的連結是以我們應該先從這裡開始: <. src="jquery.js"> <. type="text/."> $(document).ready(function(){ //code goes here }); 當DOM準備好的時候我們放在ready裡的代碼就開始執行了. 接下來 要給所有我們想僞裝的連結添加一個class,class有助于jQuery幫我們找到需要僞裝的連結而撇開其它不需要僞裝的連結.title有兩個作用:當滑鼠劃過連結的時候會有一個小小的盒狀提示顯示URL:www.affsite.com并且同樣的資訊會顯示在浏覽器的狀态欄(IE .ly).
Super Duper Product
告訴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;}); 這就看你了. 把這些代碼放到一起: <. src="jquery.js"> <. type="text/."> $(document).ready(function(){ $('a.affLink').mouseover(function(){window.status=this.title;return true;}) .mouseout(function(){window.status='Done';return true;}); }); 最後的想法 你們當中可能覺得今天的課程太簡單了,有些還可能還是有點不太明白,因為你們不是二級經銷商. 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 問題:連結式的更友善,而且把郵件位址敲入收件人欄還有可能會出錯. 聯系方式 問題:你冒着這麼大的風險就是因為有一個垃圾郵件借用你的帳戶發送大量的垃圾郵件(除非你使用真正的安全郵件腳本).而這樣就扼殺了那些隻想給你發個簡單郵件的使用者. .加密 問題:你的郵件仍然暴露在光天化日之下,即使你使用了複雜的密碼技術給它帶上面具.還有誰希望為了發送一封郵件而啟用第三方的解密網站,反正我是不會. 藏在一種簡單的形式後面 (有一個例子,但是打不開了.)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) 這個讓我們輕松的紀念日已經到來–我恨我在計算機前已經花了48個小時，我希望能夠有另外一個jQuery來結束我的噩夢，并且讓我上網更快。 當我一邊“在用Jquery方法編寫”和一邊“進行複雜的檔案上傳”，我已經筋疲力盡。然而這兩種操作的代碼是一種較淺的，它隻不過是你才剛剛開始解決的一些簡單問題。 是以下來我開始介紹： 盡管我在我的網站用所有的CSS樣式表去進行表格設計（也許這要花費兩年半的時間或者更多），我已經用了很多我能找到的在這方面的資訊。回到2004年5月(古代史)A list a part有一篇《關于建立陰影的偉大教程(洋蔥皮投影)》可以應用到任何圖檔,無論尺寸多大. 那片文章的應經不能再評論了,但還是有些人希望能夠再出篇教程. 問題 一些css工程師用一些”不相幹”的标記,就是為了使背景圖檔能夠應用到每一個元素上.例如: 這裡是A list a part用到的代碼:
所有這些divs充當一個給圖檔添加投影效果的”鈎子”.這不見得好,我們可以把源代碼精簡成這樣:
目标 在這裡,我要想你展示如何用jQuery輕而易舉的将多于的标記從你的源代碼中剔除.運用這個方法,讓你的代碼更加幹淨(更重要的是)将使以後變換布局容易的多. 解 這裡,看看jQuery是如何擊退這個問題的. $(document).ready(function(){ $("img.dropshadow") .wrap("
" + "
"); }); 圖檔就可以保持這樣了:
仔細看看 $(document).ready() 是jQuery版的window. $(“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用的是一樣的.
<script type="text/javascript"> </script>
Onion Skinned - With jQuery
First, the old-school, multiple divs hard coded into the html as seen on the orignial article:
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!
(這裡隻是代碼,沒有圖檔.要看效果去這裡) 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("
"); HTML
Test Paragraph.
結果
Test Paragraph.