¿Quieres aprender jQuery rápido, gratis y fácilmente? Si sabes ya algo de javascript, esto va a ser coser y cantar.
Incluir la librería
Siempre es recomendable delegar el hosting de la librería a google. ¿Por qué? lee esto.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> |
Acceder a un elemento del DOM
Hay varias formas de acceder a los elementos del DOM. Las más comunes son por id, por clase o por elemento.
Si quieres, puedes consultar el listado completo de selectores en la web oficial.
Si eres impaciente, empieza viendo un ejemplo tonto de acceso de las tres formas.
Acceso por id
Asi se accede al elemento del DOM identificado por id=identificador
$("#identificador").click(function(){ alert("hola"); }); |
Acceso por clase
Asi se accede a los elementos del DOM que sean de clase=’miclase’
$(".miClase").click(function(){ alert("hola"); }); |
Acceso por nombre elemento
Asi se accede al PRIMER elemento del dom que sea un <a>
$("a").click(function(){ alert("hola"); }); |
Acceso por otros métodos: name
Y una forma algo más elaborada de acceder a otros elementos. Por ejemplo, acceder al PRIMER input con name=first_name dentro del primer form que se encuentre:
$("input[name=first_name]"); |
El método de arriba es un poco lento porque hay que recorrer tooooodos los (posibles) forms del DOM. Es mejor atacar directamente al form en cuestión. Supongamos que el form id=myform.
$("#myform input[name=first_name]") |
Funciones que se ejecutarán tan pronto como el DOM esté listo
Imagina que deseas que se cargue el dom completo antes de ejecutar algunas funciones. Lo harás asi:
<script type="text/javascript"> $(document).ready(function(){ // aqui defino lo que quiero que se ejecute cuando el DOM esté listo // Cambio el comportamiento del div con id=jeje ante el evento 'click' $("#jeje").click(function(){ alert('Has hecho click en la zona identificada por id=jeje'); }); // también puedo llamar a funciones definidas en otro js mifuncion(); }); </script> |
Prevenir la reacción estándar del navegador ante un evento
Los navegadores tienen un comportamiento predefinido frente a algunos eventos. Con jQuery podermos anularlo asi:
$("a").click(function(event){ event.preventDefault(); // mas codigo }); |
Callbacks
Funciones que se pasan como parámetro a otra función y se ejecutan cuando la función padre termina.
Callback sin parámetros
Ejemplo:
$.get('myhtmlpage',myCallback); |
Callback con parámetros
Ojo, hazlo asi:
$.get('myhtmlpage',function(){ myCallBack(param1,param2) }); |
Y no asi
$.get('myhtmlpage',myCallBack(param1,param2)); |
Si haces lo segundo, se pasará como nombre de función callback el resultado de ejecutar myCallBack(param1,param2)… lo que NO es correcto!
Además de pasar parámeotros por GET ($.get), también se admiten peticiones por POST ($.post) y otras. Consulta la lista de shorthand-methods completa en la web de jQuery
AJAX en jQuery
jQuery admite las peticiones asíncronas con la función jQuery.ajax. Por ejemplo este trozo de código llama a la url especificada y cuando se termina la ejecución del código de la misma, se ejecuta la función success. En data tendremos el resultado de la ejecución de la url.
$.ajax({ url: 'ajax/test.html', success: function(data) { $('.result').html(data); alert('Load was performed.'); } }); |
Un ejemplo algo más completo de esto mismo (con su HTML y tal)
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Inicializo controlador del div con id=jeje
$("#jeje").click(function(){
$.ajax({
url: 'callback.php',
success: function(data) {
$('#botones').html(data);
//alert('Load was performed. Data = '+data+'.');
}
});
});
});
</script>
</head>
<body>
<div id="jeje" style="background-color: #ff0000; width: 150px; height: 150px; border:1px solid;">
Haz click por aqui dentro...
</div>
<div id="botones">
Al hacer click arriba en esta zona aparecerán los botones
</div>
</body>
</html> |
Y el código php al que llamamos (callback.php) podría ser tan simple como:
<?php echo '<input type="button" id="aficha" value="Añadir Ficha" />'; return 0; ?> |
Eventos en jQuery
Si habéis leido hasta aqui, veréis que he usado varias veces el evento .click(). Hay muchos más eventos (consulta el listado completo de eventos). Su invocación y uso es similar al .click()
Es importante notar que no todos se pueden aplicar a todo tipo de elementos. Por ejemplo, el .select() solo es aplicable a elementos input-text y textareas de un form.
Manipulación del DOM
El siguiente grupo de elementos son los que hacen referencia a la manipulación del DOM.
El manual completo con todas las funciones se puede ver aqui
Por ejemplo, podemos añadir clase a un determinado elemento:
$("a").addClass("miclase"); |
pasando de:
<a href="mipagina.html">mipagina</a> |
a
<a class="miclase" href="mipagina.html">mipagina</a> |
De forma similar, podemos eliminar una clase:
$("a").removeClass("miclase"); |
Se pueden combinar ambas para obtener interesantes efectos:
$("a").removeClass("inactive").addClass("active"); |
Incluso poner clases múltiples:
$("a").addClass("miclase activo"); |
Otro de los manipuladores interesantes es .attr(), con el que podemos obtener y cambiar el valor de un atributo.
var eltitulo = $("div").attr("title") + "_modificado"; $("div").attr("title", eltitulo); /* o lo que es lo mismo, $("div").attr("title") = eltitulo; */ |
Incluso podemos cambiar varios atributos con una sola llamada:
$("div").attr({ title: 'mititulo', alt: 'texto alternativo' }); |
Podemos hacer también un loop por los atributos usando .each():
function(target) { $.each($(target.attributes), function(index) { alert("Attribute name: " + target.attributes[index].name + " Attribute value: " + target.attributes[index].value); }); |
Efectos
El último grupo importante que nos falta por ver. Por ejemplo, si queremos que un div se oculte, podemos usar .hide(). Incluso nos permite ajustar la velocidad con que queremos que se produzca este “escondido”.
Otros efectos básicos son .show() y .toggle().
Pero hay muchos más efectos (algunos bastante complejos). Podéis consultar el listado completo de efectos en la web de jQuery.