jquery 플러그인 제작 튜토리얼 txtHover

jquery 플러그인 제작 튜토리얼 txtHover_jquery

WBOY

풀어 주다： 2016-05-16 17:50:39

원래의

980명이 탐색했습니다.

플러그인의 구조적 골격 정의:
책에서 처음 사용된 구조적 골격은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
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 및 플러그인 참고, 코드는 다음과 같습니다. 

코드 복사

코드는 다음과 같습니다.

type="text/javascript" src="Scripts/jquery-1.4.1.min.js">

저자별 최신 기사