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!
Posted on .