jQuery 확장 메소드 만들기

DOM 엘리먼트를 조작하는 확장 메소드를 추가할 수 있다. 확장 메소드로 추가하면 jQuery 셀렉터의 

기능을 사용할 수 있다. 

확장 메소드는 $ 네임스페이스의 fn이라는 이름을 가진 객체의 프로퍼티를 할당한다.

확장 함수 형식

$.fn.wrapperFunctionName = function(params){

// function body

};

확장 함수 예제

(function($){

$.fn.makeItBlue = function(){

return this.css('color', 'blue');

}

})(jQuery);

메소드 본문에서 함수 컨텍스트인 this는 확장 집합을 나타낸다.

함수 컨텍스트를 통해 미리 정의된 jQuery 메소드를 사용할 수 있다.

함수에 특정한 값을 반환할 의도가 없다면 반환 값으로 항상 확장 집합을 돌려줘야 한다.

(function($){

$.fn.someNewMethod = function(){

return this.each(function(){

$(this).css('color', $(this).is('[id]') ? 'blue' : 'red');

});

}

})(jQuery);

값으로 함수를 전달하면 확장 집합의 엘리먼트를 순회하며 함수를 호출한다.

(function($){

$.fn.someNewMethod = function(){

return this.css('color', function(){

return $(this).is('[id]') ? 'blue' : 'red';

});

}

})(jQuery);

확장 함수 사용

--- JS ---

(function($){

$.fn.setReadyOnly = function(readonly){

return this.filter('input:text')

.attr('readOnly', readonly)

.css('opacity', readonly ? 0.5 : 1.0)

.end();

};

})(jQuery);

--- HTML ---

$(function(){

$('#sameAddressControl').click(function(){

var same = this.checked;

$('#billingAddress input').setReadyOnly(same);

});

});

이미지 슬라이드 테스트 

jquery.jqia.photomatic.js