Description
A straightforward explanation of exactly what a jQuery object is (an array of DOM elements "wrapped" with jQuery's methods) and explain some very common mistakes newcomers make with respect to knowing the difference between a jQuery object and a native DOM element.
Explain why all of these fail:
$("#foo").innerHtml = "bar"; // using a native DOM property on a jQuery object
$(".bar")[0].text("hello"); // using a jQuery method on a native DOM elementExplain why jQuery objects always are array-like, even when querying for an element by ID. (This question comes up frequently).
Touch on the major methods for going back and forth between jQuery and native DOM (get, eq) and testing if a jQuery object contains any elements (.length).
Explain that jQuery objects are not "live" collections
Explain that jQuery objects are transient, even if they contain the same elements, cannot ever be compared for equality. (Borrow and expand upon this slide
Bonus Material: Expain why jQuery objects print as arrays in Developer Tools (they have a .splice method and a .length property). Explain how the .length property of a jQuery set is manually maintained within jQuery (perhaps too advanced for this article?)