Pesquisa de site

javascript - O que significa jQuery.fn?

O que o fn aqui significa?

jQuery.fn.jquery

Resposta #1

No jQuery, a propriedade fn é apenas um alias para a propriedade prototype.

O identificador jQuery (ou $) é apenas uma função construtora, e todas as instâncias criadas com ele herdam do protótipo da função construtora.

Uma função construtora simples:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property

Uma estrutura simples que se assemelha à arquitetura do jQuery:

(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}
    //...
  };

  // expose the library
  window.foo = foo;
})();

// Extension:

foo.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

foo("bar").myPlugin(); // alerts "bar"

Resposta #2

fn se refere literalmente ao prototype do jQuery.

Esta linha de código está no código-fonte:

jQuery.fn = jQuery.prototype = {
 //list of functions available to the jQuery api
}

Mas a verdadeira ferramenta por trás de fn é sua disponibilidade para conectar sua própria funcionalidade ao jQuery. Lembre-se de que o jQuery será o escopo pai da sua função, então this se referirá ao objeto jQuery.

$.fn.myExtension = function(){
 var currentjQueryObject = this;
 //work with currentObject
 return this;//you can include this if you would like to support chaining
};

Então aqui está um exemplo simples disso. Digamos que eu queira fazer duas extensões, uma que coloca uma borda azul, e outra que colore o texto de azul, e eu quero que elas sejam encadeadas.

Demo jsFiddle

$.fn.blueBorder = function(){
 this.each(function(){
  $(this).css("border","solid blue 2px");
 });
 return this;
};
$.fn.blueText = function(){
 this.each(function(){
  $(this).css("color","blue");
 });
 return this;
};

Agora você pode usá-los contra uma classe assim:

$('.blue').blueBorder().blueText();

(Eu sei que isso é melhor feito com CSS, como aplicando diferentes nomes de classe, mas por favor, tenha em mente que isto é apenas uma demonstração para mostrar o conceito)

Esta resposta tem um bom exemplo de uma extensão completa.

Resposta #3

jQuery.fn é definido como uma abreviação para jQuery.prototype. Do código-fonte:

jQuery.fn = jQuery.prototype = {
    // ...
}

Isso significa que jQuery.fn.jquery é um alias para jQuery.prototype.jquery, que retorna a versão atual do jQuery. Novamente, a partir do código-fonte:

// The current version of jQuery being used
jquery: "@VERSION",

Resposta #4

O $.fn é um alias para jQuery.prototype, o que permite que você estenda o jQuery com suas próprias funções.

Por exemplo:

 $.fn.something = function{}

permitirá que você use

$("#element").something()

O $.fn também é sinônimo de jQuery.fn.

Artigos relacionados