Evan Hahn (dot com)

Doing without jQuery

Edit: You Might Not Need jQuery is a great resource that's probably better than mine.

I don't have to tell you that jQuery is fantastic and saves tons of time.

In some cases, you only need a small subset of its features and don't need to load the whole thing. Below is a quick reference for how to do things without jQuery -- sometimes in vanilla JavaScript, sometimes with smaller libraries. This reference is not comprehensive; I omit things because (1) I feel they should be left to jQuery (2) I am lazy.

In general

  • Zepto is a much smaller version of jQuery that is almost indistinguishable, but it drops support for older browsers and IE.

  • jQuery is made with compatibility in mind. Some of these options might not be -- use at your own risk.

  • It might not make sense to load smaller libraries if jQuery is already cached via a CDN like Google's. Upsides of smaller libraries: shorter load if not cached, faster execution time. Downsides: slower load if jQuery is cached, less thinking for you as the developer. Your call.

  • This guide is also available as plain text (because that's how I keep it!).


Selecting by ID:


Selecting by class (not compatible with IE6-8, but good with everything else):


Selecting by tag name:


Selecting sub-elements:

$('#foo span')

Selecting "special" elements:




There are a number of libraries that have jQuery's selector functionality; my favorite is the tiny Qwery.


Getting/setting HTML:


$('#foo').html('Hello, world!')
document.getElementById('foo').innerHTML = 'Hello, world!'

Dealing with classes:

document.getElementById('foo').className += ' bar '

document.getElementById('foo').className = document.getElementById('foo').className.replace(/\bbar\b/gi, '')

document.getElementById('foo').className.search(/\bbar\b/gi) !== -1

Getting an input's value:



Showing and hiding:

document.getElementById('foo').style.display = ''

document.getElementById('foo').style.display = 'none'

Changing CSS:

$('#foo').css('background-color', 'red')
document.getElementById('foo').style.backgroundColor = 'red'

For animation, use the Morpheus library.


Document ready

If you're like me, the most common event you use is jQuery's $(document).ready (or some version of it). Two ways to do this.

First, do it the way MDN does it:

document.onreadystatechange = function() {
    if (document.readyState === 'complete') {
        // DOM is ready!

Second, use domReady, a tiny library that's used like this:

domready(function() {
    // DOM is ready!


$('#foo').click(function() { ... })
document.getElementById('foo').onclick = function() { ... }

All other events

If you don't want to use jQuery, use Bean. It's good stuff.


If you don't want to use jQuery, use the Reqwest library.


Parsing JSON:

// The JSON object isn't in older browsers, so you can include it if it's not there.
// https://github.com/douglascrockford/JSON-js/blob/master/json2.js


If this shows you anything, it's that jQuery saves you from a fair bit of headache. If you've thought about it and you still want to avoid jQuery, I hope this reference can help you!

Posted on .