从jQuery插件扩展中获取DOM元素

Question

我将尝试从jQuery扩展中获取DOM元素。这使得用户可以执行以下操作：

如果我，

("#content").myPlugin.myMethod(myValue);

i would like to:

$.fn.myPlugin.myMethod = function (myValue) { $(this).html(myValue); }

这是我尝试实现的基本示例。虽然“this”不是Dom元素，而是myPlugin函数。

我如何访问#content？

祝好，

theHaggis

- theHaggis

Answer 1

“标准”的做法是使用each()方法：

$.fn.myMethod = function(myValue) {
    return this.each(function() {
        $(this).html(myValue);
    });
};

这样做，您既可以支持包含多个元素的jQuery对象，又可以同时实现链接操作。

- Frédéric Hamidi

---

我遇到的问题是：this = function()，它是$.fn.myPlugin函数。因此，它不能在Dom元素上循环。 - theHaggis

确实，我没有注意到你在$.fn之后添加了一个中间对象。我认为jQuery实际上并不支持在$.fn命名空间中使用myPlugin.myMethod这样的东西。你有没有可能切换到通常的$.fn.myMethod结构？ - Frédéric Hamidi

我猜，也许如果我需要访问DOM元素，它不应该是一个扩展。但是我从$.fn.myPlugin调用了$.fn.myPlugin.myMethod，认为让所有用户都能调用该方法很酷。 - theHaggis

如果您从 $.fn.myPlugin() 调用到 $.fn.myPlugin.myMethod()，您可以使用 apply() 来传递上下文。这样，this 关键字在两个函数中都将引用相同的对象。 - Frédéric Hamidi

是的，我使用这个"$ .fn.myPlugin.myMethod.call(this, myValue);"，它在myPlugin中运行良好。但是，如果我从插件外部调用该方法，我得不到我想要的行为。感谢您的帮助。 - theHaggis

Answer 2

函数（您的插件）被分配给myMethod，并且myMethod由myPlugin调用，因此当您执行时

$("#content").myPlugin.myMethod(myValue);

“this”关键字将指向myPlugin。

您可以在此处查看更多信息：JavaScript中的“this”是什么意思

您可以将自己的方法放入插件中，并提供一种调用它的方式，例如

$("#content").myPlugin('myMethod',parametersArray);

- YuC

Answer 3

示例 1

要获取插件中使用的选择器，请使用以下代码：

this.selector

例子：

$.fn.myPluginMethod = function(myValue) {
    $(this.selector).html(myValue);
}

$("#content").myPluginMethod("Hello World");

范例演示：http://jsfiddle.net/nJeeH/

例子2

唯一的其他解决方案是创建一个伪造的 myPlugin 方法，它只返回 jQuery 对象以保持链式调用，但这并不能防止你直接使用 $("#content").myMethod("Hello World");。

$.fn.myPlugin = function(myValue) {
    return this;
}

$.fn.myMethod = function(myValue) {
    this.each(function() {
        $(this).html(myValue);
    });
}

$("#content").myPlugin().myMethod("Hello World");

演示代码：http://jsfiddle.net/nJeeH/1/

- Jeff Wilbert

---

不好的想法。你让jQuery两次匹配元素，在插件的上下文中，this已经指向了一个jQuery对象（例如，this.html(myValue)是有效且更快的方法）。 - Camilo Martin

请注意，在jQuery 3中，this.selector将会失效。 - thdoan

Answer 4

您可以使用闭包和bind（）原语来修改JS中函数的作用域：

var myMethod = function (myValue) { $(this).html(myValue); }

$.fn.myPlugin = function() {
    var jq = this;
    return {
        myMethod : myMethod.bind(jq)
    }
}
$("#content").myPlugin().myMethod('eh oh!');

注意：使用闭包修改函数的作用域比使用原型更容易。

- Etienne