Question

I’m looking at an example of how to use jqGrid, which is a jQuery plugin.

It’s drawing a grid in a div with an id of ‘list’.

It creates the grid with $('#list').jqGrid(...).

But it populates the grid with $('#list')[0].addJSONData(...).

I’ve been looking around the web for tutorials on jQuery, trying to understand the difference, and I’ve found nothing that addresses what is – to me – the most fundamental question in using it.

What does $() return? Does it return a jquery object that contains a DOM element? Does it return a jquery object that contains an array of DOM elements? Does it return a DOM element to which additional jQuery functions have been added?

And what then, is $()[0]? If $() returned a jQuery object that contained an array of DOM elements, I’d expect it to be the div with the id ‘list’, but addJSONData isn’t a DOM method, it’s a jqGrid method. Does jqGrid add that method to all of the DOM elements in the array?

===== ADDED ======

If $() returns a jquery object that contains an arrray of DOM objects, why does $()[0] refer to an object that contains an addJSONData method? addJSONData is not a DOM method, it’s a jqGrid method.

Answer 1

$() returns a collection of elements based on the selector. So $('.help') would return all elements with a class of .help. $('.help')[0] would give you the first element.