$(".number").keydown(function (e) {
// Permite: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Permite: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Permite: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// solo permitir lo que no este dentro de estas condiciones es un return false
return;
}
// Aseguramos que son numeros
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
Ayudándome de los selectores de jquery solo basta con poner la clase “number” a mis cajas de texto y con eso ya el usuario no podrá introducir caracteres que no sean números.
Utilizamos una clase con la cual relacionamos los elementos y en el evento keypress el cual aplicamos por medio del selector de jquery, agregamos el código restringiendo las teclas que no necesitamos. Este código también tiene anexados los códigos para las letras con acentos y la ñ.
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).
