JQuery 사용자 정의 플러그인 개발(둘)

JQuery 글로벌 함수 정의
다음은 JQuery에 대해 팝업 대화 상자를 위한 글로벌 함수를 정의합니다.

  
  
  
  

   
   
   
   
jQuery.globalfunction=function(){  
   
   
   
   
   alert("myplugin");  
   
   
   
   
} 
  
  
  
  

페이지에서 우리는 $을 통과할 수 있습니다.glabalfunction에서 JQuery를 호출할 때 여러 개의 전역 함수를 동시에 정의할 수 있습니다. 이것은 JQuery의 extend 방법이나 JQuery 전역 대상을 확장하는 방식으로 실현할 수 있습니다.extend 방법을 사용하면 함수 이름이 바뀔 수 있으므로 전역 대상을 확장하는 것을 예로 들겠습니다. 다음은 JQuery 전역 대상 myPlugin입니다. myPlugin에 두 개의 함수를 정의합니다.

  
  
  
  

   
   
   
   
jQuery.myPlugin={  
   
   
   
   
  functionOne:function(){  
   
   
   
   
    alert("functionOne");  
   
   
   
   
  },  
   
   
   
   
  functionTwo:function(param){  
   
   
   
   
    alert("functionTwo and param"+param);  
   
   
   
   
  }  
   
   
   
   
} 
  
  
  
  

페이지에서 우리는 $을 통과할 수 있습니다.myPlugin.functionOne () 에서 함수 1을 $.myPlugin.함수 2를 호출하기 위해 functionTwo(param)
JQuery 객체 함수 정의
JQuery 대상 함수의 강점은 JQuery 플러그인 방법의 내부에 있다.this는 현재의 JQuery 대상을 인용하기 때문에this에 내장된 JQuery 방법을 호출하거나 그 안에 포함된 DOM 노드를 추출하여 이 노드를 조작할 수 있다.이전 로그를 통해 JQuery 실례 대상이 JQuery 대상의 원형을 계승하는 것을 알았기 때문에 JQuery 대상 함수를 확장하려면 JQuery가 필요합니다.fn에서 작업을 수행합니다.다음은 JQuery 인스턴스 객체에 메소드 myMethod 팝업 대화 상자를 추가합니다.

  
  
  
  

   
   
   
   
jQuery.fn.myMethod=function(){  
   
   
   
   
    alert("myMethod");  
   
   
   
   
} 
  
  
  
  
  

$("#id")를 통과할 수 있습니다.myMethod 를 호출합니다.다음은 JQuery 객체 함수 내부this의 역할을 보여 줍니다.먼저 페이지에 다음과 같은 구성 요소를 추가합니다.

  
  
  
  

   
   
   
   
<form name=fm> 
   
   
   
   
           <ul> 
   
   
   
   
              <li class="this">  </li> 
   
   
   
   
              <li class="that">  1</li> 
   
   
   
   
              <li class="this">  2</li> 
   
   
   
   
            </ul> 
   
   
   
   
            <input type="button" value="    " id="swapClass"/> 
   
   
   
   
    </form> 
  
  
  
  

스타일 추가

  
  
  
  

   
   
   
   
.this{  
   
   
   
   
     font-style: normal;  
   
   
   
   
   }  
   
   
   
   
   .that{  
   
   
   
   
     font-style: italic;  
   
   
   
   
   }   
  
  
  
  

우리가 필요로 하는 효과는 클릭해서 스타일을 바꾸면 this 스타일을 사용하는 요소 스타일을 that로 바꾸고 that 스타일을 사용하는 요소 스타일을 this로 바꾸는 것입니다.이제 JQuery 객체 함수를 추가하여 JQuery 객체 함수를 추가합니다.

  
  
  
  

   
   
   
   
jQuery.fn.swapClass=function(class1,class2){  
   
   
   
   
    this.each(  
   
   
   
   
       function(){  
   
   
   
   
        var $element=jQuery(this)       
   
   
   
   
        if($element.hasClass(class1)){  
   
   
   
   
            $element.removeClass(class1).addClass(class2);  
   
   
   
   
        }else if($element.hasClass(class2)){  
   
   
   
   
            $element.removeClass(class2).addClass(class1);  
   
   
   
   
        }  
   
   
   
   
     });      
   
   
   
   
} 
  
  
  
  

버튼에 바인딩하는 방법

  
  
  
  

   
   
   
   
<script type="text/javascript">  
   
   
   
   
            window.onload=function(){  
   
   
   
   
                $("#swapClass").click(function(){  
   
   
   
   
                   $("li").swapClass("this","that");  
   
   
   
   
                });   
   
   
   
   
                showBox();   
   
   
   
   
             }   
   
   
   
   
    </script>    
  
  
  
  

이렇게 하면 이 효과를 실현할 수 있다.주의해야 할 것은 플러그인을 정의하는 방법에서this의 운용,this.each의this는 실례화된 JQuery 대상입니다. 여기에는 모든 "li"라벨이 있고, 매번this입니다.each 메소드의 this는 DOM 요소입니다.
JQuery 객체 함수를 정의하는 방법은 다음과 같습니다.

  
  
  
  

   
   
   
   
(function($) {  
   
   
   
   
    $.fn.myPluginName = function() {  
   
   
   
   
        // your plugin logic  
   
   
   
   
    };  
   
   
   
   
})(jQuery); 
  
  
  
  

이러한 방법으로 사용자 정의 플러그인 방법 내부에서 $키워드를 사용하여 JQuery 키워드를 대체할 수 있습니다.그렇다면 이런 글쓰기가 낯설지 않을까요? 다음 로그는 자바스크립트의 익명 함수와 클립을 소개하는 문구를 삽입할 것입니다.