Commonly Confused Bits of jQuery
Andy Croxall
The explosion of JavaScript libraries and frameworks such as jQuery onto
the front-end development scene has opened up the power of JavaScript to
a far wider audience than ever before. It was born of the need — expressed
by a crescendo of screaming front-end developers who were fast running
out of hair to pull out — to improve JavaScript’s somewhat primitive API.
This makes up for the lack of unified implementation across browsers and
to make it more compact in its syntax.
All of which means that, unless you have some odd grudge against jQuery,
those days are gone — you can actually get stuff done now. A script to find
all links of a certain CSS class in a document and bind an event to them
now requires one line of code, not 10. To power this, jQuery brings to the
party its own API, featuring a host of functions, methods and syntactical
peculiarities. Some are confused or appear similar to each other but
actually differ in some ways. This article clears up some of these confusions.
1. .parent() vs. .parents() vs. .closest()
All three of these methods are concerned with navigating upwards
through the DOM, above the element(s) returned by the selector, and
matching certain parents or, beyond them, ancestors. But they differ
from each other in ways that make each of them uniquely useful.