JOuery Object vs Element Object

Question

Can anyone tell me the difference between the objects that the following lines return?.

The first line I know returns the Element Object with ID = "divID". I thought that the second did the same but the resulting objects act differently from one another..

In other words I thought that domObject was equivalent to jqObject...

var domObject = document.getElementById("rowID");
var jqObject = $("#rowID");

Technically your second example won't do bupkis since you're missing quotes around the identifier. — j08691, Apr 04 '14 at 17:29
$("#rowID") will return that element but with a jquery object wrapping it... they refer to the same element but the jquery object is a bit easier to work with in general... — user3334690, Apr 04 '14 at 17:30
They'd be the same if your second example was `var jqObject = $('#rowID')[0];` — j08691, Apr 04 '14 at 17:31

score 1 · Answer 1 · answered Apr 04 '14 at 17:33

The difference is that one is a jQuery object, and the other is not. jQuery objects have their own methods.

However, they are intraconvertible. You can extract a single DOM element from the jQuery object by using .get() or just [number]:

var domObject = $jqObject[0];

To do the reverse, just wrap it in the jQuery function:

var $jqObject = $(domObject);

score 0 · Answer 2 · answered Apr 04 '14 at 17:29

0

The first returns a DOMElement using the browser's built-in methods. - Javascript

The second returns a jQuery object with that row as its only member. You can use jQuery functions on the object to manipulate it. - Jquery

answered Apr 04 '14 at 17:29

pj013

1,393
1
10
28

Travis J · Answer 3 · 2014-04-04T17:37:49.283

var domObject = document.getElementById("rowID");

This will return an object which exposes the native javascript API (as defined by the current ECMAScript Specification) and the DOM API (details available at w3.org).

var jqObject = $("#rowID");

This will return an object which exposes the jQuery API. jQuery creates an object with a set of functions available. It also uses an indexed array on that object which holds the set of matched elements to the selector. The selector used matches css selectors, in this case matching the id "rowID", if it were to match a class, '.rowClass', then it will return a set of elements in the array matching that class. These elements can be accessed via index on the jquery object, jqObject[0] being the first, [1] the second (if present) etc.

Extracting the element in this fashion will return the native element. This native element can be referenced in many different ways. For example, it is usually assign to the this variable.

$("#rowID").each(function(){
 var nativeElement = this;//same as domObject
});

or

$("#rowId").click(function(){
 var nativeElement = this;//same as domObject
});

score -1 · Answer 4 · answered Apr 04 '14 at 17:29

-1

They should be the same, the problem could be that you do not have quotes around #rowID

Try this: var jqObject = $("#rowID");

answered Apr 04 '14 at 17:29

Brad Faircloth

337
1
7

JOuery Object vs Element Object

4 Answers4