jQuery is great. It is powerful and quick. But with any power comes abuse. Here are some common ways to jQuery is abused.
1) Overuse of .ready()
How bad? Better to shatter a mirror
Why: Users will often start using the page before it finishes loading. Google Analytics and other scripts can cause the DOMContentLoaded event fire long after the page appears to be loaded.
Instead do: Add a script block immediately after the element! For example, if I want to focus in on the first element in the form, add
document.getElementById('id').focus() in a script block right after the input tag. If not, I might start filling in the form; when the page finishes loading a few seconds later, I’ll be in for a nasty surprise–the cursor will snap back to the first input!
2) Using .is(‘.class’)
How bad? Like a Zombie
Why: jQuery runs through an awful lot of Sizzle code instead of just checking HTMLElement#className.
Instead do: .hasClass(‘class’)
3) Using .live()
Problem: Terrible performance, some features are not supported.
How bad? An angel loses its wings
Why: jQuery attaches the listener to the document.
Instead do: .delegate(). It allows you attach the listener to the element(s) you want to. Attaching to the document is almost always too high. I think .delegate() was added as a correction to .live()–.live() should have never been added.
4) Repeated Calls
Problem: Too many users call $(selector) every time they reference the object–even one line after another.
How bad? Lightning to the forehead
Why: jQuery re-queries the document on every call.
Instead do: If you plan to reference the object later, store it in a variable!
How bad? Tomato to the face
document.getElementById and HTMLElement#style.