Jquery tutorial (4) cleverly disguised links

Today's tutorials are just done. I want to put some things in front of the last 15 days, so that some new JS beginners will not be overwhelmed.CodeIn fact, I made this decision at the end.

Target

We need to use jquery to create a small piece of code, which will convert all the hyperlinks on a page and disguise them.

Why?

Some subordinate dealers believe that some users have sufficient insights to discover member links and try to avoid directly accessing the browser by clicking the URL link, thus "spoofing" subordinate dealers from the Agency (assuming that the purchase has occurred)

"Old" approach

Many subordinate dealers have tried every means to conceal their links and prevent people from finding them through links. these tricks involve. htaccess and server code. but for this tutorial, I will focus on the Java Script of the "old school:

 
<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>
 

This code is used to display the link address that the user points to in the browser status bar. For example, the actual link is http://www.website.com /? Aff = 123, you can display http://www.website.com/In the status bar /.

Problem

You are a very active sub-dealer, and you may add links to many pages at crazy speed. you will get bored if you want to add this effect to each link. when you add a link to the taskbar that you want to modify one day, it is estimated that you will be crazy.

Jquery Solution

First, we want Java Script to mask our links as soon as possible. So we should start from here:

 
<SCRIPT src ="Jquery. js"> </SCRIPT> <SCRIPT type ="Text/Java Script"> $(Document).Ready(Function(){// Code goes here}); </SCRIPT>
 

When the Dom is ready, the code we put in ready starts to be executed.

Next

To add a class for all the links we want to disguise, the class helps jquery to help us find the link that needs to be disguised and open other links that do not need to be disguised. title has two functions: When you move the mouse over the link, a small box will prompt you to display the URL: http://www.affsite.com/and the same information will be displayed in the browser's status bar (ie only ).

 
<P> <a href ="Http://www.affsite.com? Id = 123"Title =Http://www.affsite.com"Class="Afflink"> Super duper product </a> </P>
 

Tell jquery to find the link with class = "afflink"

 
$('A. afflink')
 

Add a mouse over event

$('A. afflink').Mouseover(Function(){Window.Status=This.Title; ReturnTrue;})
 

Simply put, find all links of class = "afflink" and change the browser status bar information as the title content of the link when you move the cursor over them. this does not work normally in Firefox, but it only works in IE. the Status Bar of Firefox only displays "done", or, more accurately, the mouse over the hyperlink does not affect the status bar. I have no more browser tests.

Continue-mouseout jquery allows us to use the "chain" method, like this:

$('A. afflink').Mouseover(Function(){Window.Status=This.Title; ReturnTrue;}).Mouseout(Function(){Window.Status='Done'; ReturnTrue;});
 

This code tells jquery to change the browser status bar information, or return "done" when the mouse no longer stays on the link ". if you are not applicable to jquery's way of working with this chain, you can write like this:

$('A. afflink').Mouseover(Function(){Window.Status=This.Title; ReturnTrue;}); $('A. afflink').Mouseout(Function(){Window.Status='Done'; ReturnTrue;});
 

It depends on you.

Put the Code together:

<SCRIPT src = "Jquery. js" > </SCRIPT> <SCRIPT type = "Text/Java Script" > $ ( Document ) . Ready  ( Function (  )  { $ (  'A. afflink'  ) . Mouseover  ( Function (  )  { Window. Status = This . Title ; Return True ; }  ) . Mouseout  ( Function (  )  { Window. Status = 'Done' ; Return True ; }  ) ; }  ) ; </SCRIPT>