[Jquery] 오브젝트에 새로운 메서드 추가하기.

항상 플러긴을 분석하다보면 $.fn이 많이 등장하기 마련이다. 이 의미는 즉 Jquery.fn이라고도 볼 수 있는데 이것은 제이쿼리 오브젝트 객체속의 메서드(함수)객체를 의미한다고 해석할 수 있다.

여하튼 자바스크립트에서 함수를 선언할 땐 보통

1. function 이름 (인수1, 인수2, 인수3 ....) { } 

2. var 이름 = function () { };

이런식으로 선언하지만 함수와 메서드는 같으면서도 다르다. 함수의 경우 직접호출하여 실행할 수 있지만 특정 객체 내에 메서드가 된 것은 아니다. 메서드를 추가(?)하는 방법은

1. Object(또는 객채명).이름 = function() {  };

이정도로 생각할 수 있다. 하지만 자바스크립트에서 선언한 메서드와 제이쿼리에서 선언한 메서드는 서로 다르다. 즉 사용할 수가 없다. 그래서 생겨난 것이 바로

$.fn.이름 = function () {  };

이다.

예제 코드를 들자면

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $.fn.getArea = function () {
        return $(this).width() * $(this).height();
    };
    
    $("#area").html($("#area").getArea());
</script>
<style>
    div {
        height: 300px;
        width : 300px;
        background: #eeeeee;
</style>
<div id="area"></div>

이정도이다.