>웹 프론트엔드 >JS 튜토리얼 >jQuery_jquery의 $.fn 사용 예 소개

jQuery_jquery의 $.fn 사용 예 소개

WBOY
WBOY원래의
2016-05-16 17:17:161212검색

$.fn은 jquery 네임스페이스와 fn의 메서드 및 속성을 참조하며 이는 모든 jquery 인스턴스에 유효합니다.
$.fn.abc()를 확장하면, 즉 $.fn.abc()가 abc 메서드를 사용하여 jquery를 확장하면 각 후속 jquery 인스턴스가 이 메서드를 참조할 수 있습니다.
그러면 가능합니다. $("#div").abc();

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

jQuery.extend(object); jQuery 클래스 자체. 클래스에 새 메서드를 추가합니다.
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){returna b;}
});

jQuery에 add라는 "정적 메서드"를 추가하면 jQuery가 있는 곳 어디에서나 이를 사용할 수 있습니다. 메소드,
$.add(3,4); //return 7

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

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

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

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