CleanCode NZ

I remember being struggling between these two concepts in my early days of jQuery programming, like trying to get value from a jQuery object or call val() on a Dom object, it is not a big issue though, people can get away with that one way or other, but a good understanding will not only help us make fewer mistakes but also move us into the advanced areas of jQuery programming.

1. What is a jQuery Object

Objects that are returned or constructed by jQuery()

2.What is a Dom Element

Elements that are retrieved like : document.getElementById();

3. Both jQuery object and Dom elements are objects, but they are DIFFERENT

jQuery object is a kind of wrapper of Dom object, with more object oriented aspects like methods, properties etc, another important reason we have one more layer to wrap Dom is to hide the differences between browsers. In other words when you use Dom element object model, browsers implementations are usually quiet different on many of them.

4. jQuery has very few properties and a lot of methods

There are only a handful of properties of a jQuery object:

.jquery,.context,.length,.selector

Nothing else, while it provides a lot of methods to get and set a property of underneath Dom, so like .val() to read and .val(somevalue) to set value of an element.

Properties like .name, .value are only available from a Dom object.

5. They can be converted to and from each other

//From jQuery object to Dom:

var domobject = jqueryObject.get();

//From Dom to jQuery object

var jqueryObject = jQuery(domobject);
 

6. Keyword ‘this’ in jQuery event handler

This is where the two cross each other and people found most confusing.

The keyword this refers to the DOM element to which the handler is bound, so ‘this’ is not a jQuery object, but it just one step away from making it into jQuery by using $(this)

7. jQuery object references to a set of elements

So when you call property setting, the property of each underlining element will be set, if getter is called on the set of elements, only the property value of first element is returned, there are obvious ways to get to the property of other elements like using .each() traversing the list, as usual the keyword ‘this’ is a Dom element.

If you are using $.each(collection, function(){}) , the key word ‘this’ in this case depends on what kind of collection you are iterating, not to confuse ‘this’ with one in an event handler!

Tags: JQuery