jquery 플러그인 제작 튜토리얼 txtHover_jquery
- WBOY원래의
- 2016-05-16 17:50:39973검색
플러그인의 구조적 골격 정의:
책에서 처음 사용된 구조적 골격은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
jQuery.fn.fluginmane=function(){
return this.each(function(){
//code...
})
}
특히 책에서는 충돌을 방지하기 위해 $를 사용하지 않고 jQuery를 사용한다고 책에서 언급하고 있습니다. 여기서는 충돌 가능성을 방지하기 위해 익명 함수를 사용하여 플러그인의 구조적 골격을 구현합니다. 또한 모든 분들이 익명 기능에 대해 잘 이해하시기를 바랍니다.
코드 복사 코드는 다음과 같습니다.
(함수($){
$.fn .fluginname=function(){
return this.each(function(){
//코드...
})
}
})(jQuery);
1. 통일성과 표준화를 위해 플러그인 파일 이름은 jquery.fluginname.js 형식으로 지정됩니다(fluginname은 플러그인 이름을 나타냅니다).
2. 우리가 사용하는 기능은 비공개여야 하며 외부에서 접근할 수 없어야 합니다. 이는 플러그인이 외부 요인에 영향을 받거나 간섭을 받지 않도록 보장합니다(익명 기능이 이를 보장합니다).
3. 사용자가 옵션을 사용하여 플러그인 동작을 제어할 수 있도록 허용합니다.
4. 기본 옵션은 외부 접근을 허용하므로 사용자가 최소한의 코드로 맞춤 설정할 수 있습니다.
5.this.each()는 요구 사항을 충족하는 모든 개체를 순회합니다. 그 자체는 jquery 개체이며 플러그인은 최종적으로 개체를 반환합니다. 실제로 자바스크립트의 체인 모드는 이런 식으로 구현됩니다.
첫 번째 플러그인: txtHover
1. 코드 구현:
코드 복사 코드는 다음과 같습니다.
(function($){
$.fn.txtHover=function(){
return this.each(function(){
$(this).text( '텍스트가 변경되었습니다!');
})(jQuery)
html 파일을 생성하고 추가합니다. jquery 및 플러그인 참고, 코드는 다음과 같습니다.
$.fn.txtHover=function(){
return this.each(function(){
$(this).text( '텍스트가 변경되었습니다!');
})(jQuery)
html 파일을 생성하고 추가합니다. jquery 및 플러그인 참고, 코드는 다음과 같습니다.
코드 복사