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

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

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

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

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

Answer 2

$。为myplugin

解决问题的推荐方法是使用this和下面介绍的其他方法。如果您需要将选择器作为字符串，则可以将该函数定义为jQuery（$）的子函数，并以与jQuery的＆amp; .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 3

尝试

＆＃13;

$.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]);

＆＃13;

<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>

＆＃13;

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

3 个答案:

$。为myplugin

其他替代