15天學會jQuery (1-5天) @ wEb 亂講

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>

easonyo

wEb 亂講

easonyo 發表在痞客邦留言(0) 人氣()

E-mail轉寄

wEb 亂講

公告版位

15天學會jQuery (1-5天)

留言列表

new文章

文章分類

留言

hot文章

who

人氣指數