jQuery Selector Testing

JavaScript performance comparison

Test case created

Preparation code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Apple-Style Slider</title>
<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<h2>SliderNav</h2>
<p><strong>SliderNav</strong> is a plugin that lets you add dynamic, sliding content using a vertical navigation bar (index).  It's made mainly for alphabetical listings but can be used with anything, though longer words look a little awkward (see <a href="#example-2">example 2</a>).</p>
<h3>Basic Usage</h3>
<pre>$('.slider').sliderNav();</pre>
<p>For more detailed instructions and customization options, see the <a href="http://devgrow.com/slidernav">article on DevGrow</a> (or view the plugin source).</p>
<h3>Example 1</h3>
<div id="slider">
        <div class="slider-content">
                <ul>
                        <li id="a"><a name="a" class="title">A</a>
                                <ul>
                                        <li><a href="/">Adam</a></li>
                                        <li><a href="/">Alex</a></li>
                                        <li><a href="/">Ali</a></li>
                                        <li><a href="/">Apple</a></li>
                                        <li><a href="/">Arthur</a></li>
                                        <li><a href="/">Ashley</a></li>
                                </ul>
                        </li>
                        <li id="b"><a name="b" class="title">B</a>
                                <ul>
                                        <li><a href="/">Barry</a></li>
                                        <li><a href="/">Becky</a></li>
                                        <li><a href="/">Biff</a></li>
                                        <li><a href="/">Billy</a></li>
                                        <li><a href="/">Bozarking</a></li>
                                        <li><a href="/">Bryan</a></li>
                                </ul>
                        </li>
                        <li id="c"><a name="c" class="title">c</a>
                                <ul>
                                        <li><a href="/">Calista</a></li>
                                        <li><a href="/">Cathy</a></li>
                                        <li><a href="/">Chris</a></li>
                                        <li><a href="/">Cinderella</a></li>
                                        <li><a href="/">Corky</a></li>
                                        <li><a href="/">Cypher</a></li>
                                </ul>
                        </li>
                        <li id="d"><a name="d" class="title">d</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="e"><a name="e" class="title">E</a>
                                <ul>
                                        <li><a href="/">Barry</a></li>
                                        <li><a href="/">Becky</a></li>
                                        <li><a href="/">Biff</a></li>
                                        <li><a href="/">Billy</a></li>
                                        <li><a href="/">Bozarking</a></li>
                                        <li><a href="/">Bryan</a></li>
                                </ul>
                        </li>
                        <li id="f"><a name="f" class="title">f</a>
                                <ul>
                                        <li><a href="/">Calista</a></li>
                                        <li><a href="/">Cathy</a></li>
                                        <li><a href="/">Chris</a></li>
                                        <li><a href="/">Cinderella</a></li>
                                        <li><a href="/">Corky</a></li>
                                        <li><a href="/">Cypher</a></li>
                                </ul>
                        </li>
                        <li id="g"><a name="g" class="title">g</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="h"><a name="h" class="title">h</a>
                                <ul>
                                        <li><a href="/">Barry</a></li>
                                        <li><a href="/">Becky</a></li>
                                        <li><a href="/">Biff</a></li>
                                        <li><a href="/">Billy</a></li>
                                        <li><a href="/">Bozarking</a></li>
                                        <li><a href="/">Bryan</a></li>
                                </ul>
                        </li>
                        <li id="i"><a name="i" class="title">i</a>
                                <ul>
                                        <li><a href="/">Calista</a></li>
                                        <li><a href="/">Cathy</a></li>
                                        <li><a href="/">Chris</a></li>
                                        <li><a href="/">Cinderella</a></li>
                                        <li><a href="/">Corky</a></li>
                                        <li><a href="/">Cypher</a></li>
                                </ul>
                        </li>
                        <li id="j"><a name="j" class="title">j</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="k"><a name="k" class="title">k</a>
                                <ul>
                                        <li><a href="/">Barry</a></li>
                                        <li><a href="/">Becky</a></li>
                                        <li><a href="/">Biff</a></li>
                                        <li><a href="/">Billy</a></li>
                                        <li><a href="/">Bozarking</a></li>
                                        <li><a href="/">Bryan</a></li>
                                </ul>
                        </li>
                        <li id="l"><a name="l" class="title">l</a>
                                <ul>
                                        <li><a href="/">Calista</a></li>
                                        <li><a href="/">Cathy</a></li>
                                        <li><a href="/">Chris</a></li>
                                        <li><a href="/">Cinderella</a></li>
                                        <li><a href="/">Corky</a></li>
                                        <li><a href="/">Cypher</a></li>
                                </ul>
                        </li>
                        <li id="m"><a name="m" class="title">m</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="n"><a name="n" class="title">n</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="o"><a name="o" class="title">o</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="p"><a name="p" class="title">p</a>
                                <ul>
                                        <li><a href="/">Barry</a></li>
                                        <li><a href="/">Becky</a></li>
                                        <li><a href="/">Biff</a></li>
                                        <li><a href="/">Billy</a></li>
                                        <li><a href="/">Bozarking</a></li>
                                        <li><a href="/">Bryan</a></li>
                                </ul>
                        </li>
                        <li id="q"><a name="q" class="title">q</a>
                                <ul>
                                        <li><a href="/">Calista</a></li>
                                        <li><a href="/">Cathy</a></li>
                                        <li><a href="/">Chris</a></li>
                                        <li><a href="/">Cinderella</a></li>
                                        <li><a href="/">Corky</a></li>
                                        <li><a href="/">Cypher</a></li>
                                </ul>
                        </li>
                        <li id="r"><a name="r" class="title">r</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="s"><a name="s" class="title">s</a>
                                <ul>
                                        <li><a href="/">Barry</a></li>
                                        <li><a href="/">Becky</a></li>
                                        <li><a href="/">Biff</a></li>
                                        <li><a href="/">Billy</a></li>
                                        <li><a href="/">Bozarking</a></li>
                                        <li><a href="/">Bryan</a></li>
                                </ul>
                        </li>
                        <li id="t"><a name="t" class="title">t</a>
                                <ul>
                                        <li><a href="/">Calista</a></li>
                                        <li><a href="/">Cathy</a></li>
                                        <li><a href="/">Chris</a></li>
                                        <li><a href="/">Cinderella</a></li>
                                        <li><a href="/">Corky</a></li>
                                        <li><a href="/">Cypher</a></li>
                                </ul>
                        </li>
                        <li id="u"><a name="u" class="title">u</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="v"><a name="v" class="title">v</a>
                                <ul>
                                        <li><a href="/">Barry</a></li>
                                        <li><a href="/">Becky</a></li>
                                        <li><a href="/">Biff</a></li>
                                        <li><a href="/">Billy</a></li>
                                        <li><a href="/">Bozarking</a></li>
                                        <li><a href="/">Bryan</a></li>
                                </ul>
                        </li>
                        <li id="w"><a name="w" class="title">w</a>
                                <ul>
                                        <li><a href="/">Calista</a></li>
                                        <li><a href="/">Cathy</a></li>
                                        <li><a href="/">Chris</a></li>
                                        <li><a href="/">Cinderella</a></li>
                                        <li><a href="/">Corky</a></li>
                                        <li><a href="/">Cypher</a></li>
                                </ul>
                        </li>
                        <li id="x"><a name="x" class="title">x</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="y"><a name="y" class="title">y</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                        <li id="z"><a name="z" class="title">z</a>
                                <ul>
                                        <li><a href="/">damien</a></li>
                                        <li><a href="/">danny</a></li>
                                        <li><a href="/">denver</a></li>
                                        <li><a href="/">devon</a></li>
                                        <li><a href="/">doug</a></li>
                                        <li><a href="/">dustin</a></li>
                                </ul>
                        </li>
                </ul>
        </div>
