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 confident parents or, beyond them, ancestors. But they differ from each other in ways that make each of them uniquely useful.
Parent (selector)
This matches the one immediate parent of the element(s). It can take a selector, which can help reach the parent only in certain situations.
Parents (selector)
This acts in much the same way as a parent (), except it is not restricted to just one level above the matched element(s). That is, it can return multiple ancestors.
Closest (selector)
This is a bit of a well-kept secret, but very useful. It works like parents(), except it returns only one parent/ancestor. In my experience, you’ll generally want to check for the existence of one particular element in an element’s ancestry, not a whole bunch of them, so I tend to use this more than parents (). For example, say we wanted to know whether an element was a descendant of another, however deep in the family tree.
.position () vs. .offset ()
These two are both concerned with reading the position of an element — namely, the first element returned by the selector. They both produce an object containing two properties, left and top, but they differ in what the returned position is relative to.
Position () calculates positioning relative to the offset parent — or, in more understandable terms, the nearest parent or ancestor of this element that has a place: relative. If no such parent or ancestor is found, the position is calculated relative to the document (i.e., the top-left corner of the viewport). Offset (), in contrast, continuously calculates positioning close to the paper, regardless of the position attribute of the elements’ parents and ancestors.
css(‘width’) and .css(‘height’) vs. .width() and .height ()
You won’t be shocked to learn that these three are concerned with calculating the dimensions of an element in pixels. They both return the offset dimensions, which are the actual dimensions of the piece no matter how stretched it is by its inner content.
.merge () vs. .extend ()
Let’s finish with a foray into more advanced JavaScript and jQuery. Of course, we’ve looked at positioning, DOM manipulation, and other common issues, but jQuery also provides some utilities for dealing with the native parts of JavaScript. This is not its primary focus, mind you; libraries such as MooTools exist for this purpose.
.merge ()
Merge () allows you to merge the contents of two arrays into the first array. This entails a permanent change for the first array. It does not make a new array; values from the second array are appended to the first.
.extend ()
Extend () has a little more power to it. For one thing, you can merge more than two objects — you can pass as many as you like. For another, it can merge recursively. That is, if properties of things are themselves objects, you can ensure that they are connected, too. To do this, pass true as the first argument:
There You Have It
We’ve seen some similarities, but more often than not, intricate (and occasionally significant) differences. jQuery is not a language, but it deserves to be learned as one, and by understanding it, you will make better decisions about what methods to use for which situation
It should also be said that this article does not aim to be an exhaustive guide to all jQuery functions available for every situation. For DOM traversal, for example, there’s also next until() and parents until().
While there are strict rules these days for writing semantic and SEO compliant mark-up, JavaScript is still very much the playground of the developer. No one will demand that you use click () instead of bind (), but that’s not to say one isn’t a better choice than the other. It’s all about the situation.
