jQuery.fn和jQuery.prototype区别介绍

jQuery.fn和jQuery.prototype都是jQuery库中常用的属性，但它们在实际使用中有些区别。下面，我将详细讲解它们的区别。

jQuery.fn

在jQuery 1.2版本之前，jQuery使用的属性是jQuery.fn。它是指jQuery对象的原型，是对jQuery库的扩展。在扩展时，我们可以将新方法或属性添加到该原型对象上，从而让这些方法或属性在jQuery对象实例中可用。

示例1：在jQuery.fn上添加一个新的方法，使得可以根据CSS类名来移除元素：

jQuery.fn.removeClassByClassName = function(className) {
  // 循环遍历所有元素，并在每个元素上调用减去CSS类名的方法
  this.each(function() {
    $(this).removeClass(className);
  });
}

示例2：在jQuery.fn上添加一个新的方法，使得可以将所有显示的元素隐藏：

jQuery.fn.hideAll = function() {
  this.filter(':visible').each(function() {
    $(this).hide();
  });
}

通过以上示例可以看出，我们可以使用jQuery.fn来扩展jQuery的功能，让新的方法或属性在jQuery对象实例中可用。

jQuery.prototype

在jQuery 1.2版本以及之后的版本中，jQuery使用的属性是jQuery.prototype。与jQuery.fn类似，jQuery.prototype也是指jQuery对象的原型，是对jQuery库的扩展。与jQuery.fn的区别在于，jQuery.prototype更接近于传统面向对象编程（OOP）中类的概念，它将jQuery库中的方法和属性封装到一个构造函数中，然后通过该构造函数创建对象实例。

示例1：使用jQuery的原型对象中的方法，创建一个新的构造函数MyjQuery，然后重新定义一个新方法并使用它：

function MyjQuery(selector) {
  // 使用jQuery的原型对象中的init方法来初始化对象实例
  return new jQuery.fn.init(selector);
}

// 在MyjQuery的原型对象中添加一个新的方法，用于发出警报
MyjQuery.prototype.alert = function() {
  alert('Hello World!');
}

var myJqueryObj = new MyjQuery('div');

// 调用MyjQuery对象实例的alert方法
myJqueryObj.alert();

示例2：再运用一下jQuery的原型对象中的方法和属性，在创建自己的jQuery插件时，请看以下示例：

(function($) {
  $.fn.myplugin = function(options) {
    var defaults = {
        color: 'red',
        fontSize: '12pt'
    };

    var settings = $.extend({}, defaults, options);

    return this.each(function() {
       $(this).css({
          color: settings.color,
          fontSize: settings.fontSize
       });
    });
  };
})(jQuery);

以上示例展示了如何在插件中使用jQuery的原型对象。$.fn是指向$.prototype的别名，也就是说，在一个闭包中，我们将jQuery作为参数传递，然后使用它来扩展jQuery的原型。

总结

综上所述，jQuery.fn和jQuery.prototype的区别如下：

• jQuery.fn是jQuery对象的原型对象，是对jQuery库的扩展；
• jQuery.prototype也是jQuery对象的原型对象，是对jQuery库的扩展，但它更接近于传统OOP编程中类的概念，通过它可以创建对象实例；
• 在实际使用中，我们可以使用jQuery.fn来扩展jQuery的功能，使新方法或属性在jQuery对象实例中可用。而在创建对象实例时，我们可以使用jQuery.prototype来定义构造函数和对象实例，并在插件中使用它来扩展jQuery的原型。