jquery 플러그인 개발 방법 요약_jquery

jQuery는 플러그인 개발을 위한 두 가지 방법을 제공합니다.
jQuery.extend(object);
jQuery.extend(object); . 클래스에 새 메서드를 추가합니다.
jQuery.fn.extend(object); jQuery 객체에 메서드를 추가합니다.
fn이 뭐예요? jQuery 코드를 보면 찾기가 어렵지 않습니다.

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

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....　
　 //......
}

원본 jQuery.fn = jQuery. 프로토타입. Right 프로토타입은 분명 여러분에게 친숙할 것입니다.
자바스크립트에는 클래스에 대한 명확한 개념이 없지만 이를 이해하려면 클래스를 사용하는 것이 더 편리합니다.
jQuery는 매우 잘 캡슐화된 클래스입니다. 예를 들어 $("#btn1") 문을 사용하면 jQuery 클래스의 인스턴스가 생성됩니다.
jQuery.extend(object); jQuery 클래스에 클래스 메소드를 추가합니다. 이는 정적 메소드를 추가하는 것으로 이해할 수 있습니다. 예:

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

$.extend({
　add: ​​function(a,b){return a b;}
});

jQuery에 add라는 "정적 메서드"를 추가하면 jQuery가 있는 곳 어디에서나 사용할 수 있습니다. 메소드,
$.add(3,4); //return 7
jQuery.fn.extend(object); jQuery.prototype을 확장하려면 jQuery 클래스에 "멤버 함수"를 추가해야 합니다. jQuery 클래스의 인스턴스는 이 "멤버 함수"를 사용할 수 있습니다.
예를 들어, 특수 편집 상자를 생성하는 플러그인을 개발하고 싶습니다. 클릭하면 현재 편집 상자의 내용이 경고됩니다. 다음을 수행할 수 있습니다.
Java 코드

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

$.fn .extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
} );
}
})
$("#input1").alertWhileClick(); //페이지에서: 🎜>$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
})
$("#input1").alertWhileClick() //페이지에서:


$("#input1")은 jQuery 인스턴스입니다. AlertWhileClick 멤버 메서드를 호출하면 클릭할 때마다 편집기에 현재 콘텐츠가 팝업됩니다.

물론 실제 개발 과정에서는 이런 초보 플러그인을 만들지 않을 것입니다. 실제로 jQuery는 풍부한 작업 문서, 이벤트, Ajax 및 효과 방법을 제공하여 이러한 방법을 결합하여 개발할 수 있습니다. 더 많은 Niubility 플러그인.