Javascript 与 Jquery : Initializing Modals. 函数在 JS 中无法识别，但在 jQuery 中

Question

我正在使用这里的一些模态 http://materializecss.com/modals.html# !我有一个关于用 javascript 替换 jquery 的任意问题。

我有这个函数，一旦文档准备好就会执行:

ready: function() {
    $('.modal-trigger').leanModal(); // line 1 works
    document.querySelector(".modal-trigger").leanModal(); // this line does not work
}

到目前为止，我的理解是 jQuery 可以替换为 Javascript，但第二行不起作用，因为我收到以下错误:

Uncaught TypeError: document.querySelector(...).leanModal is not a function

我的 Javascript 做错了什么吗？有没有更好的方法来替代

$('.modal-triger')

？

Answer 1

这是一个 jQuery 插件。它定义在 jQuery 对象的原型(prototype)链上。它不适用于原始 DOM 节点。

它的定义如下:

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

这意味着它仅适用于 jQuery 对象:$(...)。

展开:

$() 用作构造函数，它创建新对象。 JavaScript 中的对象从其原型(prototype)链继承方法。

$.fn 是 jQuery.prototype 的别名。

你可以随时扩展任何对象的原型(prototype)，所有继承该原型(prototype)的对象都将获得新的方法。您可以通过将方法附加到其原型(prototype)来扩展 Node 对象。

Node.prototype.leanModal = (Node.prototype.leanModal || function () {
  window.alert(document.body instanceof Node);
});


document.body.leanModal();

注意:有些人非常反对修改原生原型(prototype)(数字、节点、函数、字符串等)。在现代浏览器*中这样做是可以的，只要你理智地这样做并且不覆盖已经存在的东西。 所有对象都继承自Object.prototype，因此您需要格外小心地修改该对象。

*担心扩展某些原型(prototype)会导致 IE6/7/8 出现问题。在 IE8 中使用 Object.defineProperty 是稍微安全一些的方法。