Javascript vs. Jquery: Initializing Modals. Fuction not recognized in JS, but in jQuery -

i using modals here http://materializecss.com/modals.html#! , have arbitrary question regarding replacement of jquery javascript.

i have function, executes document ready:

ready: function() {     $('.modal-trigger').leanmodal(); // line 1 works     document.queryselector(".modal-trigger").leanmodal(); // line not work } 

up until understanding jquery can replaced javascript, line 2 not work, because following error:

uncaught typeerror: document.queryselector(...).leanmodal not function 

am doing wrong in javascript? there better method replace

$('.modal-triger') 

?

it's jquery plugin. it's defined on prototype chain of jquery objects. it's not going work on raw dom node.

it's defined somewhere this:

$.fn.leanmodal = function () { ... }; 

which means works on jquery objects: $(...).

to expand:

$() used constructor function, creates new objects. objects in javascript inherit methods prototype chain.

$.fn alias jquery.prototype.

you can extend object's prototype @ time, , objects inherit prototype gain new method. extend node objects attaching method prototype.

node.prototype.leanmodal = (node.prototype.leanmodal || function () {    window.alert(document.body instanceof node);  });      document.body.leanmodal();

note: folk against modification of native prototypes (number, node, function, string, etc...). it's okay in modern browsers*, long sanely , don't override exists. all objects inherit object.prototype you'll want modify 1 carefully.

*the worry exists fact extending prototypes causes issues in ie6/7/8. using object.defineproperty safer method in ie8.