[jQuery] $.fn의 개념과 사용 방법

오늘은 jQuery에서 사용되는 `fn`에 대해 자세히 알아보려고 합니다. `fn`은 jQuery에서 프로토타입 객체에 접근하기 위해 사용되는 속성입니다. 이번 글에서는 프로토타입 객체의 의미와 `fn`의 활용에 대해 알아보도록 하겠습니다.

 

 

 

 

 

 

 

 

프로토타입 객체란 어떤 객체를 생성할 때 해당 객체의 기본 틀로 사용되는 객체입니다. 즉, 프로토타입 객체는 생성자 함수를 통해 새로운 객체를 만들 때 그 객체에 상속되는 속성과 메서드를 가지고 있습니다. (기본 값)

 

 

 

 

jQuery에서는 `$` 기호를 통해 jQuery 함수를 호출하면 프로토타입 객체를 반환하게 됩니다. `fn`은 이 프로토타입 객체에 접근하기 위한 속성으로, 해당 객체를 확장하고 사용자 정의 메서드를 추가하는 기능을 제공합니다. 즉, `fn`을 이용하여 jQuery 객체에 새로운 동작을 추가하거나 기존 동작을 확장할 수 있습니다. (자바에서 추상 클래스와 비슷하다 생각이 들기도 합니다.)

 

 

 

 

 

이를 통해 jQuery 객체를 조작하고 사용자의 요구에 맞게 기능을 확장하는 것이 가능해집니다.

예를 들어, 다음과 같이 `fn`을 사용하여 간단한 플러그인을 작성할 수 있습니다

 

 

 

 

$.fn.customPlugin = function() {
  // 플러그인의 동작을 정의하는 코드
  // 예: 각 요소에 대한 특정 작업 수행
};

// 사용 예제
$('.myElement').customPlugin();

 

 

 

 

위 코드에서 `$.fn.customPlugin`은 `fn` 속성을 통해 프로토타입 객체에 새로운 메서드인 `customPlugin`을 추가하는 것을 의미합니다. 이제 `.myElement` 클래스를 가진 요소에 `customPlugin` 메서드를 호출하여 특정 작업을 수행할 수 있습니다. 이와 같이 `fn`을 사용하면 jQuery 객체에 새로운 동작을 추가하거나 확장할 수 있으므로, 유연하고 개인화된 기능을 구현할 수 있습니다.

 

 

 

 

---

 

jQuery를 이용해 원하는 요소에 특정한 기능을 추가하고 싶은 경우

 

jQuery 프로토타입 객체(=$.fn) 에 메서드를 추가해 손쉽게 기능을 추가해 보시기 바랍니다.

 

---

 

 

 

 

참조 : API 공식 문서

https://api.jquery.com/

jQuery API Documentation