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

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()

Dos documentos :

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

Então você faz

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

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.

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.

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/

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.

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

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

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

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

    myfunction2: function () 
    {
    }
});

Uso:

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

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);

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".

Crie um método "colorir":

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

Use-o:

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

Este exemplo simple-ish combina o melhor da Como criar um Plugin básico nos docs jQuery e respostas de @Candide , @ Michael .

• Uma expressão de função nomeada pode melhorar os rastreamentos de pilha, etc.
• Um método personalizado que retorna this pode ser encadeado . (Obrigado @Potheek.)

Você sempre pode fazer isso:

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

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

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