您当前的位置:首页 > 网络编程 > Js脚本 > 正文

《15天jQuery入门教程》第三天:让链接更可爱

【字体大小: 2009-04-21 11:03 来源:译言 作者: 

  今天的教程有点匆忙。我想在这“15天”教程里尽量讲些简单的内容,让Javascript新手们能够在例子中得到启示,而非在一堆代码中陷入困境。

  事实上我发现距离15天的期限越来越短了。

  目标

  离我们将运用jQuery创建一段快速简短的代码来装饰和转换页面上的所有链接。

  为什么?

  一些网络广告商认为他们的客户都很精明。客户们在看到链接的时候刻意避免去点击广告链接,而是在地址栏里直接输入URL访问来欺骗广告商,让其无法准确统计。(假设购买已达成)

  老方法

  网络广告商有很多方式来设计和伪装他们的广告链接,使得用户无法可以刻意避免点击其广告链接,这些很多涉及 .htaccess 和服务器端编程技术。

  但对于这个教程,我们将关注一些守旧的方法,例如javascript:

  1. <a onMouseOver='window.status="http://www.merchant-url-here.com";  
  2. return true;' onMouseOut='window.status="Done"; return true;' 
  3. href="http://www.affiliate-url-here.com" 
  4. target="_blank">Link Text Here</a> 

  这段代码设计用以当用户将鼠标放在链接上时,在浏览器状态栏显示网站的通用url。我们可以在状态栏中看到www.website.com 而不是 www.website.com?aff=123 。

  问题

  如果对多个页面的多个链接上的广告链接进行处理,这将是一件令人疯狂的重复性工作。写这些代码会很烦人,而且将javascript代码嵌入到每个链接中将使你的站点维护工作变成噩梦,当你决定改变链接的显示方式的时候。

  jQuery解决方案

  第一步

  从这里开始我们用javascript来装点链接:

  1. <script src="jquery.js"></script> 
  2. <script type="text/javascript"> 
  3.   $(document).ready(function(){  
  4. //code goes here  
  5. });  
  6.   </script> 

  当DOM(文档对象模型)加载完毕,ready(function())里面的代码便开始执行。

  下一步

  我们将赋予每一个广告链接一个类名和名称。类名将帮助jQuery扫描页面找出所有你需要操作的链接,而忽略其他的链接。

  设置名称有两个目的:当鼠标悬浮在链接上时,一个小的提示文本框将显示www.website.com的url,这样同样的Url也将被显示在浏览器窗口(仅针对IE浏览器)的底部。  

  1. <p><a href="http://www.affsite.com?id=123" title="http://www.affsite.com" 
  2.   class="affLink">Super Duper Product</a></p> 

 

  告诉jQuery查找class="afflink"的链接  

  1. $('a.affLink'

  添加一个Mouseover事件  

  1. $('a.affLink').mouseover(function(){window.status=this.title;return true;}) 

  简单操作后,以上代码的意思是“找出所有类名为afflink的链接,当鼠标悬浮在链接上时改变状态栏中显示的链接的title信息。”

  而这些在Firefox中不会起作用(译者注:不幸的是大家都不用Firefox,而恰恰Firefox是支持标准的浏览器),仅在IE浏览器中有用(不幸的是:绝大多数用户使用)。在Firefox浏览器中仅仅会显示“完成”,或者更精确点的说,当鼠标移到链接上的时候,浏览器的状态栏不会有任何效果。除去IE和Firefox我没有在其他浏览器上进行此测试。

  首页拉伸(译者注:Home Stretch:这个翻译很牵强,高手指点一下) - Mouseout

  jQuery允许我们以“锁链”将方法连接起来,如下:  

  1. $('a.affLink').mouseover(function(){window.status=this.title;return true;})  
  2. .mouseout(function(){window.status='Done';return true;}); 

  最后这段代码告诉jQuery改变状态栏的显示,当鼠标从链接上移出时,状态栏从现在的显示url的状态恢复到显示“完成”的状态。

  如果将mouseove和mouseout像锁链一样连接不是你喜欢的方格,你也可以用jQuery像下面这样正常点写代码:  

  1. $('a.affLink').mouseover(function(){window.status=this.title;return true;});  
  2. $('a.affLink').mouseout(function(){window.status='Done';return true;}); 

  这取决于你自己的习惯。

  将所有的代码放到一起

  1. <script src="jquery.js"></script> 
  2. <script type="text/javascript"> 
  3. $(document).ready(function(){  
  4. $('a.affLink').mouseover(function(){window.status=this.title;return true;})  
  5. .mouseout(function(){window.status='Done';return true;});  
  6. });  
  7. </script> 

  最后的想法

  一些人可能会认为15天教程的“今天”有些简单。一些人可能很难理解教程的重点,因为你并非一个网络营销人士。在即将到来的新的“一天”你将看到更适合于处理一般人的网站的观点和技巧 - whether you monetize your traffic or not(译者注:这句不会翻译)。

    顶一下
    (4)
    57.1%
    踩一下
    (3)
    42.9%
    【责任编辑:绝口不提】 标签: jQuery入门教程
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: