如何定义jQuery函数

下面是关于如何定义 jQuery 函数的完整攻略。

定义 jQuery 函数

在 jQuery 中，我们可以通过两种方法来定义自己的函数：一种是通过 $.fn 添加方法，另一种是直接在 jQuery 对象上直接添加方法。

使用 $.fn 添加函数

通过 $.fn 来添加方法的形式如下：

$.fn.methodName = function(){
  // 方法实现
}

这里的 methodName 是我们要添加的自定义方法名，function(){} 是方法体，其中 this 指向当前 jQuery 对象。

例如，我们添加一个自定义方法用于隐藏元素：

$.fn.hideElem = function(){
  this.hide();
}

这个方法将会隐藏当前选中的所有元素，使用时只需要调用：

$('selector').hideElem();

直接在 jQuery 对象上添加函数

$ 对象本身就是一个函数，因此我们也可以直接在上面添加方法。这种方法是不会返回 jQuery 对象的，我们可以使用 return 来返回自定义的值或对象。

示例代码如下：

$.customFunc = function(options){
  var defaults = {
    foo: 'bar'
  };
  var settings = $.extend({}, defaults, options);
  console.log(settings.foo);
};

这个函数会打印出传递进来的 options 对象中的 foo 属性。这样我们就可以在 JS 代码中直接调用自定义函数：

$.customFunc({ foo: 'baz' });

这个例子将打印出 baz。

总结

通过上述示例，我们了解到了如何通过 $.fn 和 $ 对象直接添加自定义的 jQuery 函数，并且可以通过调用函数来实现我们需要的功能，这是扩展 jQuery 功能的非常实用的方法。