jQuery - Attribute Starts With Selector

Benchmark created by Alun Davey on

Description

jQuery Attribute Starts With Selector

I'm looking into selectively firing functions based on the existence of a namespaced class or data attribute.

Imagine <div class="module-slider module-lightbox"> (or <div data-module="slider lightbox">) which would then fire or call a slider and lightbox plugins

The idea is that this would minfiy the potential impact of a required element not existing instead of relying on the function/plugin to do that.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<h1 class="moon">
  Moon-
</h1>
<div class="moon moon-rock moon-light">
  <h2 class="moon moon-light">
    Moon Rock
  </h2>
</div>
<div class="imitation moon moon-rock moon-phony">
  <h2 data-moon="imitation moon-outrage moon-phony">
    <em class="moon moon-outrage" data-moon="imitation moon-rock moon-phony">
      Imitation
    </em>
    Moon Rock
    </em>
  </h2>
</div>
<div class="moon moon-shine" data-moon="moon-light">
  <h2 class="moon" data-moon="moon-shine moon-light">
    Moon Shine
  </h2>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Class (Starts With)
$("[class^='moon-'],[class*=' moon-']")
ready
jQuery Div Class (Starts With)
$("div[class^='moon-'],div[class*=' moon-']")
ready
jQuery Data Attribute (Starts With)
$("[data-moon^='moon-'],[data-moon*=' moon-']")
ready
jQuery Div Data Attribute (Starts With)
$("div[data-moon^='moon-'],div[data-moon*=' moon-']")
ready
jQuery Data Attribute
$("[data-moon]")
ready
jQuery Div Data Attribute
$("div[data-moon]")
ready
jQuery Class
$('.moon')
ready
jQuery Div Class
$('div.moon')
ready

Revisions

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

  • Revision 1: published by Alun Davey on
  • Revision 2: published by Alun Davey on
  • Revision 3: published by charlie on