jsPerf tests

Some jsPerf tests for future reference.

by PeeHaa

HTML

<h1>jsPerf tests</h1>
<dl>
    <dt><a href="http://jsperf.com/jquery-attr-rel-vs-vanilla-rel/3" target="blank">jQuery.attr('rel') vs vanilla .rel</a></dt>
    <dd>Test the perfomance hit between getting the rel attribute using vanilla JS and jQuery's .attr('rel')</dd>
    <dt><a href="http://jsperf.com/jquery-live-vs-delegate-vs-on" target="blank">jQuery .live() vs .delegate() vs .on()</a></dt>
    <dd>Test the perfomance between jQuery's different binding options for dynamic added elements</dd>
    <dt><a href="http://jsperf.com/removing-event-props/9" target="blank">Removing jQuery event properties</a></dt>
    <dd>event.layerX & event.layerY are removed from WebKit. Every jQuery-bound event handler (jQuery <1.7) now logs this warning</dd>
</dl>

CSS

body { font-family: Tahoma; padding: 10px; font-size: 12px; }
h1 { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
dt { padding: 0 3px 5px; }
dt a { color: black; }
dd { border-bottom: 2px solid gray; padding: 0 0 5px; margin: 0 0 10px; }

JavaScript

(function($) {
    $('dt').hover(function() {
        $(this).stop().animate({
            backgroundColor: "#c3cbdb"
        }, 'slow').next().stop().animate({
            backgroundColor: "#c3cbdb"
        }, 'slow');        
    }, function() {
        $(this).stop().animate({
            backgroundColor: 'white'
        }, 'slow').next().stop().animate({
            backgroundColor: 'white'            
        }, 'slow');        
    }).css('cursor', 'pointer').click(function(e) {
        window.open($('a', this).attr('href'));
    });
    
    $('dd').hover(function() {
        $(this).stop().animate({
            backgroundColor: "#c3cbdb"
        }, 'slow').prev().stop().animate({
            backgroundColor: "#c3cbdb"
        }, 'slow');        
    }, function() {
        $(this).stop().animate({
            backgroundColor: 'white'
        }, 'slow').prev().stop().animate({
            backgroundColor: 'white'            
        }, 'slow');        
    }).css('cursor', 'pointer').click(function(e) {
        window.open($('a', $(this).prev()).attr('href'));
    });   
})(jQuery);