jQuery Object and DOM Element

I remember being struggling between these two concepts in myearly days of jQuery programming, like trying to get value from ajQuery object or call val() on a Dom object, it is not a big issuethough, people can get away with that one way or other, but a goodunderstanding will not only help us make fewer mistakes but alsomove 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.getElementByIdx_x();

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

jQuery object is a kind of wrapper of Dom object, with moreobject oriented aspects like methods, properties etc, anotherimportant reason we have one more layer to wrap Dom is to hide thedifferences between browsers. In other words when you use Domelement object model, browsers implementations are usually quietdifferent 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 seta 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 Domobject.

5. They can be converted to and from each other

1 2 3 4 5 6 7

//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 mostconfusing.

The keyword this refers to the DOM element to which the handleris bound, so ‘this’ is not a jQuery object, but it just one stepaway 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 eachunderlining element will be set, if getter is called on the set ofelements, only the property value of first element is returned,there are obvious ways to get to the property of other elementslike 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 areiterating, not to confuse ‘this’ with one in an event handler!