En algunas ocasiones tenemos la necesidad de ejecutar algún código javascript hasta que este cargado todo el DOM pero también cargadas todas las imágenes, comúnmente utilizamos:
$(document).ready(function(){
//script que se ejecuta cuando se cargo el DOM
});
Pero nos damos cuenta que se ejecuta aunque no se hayan cargado las imágenes y es por el hecho de que el DOM ya está cargado ósea el código que plasma esa imagen (<img>).
Para poder lograr que se ejecute un script terminando de cargar DOM e imágenes basta con utilizar:
$(window).load(function(){
//script que se ejecuta cuando se cargo el DOM y las IMAGENES
})
Algunas veces nuestras peticiones de formulario son pesadas (cargar archivos por ejemplo) y esto puede ocasionar que el usuario se estrese o siga presionando botones, para ello yo en estos casos recurro a realizar una petición ajax remplazando el submit del form (a la vez bloqueo la pantalla para que no estén haciendo peticiones a lo bestia, pueden utilizar algo como esto: [bloquear la pantalla con un div]). Para ello podemos ayudarnos de la función serialize() de jquery, con la cual nos regresa la cadena de parámetros que están en nuestro form (valor1=1&valor2=2&valor3=3…). Tenemos que tener cuidado en poner el return false al final, ya que con eso evitamos que se continúe con el submit común. El siguiente ejemplo muestra fácilmente como podemos realizar esa petición (leer los comentarios):
//selector sobre el form seguido de la función submit
$("#miForm").submit(function(){
//de esta manera remplazamos
//ahora obtendremos los atributos que necesitaremos
url=$(this).prop("action")
//la función serialize nos regresa los input, es importante ponerles name
parametros=$(this).serialize()
//aqui utilizamos la petición, en este caso post
$.post(url,parametros,function(data){
//aqui es cuando ya se hizo nuestra petición
//regularmente yo regreso 1 para mostrar exito
if(data=="1"){
alert("exito")
}else{
//si no regreso el 1, regreso el error y asi lo muestro
alert(data)
}
})
//ESTO ES MUY IMPORTANTE, YA QUE SI NO SE PONE SE REALIZA LAS DOS PETICIONES
//TANTO AJAX COMO LA PETICIÓN NORMAL DE FORMULARIO
//REFRESCANDO TODA LA PAGINA.
return false;
})
De esta manera podremos remplazar la petición submit normal, y hacer una petición ajax, que es mas formal y elegante.
Nota: el archivo peticion.php del action del form, es un proceso x en el cual se realiza una operación ya sea inserción, validación, etc. Y nos regresa en caso de éxito un «1», sino el error.
A partir de HTML5 fueron creados los atributos data. Estos atributos nos sirven para guardar cualquier cosa y su utilización es la siguiente:
<div id="divDireccion"
data-direccion="Calle Lorenzo Higareda"
data-numero="18"
data-colonia="tetlan">
Un div lleno de datas</div>
Recuerda poner la palabra data seguida de un guión (data-*) y despues el nombre de tu atributo.
Con jquery, existen una manera fácil de obtener los valores, y para ello utilizaremos la función data() y dentro el nombre de nuestro atributo. El siguiente ejemplo explica de una manera rápida y fácil como podemos obtener los valores:
//utilizando el div anterior obtenemos los valores con la función data y el selector sobre el div que los contiene
direccion=$("#divDireccion").data("direccion")
numero=$("#divDireccion").data("numero")
colonia=$("#divDireccion").data("colonia")
//mostramos los 3 valores
alert(direccion+" "+numero+" "+colonia)
El nombre que se pone dentro de la función data(), es sin el data- que lo precede
Para asignar un valor a los atributos data por medio de jquery, es de la siguiente manera:
//utilizando el mismo div puesto con anterioridad
$("#divDireccion").data("direccion","Calle Sta Ana")
//obtenemos el valor de data nuevamente
direccion=$("#divDireccion").data("direccion")
//mostramos en un alert, veremos el nuevo valor
alert(direccion)
La función closest de jquery, sirve para seleccionar un padre de un elemento que coincida con el selector dado. A diferencia de parent() (ver como funciona parent()), esta función nos permite ir hasta el nivel deseado ya sea por una clase, id o el nombre de la etiqueta.
Su funcionalidad es parecida a find() (ver cómo funciona find()) solo que funciona en sentido inverso, yendo a los padres en lugar de a los hijos.
Esta función solo nos seleccionara el primer elemento encontrado con el selector dado. A continuación muestro un ejemplo de como funciona closest():
Código HTML
<div class="abuelo">
<div>
<input id="hijo1" type="text" value="Soy el hijo 1" />
<input id="hijo2" type="text" value="Soy el hijo 2" />
</div>
</div>
Código Jquery
$(document).ready(function(){
//asi seleccionamos el hijo1
hijo1=$("#hijo1");
//de esta manera podemos seleccionar a padre por medio de closest()
padre=hijo1.closest("div");
//mostramos el contenido html para confirmar que seleccionamos el div padre
alert(padre.html())
//asi seleccionamos al abuelo mediante su clase
abuelo=hijo1.closest(".abuelo")
//mostramos html del abuelo
alert(abuelo.html())
})
Algunas veces, por comodidad, o por que no queda de otra, se nos ocurre realizar alguna operación con todas las celdas de una columna de una tabla de jquery, es decir, poder seleccionar la primer columna y todas sus celdas, o la segunda columna etc, y a estos elementos realizar una acción. Para ello pongo el siguiente ejemplo:
Supongamos que deseamos realizar una sumatoria de los valores de la segunda columna, para ello la clave esta en el selector junto al filtro eq, y se puede hacer de la siguiente manera:
var total=0;
//selector >> $("#GridView1 tr").find('td:eq(1)')
//De esta manera utilizando eq seleccionamos la segunda fila, ya que la primera es 0
$("#miTabla tr").find('td:eq(1)').each(function () {
//obtenemos el valor de la celda
valor = $(this).html();
//sumamos, recordar parsear, si no se concatenara.
total += parseInt(valor)
})
//mostramos el total
alert(total)
Así de sencillo seleccionamos una columna en especifico.
Nota: eq sirve para seleccionar un indice de los elementos seleccionados, como en un arreglo los corchetes []
Alguna veces es necesario obtener el texto de un elemento option(El texto visual, no el valor), el cual esta seleccionado en un elemento select(combobox), esto se puede hacer de la siguiente forma, ayudándonos de jquery:
Para crear elementos HTML dinámicamente utilizaremos la función de nombre append() de jquery, esta función agrega contenido HTML o un Nodo Html al final de su contenido, y para el caso contrario (eliminar elementos) utilizaremos la función remove() la cual elimina un elemento del contenido de la pagina.
Para comprender estas funciones veremos cómo hacer un formulario detalle (como cuando vas a la tienda y ves como te agregan los productos que vas a pagar a una tabla), y la manera que jquery con la ayuda de sus selectores y su catálogo de funciones lo hace demasiado fácil de hacer.
function Agrega(){
//obtenemos los valores de nuestra caja de texto
nodoAInsertar="<tr>"; //nodo en el cual obtendremos el codigo html nuevo a insertar en la tabla
$(".texto").each(function(){ //selector por clase texto y un each para recorrer elementos
nodoAInsertar+="<td>"; //abrimos td
nodoAInsertar+=$(this).prop("value"); //obtenemos el valor de la caja de texto
nodoAInsertar+="</td>" //cerramos td
//limpiamos la caja de texto actual
$(this).val("");
});
//agregamos el botpon para eliminar
nodoAInsertar+="<td><input type='button' value='Eliminar' onclick='Elimina(this)'></td>"
nodoAInsertar+="</tr>" //cerramos el tr
//por ultimo insertamos el nodo tr a la tabla
$("#tablaProductos").append(nodoAInsertar)
//ponemos el foco en la caja de texto código
$("#txtCodigo").focus()
}
function Elimina(NodoBoton){
//recibimos el botón como parametro y lo transformamos a jquery
var botonEliminar=$(NodoBoton);
//obtenemos el padre tr del boton para asi eliminarlo, el primer padre es td, el segundo es tr
var padreTRBoton=$(botonEliminar).parent().parent();
padreTRBoton.remove();
//todo esto puede funcionar con esta misma linea "$(NodBoton).parent().parent().remove();"
}
Código en ejecución
Tenemos tres cajas de texto y un botón, al presionar el botón invocamos la función Agrega() la cual realiza un each sobre los elementos de clase “texto” y les da un formato de celda (<td>) y concatenándolos a una variable de nombre nodoAInsertar, al finalizar el ciclo agregamos un botón, tal como lo haríamos con html, y en este botón agregamos la función Elimina() recibiendo como parámetro el mismo botón. Por último utilizando la función append() de jquery anexamos el nuevo código html a la tabla con el id tablaProductos, y así de sencillo se realiza la creación de elementos HTML de forma dinámica.
Para el caso de eliminar simplemente utilizamos la función remove() de jquery, relacionando al padre tr del botón recibido, y proseguimos a eliminar el tr junto a sus hijos.
Este fue el ultimo capitulo de este curso básico de jquery, después de ver estos 10 temas, ya eres capaz de utilizar jquery sin problemas y espero te sirva para que sea una herramienta que te ayude a realizar tus proyectos de manera rápida y estética.
La función animate() de jquery nos sirve para crear animaciones, transformando los elementos HTML de nuestro sitio web. Su funcionalidad se basa en: realizar una transformación del elemento recibiendo el estilo final (CSS) que tendrá nuestro objeto, alguna acción (reducir de tamaño, desaparecerlo) y en que tiempo se realizara el efecto.
Algo que vale la pena recordar, es que siendo una función de jquery, esta función tiene un parámetro al final para ejecutar un callback, y así podemos realizar varias animaciones en secuencia.
Para comprender la función muestro el siguiente ejemplo, en el cual línea por línea explico que es lo que realiza:
$("div")
.animate({ //seleccionamos el div
opacity: 0.25, //dismunuye la opacidad del objeto
left: "+=100", //aumenta la posicion en horizontal del objeto a 100 px
height: "toggle" //oculta el objeto
}, 2000 //la animación se realiza en 2 segundos
,
function() { //ejecutamos un callback con función anonima para regresar a la normalidad el objeto
$("div").animate({ //seleccionamos nuevamente el div
opacity: 1, //regresa la opacidad del objeto a normal
left: "-=100", //dismunuye la posicion del objeto menos 100 px
height: "toggle" //aparece el objeto
}, 1000 //tiempo de 1 segundo
, inicia //el callback ejecuta la funcion inica para volver a comenzar todo
)
})
}
Ejemplo en ejecución
El código anterior, al presionar el botón inicia, realiza una animación y ejecuta un callback para regresar el div a su estado original.
Utilizando animate() podemos realizar todo tipo de animaciones a nuestros elementos HTML, recomiendo que la utilicen e intenten realizar cosas por si solos en lugar de bajar cosas ya hechas, esto les ayudara a comprender como funcionan los plugins de jquery y les dará facilidad para modificarlos o crear los plugins propios (creación de plugins de jquery, el siguiente curso que estoy por hacer).
Los callbacks sirven para hacer una pila de funciones, las cuales se ejecutaran en secuencia conforme termine cada una de ellas. Los callbacks son utilizados a menudo para efectos y animaciones de los componentes HTML. Con jquery tenemos la facilidad de utilizarlos, ya que todas las funciones de jquery tienen callback, y este siempre se envía como ultimo parámetro.
function functionUltima(){
alert("hola");
}
function funcionPrimera(){
$("#div").fadeOut(1000,function(){
//una función anónima puede servir tambien y se ejecuta como callback
$("#div").fadeIn(1000,functionUltima)//funcion ultima ejecuta una funcion existente
})
}
Ejemplo en ejecución
En el ejemplo anterior se ejecuta la función fadeOut() la cual desaparece un elemento HTML en un margen de tiempo siendo 1000 igual a 1 segundo, y la función fadeIn() sirve para el caso contrario; utilizo estas funciones para que sea notorio la ejecución de la pila de funciones anidadas.
Lo primero que se realiza se desaparece el div, y terminando de realizar esta acción se dispara la función anónima que procede a aparecerlo, y por último se ejecuta una función existente la cual muestra un alert().
Los callbacks son utilizados comúnmente y su enorme potencial nos permite realizar mucho dinamismo en nuestros sitios web.
En jquery existen dos funciones, las cuales utilizaremos continuamente, su nombre son hide() y show(), estas funciones como su nombre lo indica, ocultan y muestran un elemento.
La funcionalidad que se puede realizar, es ilimitada, basta con tener imaginación y podremos realizar cosas bastante estéticas; para utilizarla, seleccionamos el o los elementos que deseamos aplicar la función por medio de un selector y al igual que todas las funciones de jquery continuamos con punto y el nombre de la función, por ejemplo:
$("div").show();
Así de sencillo es su sintaxis, y esta linea ocultaría todos los divs de nuestra pagina; pero para sacarle jugo a estas funciones vamos a realizar algo mas interesante, realizaremos un acordeón, para ello tenemos el siguiente código:
$(document).ready(function(){
//agregamos evento clic a los titulos
$(".titulo").click(function(){
//obtenemos el objeto jquery que ejecuto el evento
divTitulo=$(this);
//ocultamos todos los div con clase texto
$(".texto").hide();
//mostramos el div correspondiente a la sección
divTitulo.parent().find(".texto").show();
});
//ocultamos todos los divs de clase texto al iniciar
$(".texto").hide();
});
En el código anterior, tenemos un conjunto de divs los cuales tienen una clase llamada sección y una llamada texto, los divs de clase sección realizaran la función que activa la sección del texto del acordeón el cual se encuentra en el div de clase texto.
En el código de jquery, agregamos un evento a los divs de clase sección para cuando den clic en ellos se muestre el div correspondiente y se oculten todos los demás, utilizando la función parent() y find() de jquery(las cuales explico en este articulo), accedemos a el elemento correspondiente a mostrar.
A continuación dejo el ejemplo funcionando, solo den clic a una sección y verán su funcionalidad:
En este capitulo vimos como podemos hacer un uso interesante por medio de las funciones hide() y show() de jquery.
