En esta entrada dejo un resumen de funciones JQuery bastante útiles para consultar rápidamente una determinada llamada o como recordatorio. Es mi chuleta de trabajo.
En la parte inferior, dejo imágenes más completas a modo resumen.
jQuery es una libreria de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la librería de JavaScript más utilizada en el mundo.
Actualmente resumiendo cosas, versión chuleta 1.0 en castellano
<!--
RESUMEN SIMPLIFICADO DE FUNCIONES DE CONSULTA JQUERY - mi Cheat www.palentino.es
Una ayuda para una consulta rápida.
Permite copiar y pegar texto.
No es necesario fijarse en la sintaxis, es un compendio resumido.
-->
<html>
<head> </head>
<script type="text/javascript" src="js/jquery.js"> </script>
<script type="text/javascript">
//Llenaremos de llamadas de ejemplo este fichero.
var y;
y=$(document); // Selecciona el documento
y.ready(inicio); // Llamada a funcion , podemos anidar.
function inicio()
{
var y;
y=$("#mi_capa_id"); // Selecciona la capa por id
y=$(".mi_capa_class"); // Selecciona la capa por class
y=$("h1"); // Elemento sencillo HTML
y=$(this); // Seleccion del elemento actual
y.click(mi_funcion); //Llamada a una función por evento
y.css("color","red"); // Cambio de una propiedad.
y=$("[href]"); // Seleccion por atributo
y=$("[href='.jpg']"); // Seleccion con busqueda de archivo
y=$("li:first"); // Selectores multiples, primer elemento de una lista
// Meter texto en un parrafo
y=$("p");
y.text("Este es el texto");
//Para atributos
y.attr("border","2"); // Cambiar el borde
y.removeAttr("border"); // Elimina el atributo
// Añadir o quitar clases
y.addClass("el_nombre_clase"); // Recuerda la clase seguida con punto :-)
y.removeClass("el_nombre_clase);
// Añadir HTML nuevo dentro de un fragmento HTML. Bastante potente.
x.html("<span> Este texto se añade dentro de un elemento seleccionado con jquery");
// Añadir texto a un elemento
y.append("El nuevo texto");
y.prepend("El nuevo texto");
y.after("El texto antes");
y.before("El texto despues");
// Para los EVENTOS
y.mouseover(mi_funcion_entra);
y.mouseout(mi_funcion_salida);
y.hover(mi_funcion_entra, mi_funcion_salida); //Automatiza en un solo evento la entrada y la salida
y.mousemove(mi_funcion_captura); // Podemos usar event.clientX o event.clientY para capturar coordenadas.
y.click(mi_funcion_click);
y.mousedown(mi_funcion_presionar);
y.mouseup(mi_funcion_soltar);
y.dblclick(mi_funcion_dobleclick);
y.focus(mi_funcion_enfoque); //Cuando un elemento tiene el foco
y.blur(mi_funcion_perde_foco); ( // Cuando un elemento pierde el foco
// Para los EFECTOS
y.show(); // Muestra el elemento.
y.hide(); // Oculta un elemento.
// Podemos incluir modificadores.
y.hide("fast"); // Animacion rapida.
y.show("slow"); // Muestra lentamente.
y.fadeout(); //Similar al hide, Ocultar sin escala, animar solo la transparencia
y.fadein(); // Soportan los modificadores slow y fast
y.fadeto(velocidad,transparencia); //Transicionamos hasta el nivel de t
ransparencia en la animacion, nivel entre =0 y 1
y.toggle("fast");// Permite mostrar y ocutar en un unico boton.
y.slideup("slow"); // Mostramos u ocultamos cosas con barridos
y.slidedown("slow"); // Muestra el elemento ocultado
y.slidetoggle(); // Para un solo boton
y.animate("propiedad a animar", velocidad);
y.animate({height:200},"slow"); // Permite estructuras de animacion personalizadas
y.animate({width:100},4000); // Animacion anchura durante 4 segundos.
// Para AJAX
pagina=$(this).attr("href"); // Lee el enlace activo
y.load(pagina); //Evita saltos entre paginas. $(this).attr("href") Lee una pagina en la capa del selector establecido con $("#capa")
$.post("mi_pagina.php",{valor:n}, funcion_respuesta); //
$.get("mi_pagina.php",{valor:n}, funcion_respuesta); //
$.ajax(
{async:true, type:"POST", dataType:"html", contentType="application/x-www-form-urlencoded",
url:"archivo.php", data:"parametro=" +v, beforeSend: Funcion_inicio, success:Funcion_llegada,
timeout:4000, error:problemas});
// Funciones Callback, espera que termine para ejecutar otra funcion
y.hide(11000, function(){alert('el div se ha escondido');}); //no ejecutar eventos hasta que las animaciones finalicen
//JQuery, necesario descargar esta libreria alternativa (2 modos al igual que JQuery)
// Sobre JQuery UI interacciones
y.draggable(); // Arrastrar elemento
y.droppable({drop:funcion_ha_soltado}); //Soltar elemento sobre otro.
y.resizable(); // Cambia el tamaño de un elemento. Ejemplo DIV, aparecen selectores.
y.selectable(); // Selecciona elementos, necesita redefinir un estilo para notar el cambio.
y.sortable(); //Cambia el orden de los elementos de una lista.
// Sobre JQuery UI Widgets
// Sobre JQuery UI Efectos , donde podemos descargar temas
y.accordion(); // Efecto acordeon, requiere divs para cada seccion y titulo en h1
y.autocomplete({source:matriz_datos}); // La matriz son los datos para autocompletar ejemplo: var matriz_datos=["uno","dos","tres"];
y.button(); // Define botones atractivos.
y.datepicker(); // Define un calendario.
y.dialog(); // Define ventana de dialogo.Incluye botton de cierre
y.progressbar({value:50}); // Barra de progreso al 50%
y.slider(); // Control deslizable como un potenciómetro.
y.tabs(); // Permite crear pestañas requiere div para contenido y listas no ordenadas para titulos.
y.effect(efecto); // El efecto puede ser fold, fade, drop, etc ...
// Fin del cheatSheet JQuery www.palentino.es
// Fecha modificación 22-05-2014
}
</script>
</html>
Anexo CheatSheet en imagen. Click para ampliar (otra ventana).
