>웹 프론트엔드 >JS 튜토리얼 >jquery_jquery의 확장 및 fn.extend 사용 지침

jquery_jquery의 확장 및 fn.extend 사용 지침

WBOY
WBOY원래의
2016-05-16 18:12:20902검색

jQuery는 플러그인 개발을 위한 두 가지 방법을 제공합니다.

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

jQuery.fn.extend(object);
jQuery.extend(object);


jQuery.extend(object); 클래스 메소드의 새로운 기능입니다.
jQuery.fn.extend(object); jQuery 객체에 메서드를 추가합니다.

fn이 뭐죠? jQuery 코드를 보면 찾기가 어렵지 않습니다.

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

jQuery.fn = jQuery. 프로토타입 = {
 init: function(selector, context) {//.... 
  //......
}


원본 jQuery.fn = jQuery.prototype. 당신은 확실히 프로토타입에 익숙하지 않습니다.

자바스크립트에는 클래스에 대한 명확한 개념이 없지만 클래스를 사용하여 이해하는 것이 더 편리합니다.
jQuery는 매우 잘 캡슐화된 클래스입니다. 예를 들어 $("#btn1") 문을 사용하면 jQuery 클래스의 인스턴스가 생성됩니다.

jQuery.extend(object); jQuery 클래스에 클래스 메소드를 추가합니다. 이는 정적 메소드를 추가하는 것으로 이해할 수 있습니다. 예:
코드 복사 코드는 다음과 같습니다.

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


는 jQuery에 "정적 메서드"를 추가합니다.
$.add(3,4); //return 7

jQuery.fn.extend(object); jQuery.prototype을 확장하려면 jQuery 클래스 "멤버 함수"에 추가하면 됩니다. jQuery 클래스의 인스턴스는 이 "멤버 함수"를 사용할 수 있습니다.
예를 들어, 특수 편집 상자를 생성하는 플러그인을 개발하고 싶습니다. 클릭하면 현재 편집 상자의 내용이 경고됩니다. 이렇게 할 수 있습니다:
코드 복사 코드는 다음과 같습니다:

$.fn. 확장({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
})
$("#input1").alertWhileClick() //페이지에서:
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.