您的位置:知识库 » Web前端

15 Days of jQuery(Day 3)---巧妙的伪装链接

来源: jquery中文社区维基百科  发布时间: 2009-07-12 21:08  阅读: 2080 次  推荐: 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>

最后的想法 你们当中可能觉得今天的课程太简单了,有些还可能还是有点不太明白,因为你们不是二级经销商.

0
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