Question

我正在开发我的第一个jQuery插件，但希望它以与通常略有不同的方式工作。我将首先解释它的目的：

非常简单，＆lt; input＆gt;指定了title属性的字段将使用属性中的值填充输入框，关注输入字段将删除该值并允许用户在框中键入。

我知道这不是新事物，可能之前完成了100次，但它更多的是学习曲线而不是最终结果。

所以，到目前为止，我已经用两种方式工作了，第一种方法是将代码调用到特定元素上：

$('input').fillForm();

另一种方法涉及在插件中使用选择器（指定为选项），它将在页面上找到具有特定类的所有元素并运行该函数：

$().fillForm(); // Called from the document load

$('.fillForm').each(function () {... // Within the plugin

我的问题是，有没有办法检测用户是否指定了一个选择器：$（'input'）。fillForm（）;该位以粗体突出显示。

这样，如果他们没有，那么我可以告诉它使用默认的css选择器。

以下是我的代码的小提琴：http://jsfiddle.net/chricholson/HwkRw/

那里有两个版本，交换评论以试用另一种方法。

Answer 1

我不确定完全你在追求什么，但你可以像这样访问构造的jQuery对象的选择器属性：

console.log($("input").selector); // "input"

在插件中，您可以执行以下操作：

$.fn.myPlugin = function() {
    console.log(this.selector);
}

$("p").myPlugin(); // "p"

Answer 2

可能更好地处理您要执行的操作：设置默认设置并在需要时覆盖它：

(function ($) {
    $.fillForm = function (args) {

        var options = {
            selector : '.fillForm'
        }

        $.extend(options, args);

        alert(options.selector);

        $(options.selector).each(function () {
            var input = $(this);

            input.val(input.attr('title'));

            input.focus(function () {
                if (input.val() == input.attr('title')) {
                    input.val('');
                } else {
                    setTimeout(function () { input.select(); }, 10);
                }
            });

            input.blur(function () {
                if (input.val() == "") {
                    input.val(input.attr('title'));
                }
            });
        });

    };
})(jQuery);

$(document).ready(function () {

    $.fillForm({'selector' : '.foo'});

});

这里的工作示例：http://jsfiddle.net/82t3K/

Answer 3

在根jQuery对象（而不是fn命名空间）上创建一个方法，可以在没有选择器的情况下调用该方法。

(function($) {
    var defaultSelector = '.fillForm';

    // Use fillForm with your own selector.
    $.fn.fillForm = function() {
        // Blah blah blah.
    };

    // Use fillForm with the default selector.
    $.fillForm = function() {
        $(defaultSelector).fillForm();
    };
})(jQuery);

现在，您可以使用$.fillForm()调用您的插件，这是一种更常见的模式。

Answer 4

为什么不使用标准的"placeholder"属性并写一个利用它的后备？或者更好的是，使用已编写的众多后备中的一个？到目前为止，每个答案都给出了不同程度的错误建议。

对于您的任务，我建议使用Mike Taylor（来自Opera）编写的html占位符后备：jQuery-html5-placeholder。或者至少，用他的作品激励你自己。

Answer 5

jQuery对象具有可以使用的.selector属性。以下是一个示例http://jsfiddle.net/Akkuma/CGFpC/

如果创建一个空的jQuery对象$().selector;将等于一个空字符串。如果您决定将其转换为jQuery UI Widget，则无法仅通过this.element.selector访问它。

检测是否指定了选择器

5 个答案: