var reps = 10000;

​

var outPut = "<br /><br /><br />Iterations:" + reps + "<br /><br /><table><thead><th>Results:</th><th></th></thead><tbody>";

var oldTime = new Date().getTime();

​

for ( var i = 0; i < reps; i++) {

    $("#annyoing\\:colon"); }

​

outPut += "<tr><td>" + (new Date().getTime() - oldTime + '</td><td>$("#annyoing\\\\:colon")</td></tr>');

​

$("#annyoing\\:colon").css("background-color", "blue");

/* the playing around with the colors is only to test

 * whether the selector actually works  */

​

oldTime = new Date().getTime();

for ( var i = 0; i < reps; i++) {

    $("[id='annyoing:colon']"); }

​

outPut += "<tr><td>" + (new Date().getTime() - oldTime + "</td><td>$(\"[id='annyoing:colon']\"</td></tr>");

​

$("[id='annyoing:colon']").css("background-color", "red");

​

oldTime = new Date().getTime();

for ( var i = 0; i < reps; i++) {

    $(document.getElementById("annyoing:colon"));   }

​

outPut += "<tr><td>" + (new Date().getTime() - oldTime + "</td><td>$(document.getElementById(\"annyoing:colon\"))</td></tr>");

​

$(document.getElementById("annyoing:colon")).css("background-color", "yellow");

​

oldTime = new Date().getTime();

for ( var i = 0; i < reps; i++) {

    $("#nocolon");      }

​

outPut += "<tr><td>" + (new Date().getTime() - oldTime + '</td><td>$("#nocolon")</td></tr>');

​

$("#nocolon").css("background-color", "blue");

​

oldTime = new Date().getTime();

for ( var i = 0; i < reps; i++) {

    $("[id='nocolon']");    }

​

outPut += "<tr><td>" + (new Date().getTime() - oldTime + "</td><td>$(\"[id='nocolon']\")</td></tbody></table></tr>");

​

$("[id='nocolon']").css("background-color", "red");

​

document.getElementById("Output").innerHTML = outPut;

​