在 jQuery 中获取插件绑定到的元素？

Question

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

但要在头部添加样式，我需要定位用户将插件绑定到的实际元素。

例如：

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

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

Answer 1

$.myPlugin

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

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

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

$.fn 是完全可选的，以防万一用户忘记使用$.myPlugin(selector) 执行该功能，使用$().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

Answer 2

该字符串是对象的选择器属性：

$.fn.myPlugin = function(){
    console.log(this.selector);
}
$('#form .foo').myPlugin(); // logs '#form .foo'

但是使用它看起来是一种不好的做法（而且它也已被弃用，正如 charlietfl 指出的那样，有充分的理由）。你不应该需要它。要设置元素的样式，您可以直接做

$.fn.myPlugin = function(){
    this.css('color', 'red');
}

Answer 3

试试

$.fn.myPlugin = function(sel) {
  console.log(sel, $(this));
};
var selectors = ["input", "#form .foo"];
$(selectors[0]).myPlugin(selectors[0]); // I need to get the text "input"
$(selectors[1]).myPlugin(selectors[1]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<input type="text" />
<form id="form">
  <select class="foo" name="foo">
    <option value="abc">abc</option>
  </select>
</form>