吕,累了,以后只翻译点有用的东西.并结合自己所学注解一下.
Today’s tutorial is a quickie. I want to tackle something easy early on in the “15 Days” so that someone new to javascript can sink their teeth into a real world example without getting bogged down in code.
The fact that I find myself desperately short on time today with deadlines looming certainly sealed the decision.
The Goal
We’re going to create a quick little snippet of code using jquery that will convert and camouflage all of our affiliate links on a page.
我们将使用jquery来创建很短的代码来实现页面中链接(<a ......>)的更改。
Why?
Some affiliate marketers believe that there’s a segment of their audience that is savvy enough to spot an affiliate link and will avoid clicking through the link - typing the url directly into the browser to “cheat” the affiliate marketer out of their commission (assuming a purchase is made).
The “Old” Way
There are lots of ways affiliate marketers have devised to camouflage their links or to make it very difficult for someone to avoid clicking through their link. Some of these methods involve .htaccess and server side code.
为了使本次课程的效果更佳，我们先看一下老的"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>
这些代码的设计是用来显示当一个访问者的鼠标经过链接时，在他的浏览器状态栏上显示实际的URL地址。当然也可以使用
www.website.com作为www.website.com?aff=123显示效果
The Problem
You’re an active affiliate marketer with multiple links on multiple pages and you’re adding content at a frantic pace
Writing all this code gets tiresome. And putting javascript into each affiliate link will make updating your websites a nightmare if at some point down the road you decide to change something about the code and the way the links are displayed.
（以上主要举了几个例子来说明直接在内容中(HTML,BODY)中更加一个链接的属性事件很麻烦）
第一步:
We want the javascript to camouflage our links as soon as possible so we start with this:
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//code goes here
});
</script>
As soon as the DOM (Document Object Model) is ready, the code inside of the ready(function(){}) will start.
(老样子，加入jquery脚本，准备$(document).ready)
接下来
We’re going to give all of our affiliate links a class name and a title. The class name will help jquery scan the page and find all of the links we want changed, leaving all other links untouched.
The title will serve two purposes: when the cursor hovers over the link, a tiny tootip-like box will appear with the www.website.com url displayed and the same url information will display in the bottom of the browser window (Internet Explorer only).
一样要实现老脚本的功能
<p><a href="http://www.affsite.com?id=123" title="http://www.affsite.com"
class="affLink">Super Duper Product</a></p>
让jquery通过a元素的class='affLink'查找到所有要处理的元素
$('a.affLink')
增加Mouseover事件
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
Simply put, this says “Find all links with class name affLink and onMouseover change the status of the browser (where link information is shown) to whatever you find in the title of the link.”
This does not work in FireFox (made fav browser) but it works for Internet Explorer (what most of the world uses - unfortunately). And in FireFox it just displays ‘Done’, or more accurately, moving the cursor over the link doesn’t have any effect on the status bar of the browser. I have not tested this in other browsers.
译：这个脚本不会在Firefox中实现
，但在IE中可以运行。在Firefox中只会显示"Done"，而当鼠标经过链接的时候在浏览器的状态栏不会有任何的效果。我没在其它浏览器中测试过
扩展 - Mouseout
jquery lets us “chain” methods together like so:
$('a.affLink').mouseover(function(){window.status=this.title;return true;})
.mouseout(function(){window.status='Done';return true;});
This last bit of code tells jquery to change the status bar of the browser back to ‘Done’ when the cursor is no longer hovering over the link.
If chaining mouseover and mouseout is a little more than you want to tackle as you get used to jquery then there’s nothing wrong with writing your code like so:
$('a.affLink').mouseover(function(){window.status=this.title;return true;});
$('a.affLink').mouseout(function(){window.status='Done';return true;});
It’s up to you.
全部代码
<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>
Final Thoughts（总结）
Some of you may be thinking this “Day” to be a bit simplistic. Others may have a difficult time seeing the point of the tutorial because you’re not an affiliate marketer.
In “Days” to come you’ll see me tackle issues that get more involved and apply to almost anyone with a website - whether you monetize your traffic or not.（其实第四天的例子也没什么好说的，我可以直接跳过去了）
吕，通过jquery你只要在链接的class上设置js中（代码如上述）约定的类名，即可以随意地对这些链接进行处理。
