Jak utworzyć funkcję jQuery (nowa metoda jQuery lub wtyczka)?

Wiem, że w JavaScript składnia jest następująca:

function myfunction(param){
  //some code
}

Czy istnieje sposób zadeklarowania funkcji w jQuery, którą można dodać do elementu? Na przykład:

$('#my_div').myfunction()

Z Dokumentów :

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

To robisz

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

Pomimo wszystkich odpowiedzi, które już otrzymałeś, warto zauważyć, że nie trzeba pisać wtyczki, aby używać jQuery w funkcji. Z pewnością jeśli jest to prosta, jednorazowa funkcja, uważam, że napisanie wtyczki to przesada. Można to zrobić o wiele łatwiej, po prostu przekazując selektor do funkcji jako parametr . Twój kod wyglądałby mniej więcej tak:

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

myFunction($('#my_div'));

Zauważ, że $nazwa zmiennej $paramnie jest wymagana. To mój zwyczaj, aby ułatwić sobie zapamiętanie, że ta zmienna zawiera selektor jQuery. Możesz również użyć param.

Chociaż istnieje mnóstwo dokumentacji / samouczków, prosta odpowiedź na twoje pytanie brzmi:

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

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

Wewnątrz tej funkcji thiszmienna odpowiada opakowanemu zestawowi jQuery, na którym wywołałeś swoją funkcję. Więc coś takiego:

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

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

... spłukuje do konsoli liczbę elementów z klasą foo.

Oczywiście w semantyce jest coś więcej (jak również najlepsze praktyki i cały ten jazz), więc przeczytajcie o tym.

Aby udostępnić funkcję na obiektach jQuery, dodajesz ją do prototypu jQuery (fn to skrót do prototypu w jQuery) w następujący sposób:

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
    }
}

Zwykle nazywa się to wtyczką jQuery .

Przykład - http://jsfiddle.net/VwPrm/

Tak - opisujesz wtyczkę jQuery.

Aby napisać wtyczkę jQuery, należy utworzyć funkcję w JavaScript i przypisać ją do właściwości obiektu jQuery.fn.

Na przykład

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

W ramach funkcji wtyczki, this słowo kluczowe jest ustawione na obiekt jQuery, na którym wtyczka została wywołana. Więc kiedy to zrobisz:

$('#my_div').myfunction()

Następnie this wewnątrz myfunctionzostanie ustawiony obiekt jQuery zwracany przez $('#my_div').

Zobacz http://docs.jquery.com/Plugins/Authoring do pełnej historii.

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

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

Możesz także użyć rozszerzenia (sposobu tworzenia wtyczek jQuery):

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

    myfunction2: function () 
    {
    }
});

Stosowanie:

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

Możesz napisać własne wtyczki jQuery (funkcja, którą można wywołać na wybranych elementach), jak poniżej:

(funkcja ($) {
    $ .fn.myFunc = funkcja (param1, param2) {
        // this - obiekt jquery przechowuje wybrane elementy
    }
}) (jQuery);

Nazwij to później:

$ („div”). myFunc (1, null);

Tak, metody stosowane do elementów wybranych za pomocą jquery, nazywane są wtyczkami jquery, a dokumentacja jquery zawiera sporo informacji na temat tworzenia .

Warto zauważyć, że jquery jest po prostu javascript, więc nie ma nic specjalnego w „metodzie jquery”.

Utwórz metodę „kolorowania”:

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

Użyj tego:

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

Ten prosty przykład łączy w sobie najlepsze sposoby tworzenia podstawowej wtyczki w dokumentach jQuery oraz odpowiedzi od @Candide , @Michael .

• Nazwie wyraz funkcja może poprawić ślady stosu, etc.
• Zwracana this może być niestandardowa metoda . (Dzięki @Potheek.)

Zawsze możesz to zrobić:

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

Wygląda na to, że chcesz rozszerzyć obiekt jQuery za pomocą jego prototypu (inaczej napisać wtyczkę jQuery ). Oznaczałoby to, że każdy nowy obiekt utworzony przez wywołanie funkcji jQuery ( $(selector/DOM element)) miałby tę metodę.

Oto bardzo prosty przykład:

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

Próbny

Najprostszym przykładem wykonania dowolnej funkcji w jQuery jest

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

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