转载自网络
今天的教程是草草完成的.我想把一些东西放在这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>
最后的想法 你们当中可能觉得今天的课程太简单了,有些还可能还是有点不太明白,因为你们不是二级经销商.
分享到:
相关推荐
jquery插件jquery-ui-1.8.18.custom.min.js
${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" > ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"> ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jQuery入门级---经典课程,详细讲述了jQuery的编写,适合零基础初学者,更适合培训没学明白的学生
jquery插件jquery-ui-1.8.2.custom.min.js
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
jquery-ui-1.8.18.custom
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jQuery入门汇总---无私奉献!希望对你有帮助
压缩包内包含jquery-1.6.4.js jquery-1.6.4.min.js jquery-1.6.4-vsdoc.js 。 【推荐用法】 1、将jquery-1.6.4-vsdoc.js与jquery-1.6.4.js放在同一目录,然后在vs中添加对jquery-1.6.4.js的引用即可; 2、切记:...
jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js
jquery.mobile-1.4.5 jquery.mobile-1.4.5 jquery.mobile-1.4.5
jquery-ui-1.7.3.custom JQUERY UI
jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载 jquery-ui-1.10.3.js 版本 1积分下载
jQuery入门篇-主要介绍了jQuery的一些基本功能,和使用方法,马上会上传他的核心代码!
jquery-ui-1.7.3.custom 完整开发包