jQuery 함수 (새로운 jQuery 메소드 또는 플러그인)를 작성하는 방법은 무엇입니까?

JavaScript에서 구문은 다음과 같습니다.

function myfunction(param){
  //some code
}

요소에 추가 할 수있는 jQuery에서 함수를 선언하는 방법이 있습니까? 예를 들면 다음과 같습니다.

$('#my_div').myfunction()

로부터 문서 :

(function( $ ){
   $.fn.myfunction = function() {
      alert('hello world');
      return this;
   }; 
})( jQuery );

그런 다음에

$('#my_div').myfunction();

이미받은 모든 답변에도 불구하고 함수에서 jQuery를 사용하기 위해 플러그인을 작성할 필요가 없습니다. 확실히 그것이 단순한 일회성 함수라면 플러그인 작성이 과도하다고 생각합니다. 선택기를 매개 변수로 함수에 전달하면 훨씬 쉽게 수행 할 수 있습니다 . 코드는 다음과 같습니다.

function myFunction($param) {
   $param.hide();  // or whatever you want to do
   ...
}

myFunction($('#my_div'));

점을 유의 $변수 이름이 $param필요하지 않습니다. 해당 변수에 jQuery 선택기가 포함되어 있음을 쉽게 기억하는 것은 내 습관입니다. 그냥 사용할 수도 param있습니다.

이 있지만 과다한 문서 / 질문에 대한 간단한 대답은 이것이다, 거기 자습서 :

// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)

$.fn.myfunction = function () {
    // blah
};

해당 함수 내에서 this변수 는 함수 를 호출 한 jQuery 래핑 된 세트에 해당합니다. 그래서 같은 :

$.fn.myfunction = function () {
    console.log(this.length);
};

$('.foo').myfunction();

... 클래스에 요소 수를 플러시합니다. foo .

물론, 그것보다 의미론에 약간 더 많은 것들이 있으며 (모범 사례와 모든 재즈), 그것에 대해 읽어보십시오.

jQuery 객체에서 함수를 사용할 수 있도록하려면 다음과 같이 jQuery 프로토 타입에 fn을 추가하십시오 (fn은 jQuery의 프로토 타입 바로 가기 임).

jQuery.fn.myFunction = function() {
    // Usually iterate over the items and return for chainability
    // 'this' is the elements returns by the selector
    return this.each(function() { 
         // do something to each item matching the selector
    }
}

이것을 일반적으로 jQuery 플러그인 이라고합니다 .

예 -http : //jsfiddle.net/VwPrm/

그렇습니다. 여러분이 설명하는 것은 jQuery 플러그인입니다.

jQuery 플러그인을 작성하려면 JavaScript로 함수를 작성하여 오브젝트의 특성에 지정하십시오. jQuery.fn .

예 :

jQuery.fn.myfunction = function(param) {
    // Some code
}

플러그인 함수 내에서 this키워드는 플러그인이 호출 된 jQuery 객체로 설정됩니다. 따라서 할 때 :

$('#my_div').myfunction()

그러면 thisinside myfunction는에서 반환 한 jQuery 객체로 설정됩니다 $('#my_div').

전체 내용은 http://docs.jquery.com/Plugins/Authoring 을 참조 하십시오 .

$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;
    };
});

$(document).ready(function () {
    //call function
    $("#my_div").myfunction();
});

extend (jQuery 플러그인을 만드는 방식)를 사용할 수도 있습니다 .

$.fn.extend(
{
    myfunction: function () 
    {
    },

    myfunction2: function () 
    {
    }
});

용법:

$('#my_div').myfunction();

다음과 같이 자신의 jQuery 플러그인 (선택한 요소에서 호출 할 수있는 함수)을 작성할 수 있습니다.

(함수 ($) {
    $ .fn.myFunc = 함수 (param1, param2) {
        // this-jquery 객체는 선택된 요소를 보유합니다
    }
}) (jQuery);

나중에 다음과 같이 호출하십시오.

$ ( 'div'). myFunc (1, null);

예, jquery를 사용하여 선택한 요소에 적용하는 메소드를 jquery 플러그인이라고 하며 jquery 문서 내 에서 작성하는 데 많은 정보가 있습니다.

jquery 는 자바 스크립트 일 뿐이므로 "jquery 메소드"에는 특별한 것이 없습니다.

"colorize"메소드를 작성하십시오.

$.fn.colorize = function custom_colorize(some_color) {
    this.css('color', some_color);
    return this;
}

그걸 써:

$('#my_div').colorize('green');

이 간단한 예제는 jQuery 문서에서 기본 플러그인을 만드는 방법 과 @Candide , @Michael의 답변을 결합한 것 입니다.

• 라는 이름의 함수 표현 등 스택 트레이스를 향상시킬 수 있습니다
• 반환하는 사용자 지정 메서드는 this 연결될 수 있습니다 . (@Potheek에게 감사합니다.)

당신은 항상 이것을 할 수 있습니다 :

jQuery.fn.extend({
   myfunction: function(param){
       // code here
   },
});
OR
jQuery.extend({
   myfunction: function(param){
       // code here
   },
});
$(element).myfunction(param);

프로토 타입 (일명 jQuery 플러그인 작성 )을 통해 jQuery 객체를 확장하려는 것처럼 들립니다 . 이는 jQuery 함수 ( $(selector/DOM element)) 를 호출하여 생성 된 모든 새 객체 에이 메소드 가 있음을 의미합니다 .

다음은 매우 간단한 예입니다.

$.fn.myFunction = function () {
    alert('it works');
};

데모

jQuery에서 함수를 만드는 가장 간단한 예는

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something here*/}