15 Days of jQuery(Day 3)---巧妙的偽裝鏈接

來源: jquery中文社區維基百科發布時間: 2009-07-12 21:08 閱讀: 2107 次推薦: 0 原文鏈接 [收藏]

今天的教程是草草完成的.我想把一些東西放在這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>