Question

I’m trying to understand why something works the way it does in jQuery.
When I want to apply a jQuery extension, for example datatables, I run the command:

$("#some_id").datatables(.. parameters ..);

I don’t know why this works, obviously the DOM element didn’t have a method datatables() beforehand.

Thanks!

Answer 1

The reason for that is because you are not making this call on DOM element – you are making it on jQuery object that stores the information on the DOM objects it should influence.

And the reason .datatables() is available is that some plugin (probably DataTables) made it accessible in the way similar to this:

jQuery.fn.my_foo_func = function(){
    console.log(jQuery(this));
};

If you apply the above, you will be able to do something like that:

$("#some_id").my_foo_func();

which will pass to the console the jQuery object(s) on which you invoked it.

Is it clear enough?