十五天快速学会jQuery（第四天）

今天的目标我们要使用jQuery去创建一小段代码，这段代码会把一个页面所有的超链接转换并且伪装起来。

 

<a onMouseOver='window.status="http://www.web-phoenix.net"; return true;' onMouseOut='window.status="Done"; return true;' href="http://www.web-phoenix.net"target="_blank">Link Text Here</a>

 

这段代码被用来在浏览器状态栏显示用户鼠标指向的链接地址。比如实际链接是www.web-phoenix.net?id=123,则可以在状态栏显示www.web-phoenix.net。

 

 

首先，我们想让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.web-phoenix.net，并且同样的信息会显示在浏览器的状态栏(IE Only)。

 

<p><a href="http://www.web-phoenix.net?id=123"

title="http://www.web-phoenix.net"

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>