Question

我正在尝试从jquery扩展中获取dom元素。这让用户可以执行以下操作

如果我，

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

我想：

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

这是我想要实现的基本例子。虽然“this”不是Dom元素，但是myPlugin函数。

我如何访问#content？

的问候，

theHaggis

Answer 1

“标准”习语是使用each()方法：

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

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

Answer 2

示例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/

Answer 3

该功能（您的插件）已分配给myMethod，myMethod会调用myPlugin，因此执行时

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

“this”关键字将指向myPlugin。

您可以在此处查看更多信息：what does this refers to in javascript

你可以将你的方法放入你的插件中，并提供一种调用它的方法，比如

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

Answer 4

你可以使用closure和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!');

Nb：使用闭包比使用原型

更容易修改函数的范围

从jquery插件扩展获取Dom Element

4 个答案: