jQuery get link attributes

Example showing how to get a number of different attributes from an href element

by Oliver Kelso

HTML

<a href="http://google.com" class="link-1">The First Link</a>
<br />
<a href="http://yahoo.com" class="link-2">The Second Link</a>
<br />
<br />
<br />
<span id="showClass" class="result">Name That Class!</span>
<br />
<span id="showText" class="result">Show Me The Link!</span>
<br />
<span id="showHref" class="result">Get Me That Href!</span>

CSS

*{font-family:helvetica;}
a{color:#000;font-weight:bold;}
.result{font-size:50px;font-weight:bold;color:red;}

JavaScript

$('a').click(function(e){
    e.preventDefault();
    
    var linkClass = $(this).attr("class");
    var linkText = $(this).text();
    var linkHref = $(this).attr('href');
    
    $('#showClass').hide().html(linkClass).fadeIn("slow");
    $('#showText').hide().html(linkText).fadeIn("slow");
    $('#showHref').hide().html(linkHref).fadeIn("slow");

});