javascript - 在 jQuery 中获取插件绑定(bind)的元素？

Question

我一直在制作我的第一个 jQuery 插件，我需要通过样式标签在 head 中添加一些 CSS，就像在被注入(inject)的元素上执行内联 css脚本在 IE8 - 10 中有一些奇怪的错误。

但要在头部添加样式，我需要将用户绑定(bind)插件的实际元素作为目标。

例如:

$('input').myPlugin(); // I need to get the text "input"
$('#form .foo').myPlugin(); // I need to get the text "#form .foo"

是否可以在插件中获取这些数据？

Answer 1

$.我的插件

解决问题的推荐方法是使用 this 和下面描述的其他方法。如果您需要将选择器作为字符串，您可以将该函数定义为 jQuery ($) 的子项，并以与 jQuery 的 &.ajax 和 $.extend 类似的方式执行该函数。它正在做的是使它成为 jQuery 的子项和 $.fn 的子项，因此它仍然可以“分类”为常规 jQuery 插件或 jQuery 的原型(prototype)。当您旧将插件设置为 $.fn 时，它被设置为 jQuery 的原型(prototype)，因此您必须运行 jQuery 函数。我们在这里这样做，但因为函数也是对象，我们可以将该函数设置为 $.myPlugin 使其仍然是 jQuery 的一部分，但阻止用户输入选择器两次。由于 this.selector 已被弃用(并且它可能很快就会被删除)，它比通过函数运行它来生成选择器要好。

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

$.myPlugin('#selector'); //Logs: '#selector

The $.fn is completely optional and is there just in case a user forgets to execute the function using $.myPlugin(selector) the function will still work when using $().myPlugin(selector)

其他选择

如果不需要字符串，我建议使用 jQuery 的 .filter()或类似函数 ( here ) 以及 $(this)。

$.fn.myPlugin = function () {
    var $this = this;
    var filteredElements = $this.children('a');//

    console.log(filteredElements);
} 
$('#form .class').myPlugin();
//Logs: children that are <a> of #form .class