jquery.fn

jQuery.fn 概述

jQuery.fn 是 jQuery 的核心属性之一，指向 jQuery.prototype，用于扩展 jQuery 对象的方法。通过 jQuery.fn 可以自定义插件或方法，所有 jQuery 实例均可调用这些扩展功能。

基本用法

通过扩展 jQuery.fn 添加自定义方法：

jQuery.fn.customMethod = function() {
  // 这里的 `this` 指向当前 jQuery 对象
  return this.each(function() {
    console.log(this); // 遍历的 DOM 元素
  });
};

// 调用
$('div').customMethod();

插件开发规范

1. 链式调用支持
   确保方法返回 this（jQuery 对象）以支持链式操作：

   jQuery.fn.highlight = function(color) {
     return this.css('background-color', color);
   };

2. 命名冲突处理
   使用闭包避免全局污染，并通过 noConflict 兼容其他库：

   (function($) {
     $.fn.pluginName = function() { /* ... */ };
   })(jQuery);

3. 默认参数与配置
   支持可配置的选项对象：

   jQuery.fn.tooltip = function(options) {
     const settings = $.extend({
       position: 'top',
       delay: 200
     }, options);
     // 实现逻辑
   };

实际应用示例

扩展一个简单的动画插件：

jQuery.fn.flash = function(duration, easing) {
  return this.fadeOut(duration, easing).fadeIn(duration, easing);
};

// 调用
$('#element').flash(500, 'linear');

注意事项

• 避免覆盖原生 jQuery 方法（如 show()、hide()）。
• 插件内部应正确处理空 jQuery 对象的情况（如 this.length === 0）。
• 使用 $.extend 合并配置对象时需注意深拷贝需求。

通过 jQuery.fn 扩展的方法会直接成为 jQuery 实例的成员，适合封装复用性高的 DOM 操作逻辑。