* jQuery 플러그인
jQuery의 기능을 확장하여 사용자 정의 함수를 추가하는 방식. ( jQuery의 프로토타입 )
$.fn 객체를 사용하여 인스턴스 메소드를 정의하고, jQuery 객체의 메서드처럼 호출해서 사용.
쉽게 말해 내가 원하는 jquery함수를 만들어 사용할 수 있는거다.
( jQuery 플러그인 정의 )
$.fn 객체에서 사용자 정의 메소드 'highlight' 추가
$.fn.highlight = function(color) {
color = color || 'yellow';
this.css('background-color', color);
// jQuery 체이닝을 위해 this 반환
return this;
};=> 여기에서 this는 호출된 jQuery 객체를 참조.
=> jQuery의 체이닝 방식을 활용하기 위해 this를 return.
( jQuery 플러그인 활용 )
<body>
<div class="highlight">This will be highlighted in yellow.</div>
<div class="custom-color">This will be highlighted in light blue.</div>
</body>
// 생략
<script>
$(document).ready(function() {
// 사용자 정의 플러그인 호출
$('.highlight').highlight();
// 사용자 정의 플러그인 호출 + 체이닝
$('.custom-color').highlight('lightblue').css('font-weight', 'bold') ;
});
</script>=> jquery 메서드처럼 호출. (체이닝으로 연속해서 다른 메서드 호출도 가능.)
** jquery 플러그인을 활용하면 선택자 $() 를 통해 선택한 DOM 요소에 대해 직접적인 처리가 가능. **
'JavaScript > 공부공부' 카테고리의 다른 글
| [JS] addEventListener vs onclick (0) | 2024.11.06 |
|---|---|
| [JS] new 연산자, 프로토타입 객체 (0) | 2024.11.05 |
| [JS] FormData 객체 (0) | 2024.11.05 |
| [JS] 페이지 이동( location.replace / location.href ) (0) | 2024.10.23 |
| [JS] sort(), localeCompare() 함수 (문자열비교) (0) | 2024.08.19 |