[javascript] 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();