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

Question

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

例如，

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

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

sayHi()不是jQuery函数，因此不能在此上下文中调用。你需要这样称呼它：

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

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

解决方案：

Barmar 的回答最好地回答了这个特定问题，但我的实现是一个更可重用的选项，如下面的回答所示。

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以便它们可以继续链接。