Jquery vs native - selector and element style (v10)

Revision 10 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1/dojo/dojo.xd.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<ul class='first'>
<li class='foo'>
</li>
<li class='bar'>
</li>
</ul>

Setup

function hasClass(el, className) {
  
    if (el.classList)
      el.classList.contains(className)
    else
      new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className)
  
  }

Teardown



            $('.foo').css('background-color', 'transparent');
  $('.bar').css('background-color', 'transparent');

Test runner

Ready to run.

Testing in
TestOps/sec
var first = $('ul.first');
first.find('.foo').css('background-color', 'red');
first.find('.bar').css('background-color', 'green');
ready
Jquery
$('ul.first')
  .find('.foo')
  .css('background-color', 'red')
  .end()
  .find('.bar')
  .css('background-color', 'green')
  .end();
ready
native javascript
var e = document.querySelector("ul.first");

for (var i = 0; i < e.length; ++i) {
  if (hasClass(e[i], 'foo'))
    e[i].style.backgroundColor = 'red';

  if (hasClass(e[i], 'bar'))
    e[i].style.backgroundColor = 'green';
}
ready
native javascript two
var elfoo = document.querySelector("ul.first .foo");
var elbar = document.querySelector("ul.first .bar");

for (var i = 0; i < elfoo.length; ++i) {
  elfoo[i].style.backgroundColor = 'red';
}

for (var i = 0; i < elbar.length; ++i) {
  elbar[i].style.backgroundColor = 'red';
}
ready
dojo
dojo.query('ul.first').forEach(function(node) {
  if (node.hasClass('foo'))
    dojo.style(node, 'background-color', 'red');

  if (node.hasClass('bar'))
    dojo.style(node, 'background-color', 'green')
})
ready
jquery whole selector
$('ul.first .foo')
  .css('background-color', 'red')
  .end();
$('ul.first .bar')
  .css('background-color', 'green')
  .end();
ready
jquery no end
$('ul.first .foo')
  .css('background-color', 'red');
$('ul.first .bar')
  .css('background-color', 'green');
ready

Revisions

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