jQuery selector vs hasClass (v17)

Revision 17 of this benchmark created by qgustavor on

Description

Tests ways that determinate if a element have a class, include the jQuery and HTML5 ones. It also have to return true for "foo" and false to "bar".

Preparation HTML

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body class="foo">
<div class="bar"></div>
</body>
</html>

Test runner

Ready to run.

Testing in
TestOps/sec
native javascript
document.body.className.indexOf("foo") !== -1;
document.body.className.indexOf("bar") !== -1;
ready
native selector and .hasClass()
$(document.body).hasClass("foo");
$(document.body).hasClass("bar");
ready
$ and .hasClass()
$("body").hasClass("foo");
$("body").hasClass("bar");
ready
$ and .is()
$("body").is(".foo");
$("body").is(".bar");
ready
$ and length
$("body.foo").length !== 0;
$("body.bar").length !== 0;
ready
Element.classList
document.body.classList.contains('foo');
document.body.classList.contains('bar');
ready
document.querySelector
document.querySelector('body.foo')!==null;
document.querySelector('body.bar')!==null;
ready

Revisions

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