Este documento describe cómo crear funciones personalizadas en jQuery. Explica cómo declarar funciones jQuery usando "fn", cómo agregar parámetros opcionales y valores predeterminados, y cómo usar callbacks para ejecutar código después de que una función haya terminado. También incluye ejemplos de cómo cambiar el fondo, agregar animaciones y estilos a elementos, y cómo crear plugins jQuery flexibles con opciones y callbacks.

1. •Nombres:
•Jonathan Padilla
•Franklin Macías
•Carolina Santana
•Kevin Morales

2.  Para declarar funciones Jquery se utiliza la palabra reservada
"fn" de función, y el modo de uso es el siguiente ...
Y luego la llamamos como a otra cualquier función de Jquery
...
 En el siguiente ejemplo, se ha creado un par de funciones,
una será para aplicar background al elemento(background) y
otro para crear una animación(animar).
Funciones de Jquery
$.fn.tufuncion = function(tus parametros) { // el
resto de instrucciones }
$("#id").tufuncion("parametros si existen");

3.  Creamos una función Jquery para cambiar el background
del elemento
 Creamos una función para animar el elemento
que aceptará un valor booleano true = si animar | false =
no animar
$.fn.background = function(_background)
{
$(this).css({background: _background});
}
$.fn.animar = function(_bool)
{
if (_bool == true)
{
$(this).css({position: "absolute"});
$(this).animate({left: "+=200", bottom:
"+=100"}, 1000, function()

4.  Ahora llamamos a las nuevas funciones Jquery
{
$(this).animate({left: "-=200", bottom: "-
=100"}, 1000);
});
}
}
$(function(){
$("#demostracion").background("black");
$("#crear_efecto").click(function(){
$("#demostracion").animar(true);
});
});

5.  Y en el body colocamos el siguiente div y botón ...
<div style="width: 250px; height:
250px;"><div id="demostracion"
style="width:250px;
height:250px;"></div></div>
<input type="button" id="crear_efecto"
value="Crear efecto">

6. Crear funciones Jquery con opciones
 Este ejemplo muestra como crear una función jquery que
contenga opciones que permitan cambiar unas
determinadas propiedades del elemento, o añadirle una
función.
 Primeramente abrimos la función Jquery ...
$.fn.color = function(options)
{
//plugin
};

7.  Como se puede observar existe un parámetro llamado
"options", pero este parámetro lo normal es que sea
optativo, así que tendremos que declarar una opción
"defaults" que será la opción dominante en caso de no
especificarse explícitamente en el parámetro
 Como se puede ver se ha declarado una variable llamada
defaults, con 3 opciones, una para aplicar el color, otra
para la opacidad y otra que es para albergar una función.
var defaults =
{
color : "#000000",
opacity: "1",
funcion: function(){}
}

8.  Ahora es necesario hacer que defaults conste como
prioritaria si el parámetro options no contiene nada, así
que ...
Con extend estamos combinando el contenido de defaults
y options en la variable options, es decir ambos son lo
mismo, así que si al utilizar la función no se especifica
ninguna opción, se aplicarán las opciones que por defecto
tiene la variable defaults.
A continuación empezamos a construir el plugin ...
var options = $.extend(defaults, options);

9.  Como se puede observar estamos aplicando las propiedades
que tendrá el objeto por defecto, defaults.color,
defaults.opacity, quedando el plugin al completo de la
siguiente forma ...
/*plugin*/
this.css({color: defaults.color});
this.fadeTo("slow", defaults.opacity);
/*plugin*/
$.fn.color = function(options)
{
var defaults =
{
color : "#000000",
opacity: "1",
funcion: function(){}
}
var options = $.extend(defaults, options);

10.  Ahora haremos uso de la recién creada función ...
/*plugin*/
this.css({color: defaults.color});
this.fadeTo("slow", defaults.opacity);
/*plugin*/
//Averigua si el parámetro options contiene una función
if($.isFunction(options.onComplete)) {
options.onComplete.call();
}
};
<script>
$(function(){
$("#default").click(function(){
$("#caja").color();
});
$("#rojo").click(function(){
$("#caja").color({ color: "red", opacity: "0.7", funcion: $("#caja").css({fontSize:
"20px"}) });
});
$("#verde").click(function(){
$("#caja").color({ color: "green", opacity: "0.9", funcion: $("#caja").css({fontSize:
"17px"}) });

11. });
$("#azul").click(function(){
$("#caja").color({ color: "blue", opacity: "0.8", funcion: $("#caja").css({fontSize:
"14px"}) });
});
});
</script>
<input type="button" id="default" value="default">
<input type="button" id="rojo" value="rojo">
<input type="button" id="verde" value="verde">
<input type="button" id="azul" value="azul">
<div id="caja"><h1>Función Jquery con opciones</h1></div>

12. Crear funciones Jquery con opciones
y callback
 En el siguiente ejemplo podremos ver un sencillo plugin
jquery que aceptará en uno de sus parámetros un callback,
un callback nos permite realizar una determinada
operación una vez que ha terminado la ejecución de la
orden que le fue mandada , ya en anteriores posts enseñe
como hacer un plugin basico, un plugin con opciones y
ahora veremos uno con opciones y un callback.

13.  Como se puede ver la función fuente contiene dos
parámetros "options" y "callback", para options
realizaremos la misma operación que se enseño en un post
anterior Crear funciones Jquery con opciones...
$.fn.fuente = function(options, callback)
{
//plugin
};
var defaults =
{
fontSize : "18px",
fontFamily: "arial"
}
var options = $.extend(defaults, options);

14.  Ahora pasamos a definir el parámetro "callback", este
parámetro al igual que "options" es opcional, así que
haremos uso de javascript para definir que si es indefinido,
es decir que si no se hace uso de él, que se le considere
como una función, en este caso sin argumentos.
 A continuación comenzamos a construir el plugin ...
if (callback === undefined)
{
callback = function(){};
}

15.  El plugin consiste en una sencilla animación de
movimiento, a través de "options" podremos cambiar las
propiedades css fontSize y fontFamily y si observamos al
finalizar la animación se añade la función callback() que
en caso de quererla utilizar, lo podremos hacer a través del
segundo parámetro de la función.
/*plugin*/
this.animate({left: "-=30"}).css({fontSize:
defaults.fontSize, fontFamily:
defaults.fontFamily, position:
"relative"}).animate({left: "+=30"},
function(){callback();});
/*plugin*/

16.  El plugin completo ...
$.fn.fuente = function(options, callback)
{
var defaults =
{
fontSize : "18px",
fontFamily: "arial"
}
var options = $.extend(defaults, options);
if (callback === undefined)
{
callback = function(){};
}
/*plugin*/
this.animate({left: "-=30"}).css({fontSize: defaults.fontSize, fontFamily:
defaults.fontFamily, position: "relative"}).animate({left: "+=30"}, function(){callback();});
/*plugin*/
//Averigua si el parámetro contiene una función
//de ser así llamarla
if($.isFunction(options.onComplete)) {
options.onComplete.call();
}
};

17.  Haciendo uso del nuevo plugin fuente() ...
$(function(){
$("#default").click(function(){
$("#caja").fuente();
});
$("#lucida_console").click(function(){
$("#caja").fuente({fontSize: "18px", fontFamily: "'Lucida Console'"},
function(){$("#resultado").fadeIn(1000).text("Ejecución
completada").fadeOut(1000);} );
});
$("#trebuchet").click(function(){
$("#caja").fuente({fontSize: "19px", fontFamily: "trebuchet"},
function(){$("#resultado").show(1000).text("Ejecución
completada").hide(1000);} );
});
$("#verdana").click(function(){
$("#caja").fuente({fontSize: "16px", fontFamily: "Verdana"},
function(){$("#resultado").slideDown(1000).text("Ejecución
completada").slideUp(1000);} );
});
});

18.  Y el cuerpo HTML ...
<input type="button" id="default" value="default">
<input type="button" id="lucida_console" value="Lucida Console">
<input type="button" id="trebuchet" value="Trebuchet">
<input type="button" id="verdana" value="Verdana">
<div id="resultado"></div>
<div id="caja"><h1>Función Jquery con opciones y callback()</h1></div>

19. Video tutorial de Jquery
“Introducción a la programación”