网站制作一条龙服务_网站百度排名优化推广(seo)服务_【凤凰网络】

当前位置: 网站首页 > 网站建设教程 >

十五天快速学会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。
 

用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.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>
【十五天快速学会jQuery(第四天)热度:55】 【更多网站建设教程
Copyright © 2002-2027 web-phoenix.net 【凤凰网络】 版权所有 All Rights Reserved.
凤凰网络:提供优质的网站制作一条龙服务,并通过百度网站排名优化推广(seo)服务,使seo优化后的网站,获得快速网站关键词排名提升到首页的效果!