Question

你好。我想知道是否有可能只对某些类，类型，名称等元素进行原型设计。

例如：

$.fn.showRequiredError = function(){
    $(this).after('<p class="error">This field is required</p>');
});

如果我调用$（“＃xxx”），这个可以工作.showRequiredError（）;

现在我想知道是否可以将jquery的功能“扩展”到类的元素.required

所以例如它看起来像这样：

$(".required").fn.showRequiredError = function(){
    $(this).after('<p class="error">This field is required</p>');
});

我可以调用 ONLY $（“。required”）。showRequiredError（）;.
如果我调用$（“。somethingElse”）。showRequiredError（）;它什么都不做。

希望你理解。

P.S。：这种方法可以产生任何性能影响吗？

Answer 1

你可以这样做，虽然看起来有点奇怪，通常是程序员使用插件决定它将采取什么行动。

您可以使用filter：

来完成

$.fn.showRequiredError = function(){
    this.filter(".required").after('<p class="error">This field is required</p>');
    //  ^^^^^^^^^^^^^^^^^^^^--- the new bit

    // See "side note" below
    return this;
};

现在，插件所做的第一件事是过滤调用它的jQuery对象的内容，因此它们只包含.required个元素。

它会产生 非常小的 性能影响，无需担心。

示例：

$.fn.showRequiredError = function(){
  this.filter(".required").after('<p class="error">This field is required</p>');
  //  ^^^^^^^^^^^^^^^^^^^^--- the new bit

  // See "side note" below
  return this;
}; 

$("div").showRequiredError();

.required {
  color: blue;
}

<div class="foo">This doesn't have 'required'</div>
<div class="foo required">This does have 'required'</div>
<div class="required">So does this</div>
<div>But not this</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

附注1：请注意，在调用jQuery插件时，this是一个jQuery对象，因此编写$(this)是减少的（并且在运行时还有一些额外的工作）。

附注2：除非你还有别的东西需要返回，否则按照惯例，jQuery插件应返回this进行链接。

Answer 2

在这种情况下，我根本不理解选择器的用法。只需将函数添加到jQuery对象原型：

$.showRequiredError = function(){
    $(".required").after('<p class="error">This field is required</p>');
};

$.showRequiredError()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="required">
<input class="not-required">

Answer 3

所有jQuery对象都具有所有方法，因此您无法限制在任何给定的jQuery对象上调用的内容。

但是，您可以在方法中编写代码来决定是否执行任何操作。因此，您可以检查jQuery对象中的元素是否是正确的元素类型，如果没有，则不执行任何操作。

或者，如果你真的不对jQuery对象中的DOM元素进行操作，因为你已经知道它们是什么，那么也许你想要一个像$.showRequiredError这样的静态jQuery方法。

$.showRequiredError = function(){
    $(".required").after('<p class="error">This field is required</p>');
});

而且，您可以将其称为$.showRquiredError()。

jQuery - 原型只是类的元素

3 个答案: