Como criar uma função jQuery (um novo método ou plug-in jQuery)?


203

Eu sei que em JavaScript a sintaxe é a seguinte:

function myfunction(param){
  //some code
}

Existe uma maneira de declarar uma função no jQuery que pode ser adicionada a um elemento? Por exemplo:

$('#my_div').myfunction()

6
@RedEyedMonster - faz muito sentido. Já usou algo como o datePicker do jQuery? $('#myDatePickerfield').datePicker();
Jamiec

Não tenho não, mas obrigado por me alertar para isso :)
RedEyedMonster

3
@RedEyedMonster - Você provavelmente já usou $("#someElement").hide()ou .addClass()...
nnnnnn

@RedEyedMonster: o OP está descrevendo os plugins jQuery, que são bastante comuns em JavaScript. Veja docs.jquery.com/Plugins/Authoring
Paul D. Waite

Respostas:


286

Dos documentos :

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

Então você faz

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

61
Apenas para adicionar algo que achei importante: por favor, adicione - devolva; após o alerta. Isso tornará a função compatível com a cadeia.
Potheek

2
Muitas respostas certas aqui. O jQuery-Docu mostra as diferenças: learn.jquery.com/plugins/basic-plugin-creation
Andy Tschiersch

@candide em que ponto $('my_div').myfunction(); será chamado
Nikhil G

2
@NikhilG $ ('my_div') refere-se a uma tag <my_div></my_div>. Você precisa do sinal de hash lá para se referir ao ID my_div.
Candide

6
Este é um exemplo estranho, porque realmente não faz nada para esse elemento.
Sheriffderek

78

Apesar de todas as respostas que você já recebeu, é importante notar que você não precisa escrever um plugin para usar o jQuery em uma função. Certamente, se for uma função simples e única, acredito que escrever um plugin é um exagero. Isso pode ser feito com muito mais facilidade, basta passar o seletor para a função como parâmetro . Seu código seria algo parecido com isto:

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

myFunction($('#my_div'));

Observe que o $nome da variável $paramnão é necessário. É apenas um hábito meu facilitar a lembrança de que essa variável contém um seletor jQuery. Você poderia apenas usar paramtambém.


41

Embora exista uma infinidade de documentação / tutoriais por aí, a resposta simples para sua pergunta é a seguinte:

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

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

Dentro dessa função, a thisvariável corresponde ao conjunto agrupado do jQuery no qual você chamou sua função. Então, algo como:

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

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

... liberará para o console o número de elementos da classe foo.

Obviamente, há um pouco mais na semântica do que isso (assim como as melhores práticas e todo esse jazz), portanto, leia-o.


14

Para disponibilizar uma função nos objetos jQuery, adicione-a ao protótipo jQuery (fn é um atalho para o protótipo no jQuery) como este:

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

Isso geralmente é chamado de plugin jQuery .

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


8

Sim - o que você está descrevendo é um plugin jQuery.

Para escrever um plugin jQuery, crie uma função em JavaScript e atribua-a a uma propriedade no objeto jQuery.fn.

Por exemplo

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

Dentro da função do plug-in, a thispalavra-chave é configurada para o objeto jQuery no qual seu plug-in foi chamado. Então, quando você faz:

$('#my_div').myfunction()

Em seguida, o thisinterior myfunctionserá definido como o objeto jQuery retornado por $('#my_div').

Consulte http://docs.jquery.com/Plugins/Authoring para obter a história completa.


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

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

Eu não acho que a incompatibilidade no fechamento de parênteses e chaves seja o único problema com esse código. Por favor conserte.
Christoffer Lette

6

Você também pode usar o extend (da maneira que você cria plugins jQuery):

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

    myfunction2: function () 
    {
    }
});

Uso:

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

5

Você pode escrever seus próprios plugins jQuery (função que pode ser chamada em elementos selecionados) como abaixo:

(function ($) {
    $ .fn.myFunc = função (param1, param2) {
        // this - o objeto jquery mantém seus elementos selecionados
    }
}) (jQuery);


Ligue mais tarde como:

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

4

Sim, os métodos aplicados aos elementos selecionados usando o jquery são chamados de plugins do jquery e há uma boa quantidade de informações sobre criação nos documentos do jquery.

Vale ressaltar que o jquery é apenas javascript, portanto não há nada de especial em um "método jquery".


1
'não há nada de especial em um "método jquery"' - Sim, existe: um "método jQuery" funciona em um objeto jQuery. (Mas sim, jQuery é apenas JS ...)
nnnnnn


3

Você sempre pode fazer isso:

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

2

Parece que você deseja estender o objeto jQuery através de seu protótipo (também conhecido como escrever um plugin jQuery ). Isso significaria que todo novo objeto criado através da chamada da função jQuery ( $(selector/DOM element)) teria esse método.

Aqui está um exemplo muito simples:

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

Demo


1

O exemplo mais simples para criar qualquer função no jQuery é

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

if($(selector).exists()){/*do something here*/}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.