jQuery
플러그인

플러그인 - 시작하기

프로토 타입에 jQuery API를 추가하여 확장 할 수 있습니다. 예를 들어, 기존 API에는 .hide() , .fadeIn() , .hasClass() 등과 같은 많은 함수가 이미 있습니다.

jQuery 프로토 타입은 $.fn 통해 $.fn 되며, 소스 코드에는

jQuery.fn = jQuery.prototype

이 프로토 타입에 함수를 추가하면 생성 된 jQuery 객체에서 해당 함수를 호출 할 수 있습니다 (jQuery를 호출 할 때마다 또는 원하는 경우 $를 호출 할 때마다 암시 적으로 수행됩니다).

생성 된 jQuery 객체는 전달 된 선택자를 기반으로 내부 요소 배열을 보유합니다. 예를 들어, $('.active') 는 호출 할 때 활성 클래스가있는 요소를 보유하는 jQuery 객체를 생성합니다 (이 요소는 라이브 요소 집합이 아닙니다).

플러그인 함수 내부 this 값은 생성 된 jQuery 객체를 참조합니다. 결과적 this 은 일치하는 집합을 나타내는 데 사용됩니다.

기본 플러그인 :

$.fn.highlight = function() {
    this.css({ background: "yellow" });
};

// Use example:
$("span").highlight();

jsFiddle 예제

연결 가능성 및 재사용 성

위의 예제와 달리 jQuery 플러그인은 Chainable 이 될 것으로 예상됩니다.
이것이 의미하는 것은 여러 메소드를 $(".warn").append("WARNING! ").css({color:"red"}) 와 같은 요소 컬렉션에 연결하는 것입니다 $(".warn").append("WARNING! ").css({color:"red"}) (어떻게 사용했는지보십시오 .css() .append() 후에 .css() 메서드를 .append() 하면 두 메서드 모두 동일한 .warn 컬렉션에 적용됩니다.

서로 다른 사용자 정의 옵션을 전달하는 다른 콜렉션에서 동일한 플러그인을 사용할 수있게하는 것은 사용자 정의 / 재사용 가능성 에서 중요한 역할을합니다.

(function($) {
  $.fn.highlight = function( custom ) {

    // Default settings
    var settings = $.extend({
        color : "",              // Default to current text color
        background : "yellow"    // Default to yellow background
    }, custom);

    return this.css({     // `return this` maintains method chainability
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));


// Use Default settings
$("span").highlight();    // you can chain other methods

// Use Custom settings
$("span").highlight({
    background: "#f00",
    color: "white"
});

jsFiddle 데모

자유

위의 예제는 기본적인 플러그인 생성을 이해하는 범위에 있습니다. 제한된 사용자 정의 옵션 집합으로 사용자를 제한하지 마십시오.

예를 들어 .highlight() 플러그인을 작성하여 강조 표시 할 텍스트 문자열을 전달하고 스타일 관련 최대의 자유를 부여 할 수 있습니다.

//...
// Default settings
var settings = $.extend({
   text : "",          // text to highlight
   class : "highlight" // reference to CSS class
}, custom);

return this.each(function() {
   // your word highlighting logic here
});
//...

이제 사용자는 원하는 텍스트를 전달하고 사용자 정의 CSS 클래스를 사용하여 추가 된 스타일을 완벽하게 제어 할 수 있습니다.

$("#content").highlight({
    text : "hello",
    class : "makeYellowBig"
});

jsFiddle 예제

jQuery.fn.extend () 메서드

이 메서드는 jQuery 프로토 타입 ($ .fn) 개체를 확장하여 jQuery () 함수에 연결될 수있는 새로운 사용자 지정 메서드를 제공합니다.

예 :

<div>Hello</div>
<div>World!</div>
 
<script>
jQuery.fn.extend({
  // returns combination of div texts as a result
  getMessage: function() {
    var result;
    // this keyword corresponds result array of jquery selection
    this.each(function() {
        // $(this) corresponds each div element in this loop
        result = result + " " + $(this).val();
    });
    return result;
  }
});
 
// newly created .getMessage() method
var message = $("div").getMessage();

// message = Hello World!
console.log(message); 
</script>