jQuery is an excellent JavaScript framework for the web and makes a number of arduous cross-browser tasks much easier to manage. But as libraries mature, there are bound to be a few features that are less emphasized than others.

Here are two jQuery features that you may not be using (but are worth remembering).

get()

More often than not, you’re likely using $.get() in the context of Ajax requests; however, jQuery provides another function by the same name that can be used to get a reference to the actual DOM element itself (rather than a reference to the jQuery object).

For example, given the following markup:

get() would perform in the following way:


alert($('span')); // returns the jQuery object and will print [object Object]
alert($('span').get(0)); // returns a reference to the actual DOM element, [object HTMLSpanElement]


This can be especially useful when you’re looking to pass the element by references or when you’re looking to manipulate the element directly.

siblings()

When working with the DOM, it’s much easier if you can conceptualize the tree data structure that represents the markup. This makes the relationship between parents, children, and sibling nodes much easier to understand.

Personally, I find myself often working with parents and children much more than I do with siblings; however, the siblings() method proves useful in those cases.

Assuming that you’re dealing with some markup in which all elements are at the same level, such as the following elements:

This is a heading

This span will have two siblings - one is a heading and one is a paragraph.

This is a paragraph.