javascript - 如何调用自定义函数作为 jQuery 函数链的一部分

Question

这似乎是一件非常简单的事情，但我找不到一个 jQuery 函数来处理这个问题。

例如，

$('div').show().sayHi()

function sayHi(obj) {
    obj.html('hi')
}

sayHi() 不是 jQuery 函数，因此无法在此上下文中调用。你需要这样调用它:

var $div = $('div').show()
sayHi($div)

但我希望它成为链条的一部分，主要是因为它看起来更好。

解决方案:

Barmar 的回答最好地回答了这个具体问题，但我的实现是一个更可重用的选项，如 my answer below. 所示。

Answer 1

您可以添加自己的 jQuery 方法，方法是将其定义为 $.fn 的属性。所以你可以这样写:

$.fn.sayHi = function() {
  this.html('Hi');
  return this;
}

$("#click").click(function() {
  $("#foo").show().sayHi();
});

#foo {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">Click me</button><br>
<div id="foo"></div>

按照惯例，不返回与对象相关的信息的 jQuery 方法应该返回 this 以便它们可以继续链接。