</div>
<br /><br />
<h3>Example 2</h3>
<a name="example-2"></a>
<div id="transformers">
        <div class="slider-content">
                <ul>
                        <li id="autobots"><a name="autobots" class="title">Autobots</a>
                                <ul>
                                        <li><a href="/">Bumblebee</a></li>
                                        <li><a href="/">Ironhide</a></li>
                                        <li><a href="/">Jazz</a></li>
                                        <li><a href="/">Optimus Prime</a></li>
                                        <li><a href="/">Ratchet</a></li>
                                        <li><a href="/">Ashley</a></li>
                                </ul>
                        </li>
                        <li id="decepticons"><a name="decepticons" class="title">Decepticons</a>
                                <ul>
                                        <li><a href="/">Barricade</a></li>
                                        <li><a href="/">Blackout</a></li>
                                        <li><a href="/">Bonecrusher</a></li>
                                        <li><a href="/">Brawl</a></li>
                                        <li><a href="/">Frenzy</a></li>
                                        <li><a href="/">Megatron</a></li>
                                        <li><a href="/">Scorponok</a></li>
                                        <li><a href="/">Starscream</a></li>
                                </ul>
                        </li>
                </ul>
        </div>
</div>
<br /><br />
<h3>Credit and License</h3>
<p>This plugin was created by <a href="http://mdolon.com/">Monjurul Dolon</a>, author of <a href="http://devgrow.com/">DevGrow</a>, a blog for web developers and designers.  Inspiration for this effect came from a new technology blog called <a href="http://techi.com/">Techi</a> - be sure to support them as well!</p>
<p>Realeased under the MIT, BSD, and GPL Licenses - do whatever you'd like with it, though a link back would be sincerely appreciated!</p>
</body>
</html>
<script>
Benchmark.prototype.setup = function() {
    var slider = $('#slider');
};
</script>

Preparation code output

Apple-Style Slider

SliderNav

SliderNav is a plugin that lets you add dynamic, sliding content using a vertical navigation bar (index). It's made mainly for alphabetical listings but can be used with anything, though longer words look a little awkward (see example 2).

Basic Usage

$('.slider').sliderNav();

For more detailed instructions and customization options, see the article on DevGrow (or view the plugin source).

Example 1



Example 2



Credit and License

This plugin was created by Monjurul Dolon, author of DevGrow, a blog for web developers and designers. Inspiration for this effect came from a new technology blog called Techi - be sure to support them as well!

Realeased under the MIT, BSD, and GPL Licenses - do whatever you'd like with it, though a link back would be sincerely appreciated!

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
comma
$('.slider-content li:first', slider).addClass('selected');
pending…
find
$('.slider-content').find('li:first').addClass('selected');
pending…
defined + find
$('.slider-content', slider).find('li:first').addClass('selected');
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment