Apa arti jQuery.fn?

Apa artinya di fnsini?

jQuery.fn.jquery

Di jQuery, fnproperti hanyalah alias ke prototypeproperti.

The jQueryidentifier (atau $) hanya fungsi konstruktor , dan semua contoh dibuat dengan itu, mewarisi dari prototipe konstruktor.

Fungsi konstruktor sederhana:

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

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

Struktur sederhana yang menyerupai arsitektur 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"

jQuery.fndidefinisikan singkatan untuk jQuery.prototype. Dari kode sumber :

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

Itu berarti jQuery.fn.jqueryalias untuk jQuery.prototype.jquery, yang mengembalikan versi jQuery saat ini. Lagi dari kode sumber :

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

fnsecara harfiah mengacu pada jquery prototype.

Baris kode ini ada dalam kode sumber:

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

Tetapi alat yang sebenarnya di belakang fnadalah ketersediaannya untuk menghubungkan fungsionalitas Anda sendiri ke jQuery. Ingatlah bahwa jquery akan menjadi lingkup induk untuk fungsi Anda, jadi thisakan merujuk ke objek jquery.

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

Jadi di sini adalah contoh sederhana dari itu. Katakanlah saya ingin membuat dua ekstensi, satu yang menempatkan batas biru, dan yang warna teks biru, dan saya ingin mereka dirantai.

jsFiddle Demo

$.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;
};

Sekarang Anda bisa menggunakan itu terhadap kelas seperti ini:

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

(Saya tahu ini paling baik dilakukan dengan css seperti menerapkan nama kelas yang berbeda, tapi harap diingat ini hanya demo untuk menunjukkan konsepnya)

Jawaban ini memiliki contoh bagus tentang ekstensi penuh.

Dalam kode sumber jQuery yang kita miliki jQuery.fn = jQuery.prototype = {...}sejak itu jQuery.prototypeadalah sebuah objek nilai jQuery.fnhanya akan menjadi referensi ke objek yang sama yang jQuery.prototypesudah referensi.

Untuk mengonfirmasi ini, Anda dapat memeriksa jQuery.fn === jQuery.prototypeapakah yang mengevaluasi true(yang ia lakukan) maka mereka merujuk objek yang sama