jQuery Performance Tips #1
12/24/2013, Tue
Categories:
#JavaScript
Tags:
#jQuery
Checking Visibility
// Visibility Test Cases
$("#word").is(":visible");
$("#word:visible").length == 1;
$("#word:visible").length > 0;
$("#word").css("display") == "block";
$("#word").is(":not(:hidden)");
!$("#word").is(":hidden");
Results
All major browsers perform really well using 4) the css display block, except for Chrome based browsers. The chrome based browsers, Chrome and new Opera, perform the best with 6) ! is :hidden. The comparison, 6) ! is :hidden, looks like the one to use over the 1) .is(':visible').
Finding Option Selected in Select List
// Find Selected Cases
$("select").find(":selected");
$("select option:selected");
$("select > option").filter(":selected");
$("select > option:selected");
$("select").children("option:selected");
$("select > option").find(":selected");
$("select").children("option").filter(":selected");
$("select").children().filter(":selected");
Summary
All major browsers perform well using the children selectors (5, 7, 8). The best of children filters tend to be 5) .children('option:selected').