jQuery 플러그인 개발의 두 가지 방법과 $.fn.extend_jquery에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery 플러그인 개발의 두 가지 방법과 $.fn.extend_jquery에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 17:03:24

원래의

1032명이 탐색했습니다.

jQuery 플러그인 개발에는 두 가지 유형이 있습니다.

1 클래스 수준

클래스 수준은 jquery 클래스를 확장하는 것으로 이해될 수 있습니다. 가장 확실한 예는 $.ajax(...)입니다. , 이는 정적 메서드와 동일합니다.

메소드를 개발하고 확장할 때 $.extend 메소드, 즉 jQuery.extend(object)를 사용하세요.

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

 
$.extend({ 

add:function(a,b){return a b;} , 

minus:function(a, b){return a-b;} 
})

페이지에서 호출:

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

 
var i = $.add(3,2) 
var j = $.minus(3,2) ); 

2 객체 수준

객체 수준은 $("#table").changeColor(...); 여기서 ChangeColor는 객체 기반 확장입니다.

해당 메소드를 개발하고 확장할 때 $.fn.extend 메소드, 즉 jQuery.fn.extend(object)를 사용하세요.

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

 
$.fn.extend({ 

check:function(){ 
return this.each ({ 
this.checked=true; 
}); 
}, 
uncheck:function(){ 
return this.each({ 
this.checked=false; 
}); 
} 
}); 

페이지에서 전화:

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

$('input[type=checkbox]').check() 
$('input[type=checkbox]') .uncheck();

3. Extension

코드 복사 🎜>

$.xy = {

add:function(a,b){return a b;} , 
minus:function(a,b){return a-b;}, 
 voidMethod:function(){ 경고("void"); 
}; 
var i = $.xy.add(3,2) 
var m = $.xy.minus(3, 2) 
$.xy.voidMethod() 