jQuery.fn은 무엇을 의미합니까?

jQuery.fn은 무엇을 의미합니까?

---

여기는 무엇을 fn의미합니까?

jQuery.fn.jquery

---

jQuery에서 fn속성은 속성의 별칭 일뿐 prototype입니다.

jQuery식별자 (또는 $) 단지이다 생성자 함수 , 생성자의 프로토 타입에서 상속 그것으로 생성 된 모든 인스턴스.

간단한 생성자 함수 :

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

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

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.fn의 속기 정의됩니다 jQuery.prototype. 로부터 소스 코드 :

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

즉 , 현재 jQuery 버전을 반환하는에 jQuery.fn.jquery대한 별칭입니다 jQuery.prototype.jquery. 다시 소스 코드에서 :

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

---

fn문자 그대로 jquery를 참조합니다 prototype.

이 코드 줄은 소스 코드에 있습니다.

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

But the real tool behind fn is its availability to hook your own functionality into jQuery. Remember that jquery will be the parent scope to your function, so this will refer to the jquery object.

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

So here is a simple example of that. Lets say I want to make two extensions, one which puts a blue border, and which colors the text blue, and I want them chained.

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

Now you can use those against a class like this:

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

(I know this is best done with css such as applying different class names, but please keep in mind this is just a demo to show the concept)

This answer has a good example of a full fledged extension.

---

In the jQuery source code we have jQuery.fn = jQuery.prototype = {...} since jQuery.prototype is an object the value of jQuery.fn will simply be a reference to the same object that jQuery.prototype already references.

To confirm this you can check jQuery.fn === jQuery.prototype if that evaluates true (which it does) then they reference the same object

참고URL : https://stackoverflow.com/questions/4083351/what-does-jquery-fn-mean