The jQuery Object Explained
While the jQuery library can sometimes feel like magic, the man behind the curtains in the jQuery library is the jQuery object. It’s this object that gives the jQuery library its power.
But to understand the jQuery object, first we have to understand a couple of important concepts.
The DOM is the Document Object Model. It’s a representation of an HTML document. What we normally think of as HTML elements become document objects when we’re dealing with JavaScript. A complete document is a collection of document objects.
And when we’re talking about programming, what is an object? An object is a thing – it’s anything. Any thing. Take a dog, for example. That’s an object. Objects have properties that describe them. For example, a dog can be short or tall, can be black or white or brown, can have curly hair or straight hair, can have pointy ears or floppy ones, can be a Great Dane or a Chihuahua or a Dachshund, and on and on. All of these are properties of the object – they describe what the dog is like.
Dogs can also do things – they can run, walk, bark, jump, eat, sleep, swim, fetch, roll over, play dead, pant, and on and on. These are methods of the object. They’re things that the dog can do. Methods are like verbs – they describe what objects can do. Properties are like adjectives – they describe the object.
DOM objects have properties and methods, too. Different DOM objects have different properties and methods, so code we write to deal with one type of DOM object won’t necessarily work for another. In addition, there are differences between different browsers – some of the properties and methods of DOM objects differ depending upon which browser and which version of the browser you’re using.
That all adds up to a tough life for developers who are just trying to get their code working. That’s where jQuery comes in so handy.
You see, when you select items on the page using jQuery’s $ selector, you’re not actually getting a collection of DOM objects. You’re getting back one jQuery object. It’s handy to think of a jQuery object like a box. That jQuery object might be empty if no elements on the page matched the selector. That’s what we discussed last week when we checked to see if the jQuery object was empty. A jQuery object can also contain one or more DOM objects. Now that they’re in their handy box, we can easily deal with them.
The jQuery object has a standard set of properties and methods that work no matter what browser we might be using and that work most of the time, no matter what type of DOM object we might be using. By boxing up all the DOM objects into a standard box, jQuery helps to smooth out differences from object to object and from browser to browser.
In addition, jQuery also provides lots of handy methods for performing the sorts of tasks JavaScript developers need to do all the time – changing the values of form elements, updating the text or CSS classes of elements, changing CSS properties, hiding elements, showing them again, animating them, etc.
The jQuery object is what makes the jQuery library seem so magical – I hope you now better understand the jQuery object and a bit more about how the jQuery library works. Happy coding!
