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!).
Selectors
Selecting by ID:
$('#foo')
document.getElementById('foo')
Selecting by class (not compatible with IE6-8, but good with everything else):
$('.bar')
document.getElementsByClassName('bar')
Selecting by tag name:
$('span')
document.getElementsByTagName('span')
Selecting sub-elements:
$('#foo span')
document.getElementById('foo').getElementsByTagName('span')
Selecting “special” elements:
$('html')
document.documentElement
$('head')
document.head
$('body')
document.body
There are a number of libraries that have jQuery’s selector functionality; my favorite is the tiny Qwery.
Attributes
Getting/setting HTML:
$('#foo').html()
document.getElementById('foo').innerHTML
$('#foo').html('Hello, world!')
document.getElementById('foo').innerHTML = 'Hello, world!'
Dealing with classes:
$('#foo').addClass('bar')
document.getElementById('foo').className += ' bar '
$('#foo').removeClass('bar')
document.getElementById('foo').className = document.getElementById('foo').className.replace(/\bbar\b/gi, '')
$('#foo').hasClass('bar')
document.getElementById('foo').className.search(/\bbar\b/gi) !== -1
Getting an input’s value:
$('#foo').val()
document.getElementById('foo').value
Effects
Showing and hiding:
$('#foo').show()
document.getElementById('foo').style.display = ''
$('#foo').hide()
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.
Events
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!
});
Clicks
$('#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.
AJAX
If you don’t want to use jQuery, use the Reqwest library.
Utilities
Parsing JSON:
jQuery.parseJSON(json)
JSON.parse(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
Conclusion
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!