¿Cómo crear una función jQuery (un nuevo método o complemento jQuery)?

Sé que en JavaScript la sintaxis es la siguiente:

function myfunction(param){
  //some code
}

¿Hay alguna manera de declarar una función en jQuery que se pueda agregar a un elemento? Por ejemplo:

$('#my_div').myfunction()

De los documentos :

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

Entonces lo haces

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

A pesar de todas las respuestas que ya recibió, vale la pena señalar que no necesita escribir un complemento para usar jQuery en una función. Ciertamente, si se trata de una función simple y única, creo que escribir un complemento es excesivo. Se podría hacer mucho más fácilmente simplemente pasando el selector a la función como parámetro . Su código se vería así:

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

myFunction($('#my_div'));

Tenga $en cuenta que $paramno se requiere el nombre de la variable . Es solo un hábito mío hacer que sea fácil recordar que esa variable contiene un selector jQuery. También podrías usarlo paramtambién.

Si bien existe una gran cantidad de documentación / tutoriales, la respuesta simple para su pregunta es esta:

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

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

Dentro de esa función, la thisvariable corresponde al conjunto ajustado jQuery en el que llamó a su función. Entonces algo como:

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

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

... vaciará a la consola el número de elementos con la clase foo.

Por supuesto, la semántica tiene un poco más que eso (así como las mejores prácticas y todo ese jazz), así que asegúrese de leerlo.

Para que una función esté disponible en los objetos jQuery, agréguela al prototipo jQuery (fn es un acceso directo para el prototipo en jQuery) de esta manera:

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

Esto generalmente se llama un complemento jQuery .

Ejemplo: http://jsfiddle.net/VwPrm/

Sí, lo que estás describiendo es un complemento jQuery.

Para escribir un complemento jQuery, crea una función en JavaScript y la asigna a una propiedad en el objeto jQuery.fn.

P.ej

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

Dentro de su función de complemento, la thispalabra clave se establece en el objeto jQuery en el que se invocó su complemento. Entonces, cuando lo haces:

$('#my_div').myfunction()

Luego, thisdentro myfunctionse establecerá en el objeto jQuery devuelto por $('#my_div').

Ver http://docs.jquery.com/Plugins/Authoring para la historia completa.

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

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

También puede usar extender (la forma en que crea complementos jQuery):

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

    myfunction2: function () 
    {
    }
});

Uso:

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

Puede escribir sus propios complementos jQuery (función que se puede invocar en elementos seleccionados) como a continuación:

(función ($) {
    $ .fn.myFunc = function (param1, param2) {
        // esto: el objeto jquery contiene los elementos seleccionados
    }
}) (jQuery);

Llámalo más tarde como:

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

Sí, los métodos que aplica a los elementos seleccionados usando jquery se llaman complementos jquery y hay una buena cantidad de información sobre la autoría dentro de los documentos jquery.

Vale la pena señalar que jquery es solo javascript, por lo que no hay nada especial en un "método jquery".

Cree un método de "colorear":

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

Úselo:

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

Este ejemplo simple combina lo mejor de Cómo crear un complemento básico en los documentos de jQuery y las respuestas de @Candide , @Michael .

• Una expresión de función con nombre puede mejorar los seguimientos de pila, etc.
• Un método personalizado que devuelve this puede estar encadenado . (Gracias @Potheek.)

Siempre puedes hacer esto:

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

Parece que desea extender el objeto jQuery a través de su prototipo (también conocido como escribir un complemento jQuery ). Esto significaría que cada nuevo objeto creado mediante la llamada a la función jQuery ( $(selector/DOM element)) tendría este método.

Aquí hay un ejemplo muy simple:

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

Manifestación

El ejemplo más simple para hacer cualquier función en jQuery es

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

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