Nota: a la fecha de este tutorial, la versión de jQuery es la 1.4.4
jQuery es la librería JavaScript mas usada en el mundo, saber usarla es parte esencial tanto del desarrollo como del diseño web, en esta serie de tutoriales veremos de la manera mas fácil y rápida como ‘pimpear’ nuestros sitios web con jQuery (sliders, navegaciones, acordeones, tabs, animaciones, etc).
Lo Básico
Como toda libreria JavaScript debemos incluirla en nuestra pagina web, la podemos descargar desde jQuery.com, guardarlo en algúna carpeta e incluirlo localmente u otra manera mas rápida es usando el hospedaje de terceros (CDN) como el mismo jQuery, Google, o Microsoft:
Desde jQuery:
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
Desde Google:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Desde Microsoft:
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
Ya con la libreria incluida dentro de nuestro documento podemos empezar a interactuar con jQuery abrimos un:
<script type="text/javascript">
// aca va el codigo
</script>
Nota: los comentarios en JavaScript son iguales a los de PHP (//)
Los selectores
La base de jQuery son los selectores, para los que estan familiarizados con CSS, les sera facilisimo ya que usa el mismo sistema de selectores que CSS para interactuar con los elementos HTML, para seleccionar elementos se usa la funcion base que es representada con el simbolo $ y encerrando entre paréntesis y comillas el elemento a seleccionar, ejemplo:
$('#tabla');
Con este codigo, estamos seleccionando todos los elementos que tengan como id#tabla.
Document Ready
Es una buena practica cuando se trabaja con JavaScript esperar a que el documento termine de cargar para ejecutar nuestro codigo, jQuery tiene una funcion especifica para esto:
$(document).ready(function(){
//Aca ira todo nuestro codigo
});
Métodos
jQuery manipula los elementos HTML mediante metodos/methods (esconderlos, eliminarlos, agregarles textos, clases, ids), estos pueden ser concatenados y contener valores.
Sintaxis:
$('elemento seleccionado').metodo1('valores').metodo2('valores');
Ejemplo
Sabiendo lo anterior haremos un ejemplo con los métodos mas básicos de jQuery.
Creamos un .html con lo siguiente:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#hola').text("Soy un texto generado por jQuery!");
});
</script>
</head>
<body>
<div id="hola"></div>
</body>
</html>
Primero llamamos a jQuery usando el CDN de Microsoft, luego abrimos otro script y esperamos que el documento este listo, seleccionamos el div que tiene como id#hola y con el método .text le agregamos un contenido generado:
El método .text lo que hace es crear un texto dentro del selector, hay que notar que este método solo crea texto, existe otro método similar donde podemos incluir etiquetas html, probemos a cambiar el método .text por .html y en el valor agregarle un h1
$('#hola').html("<h1>Soy un texto generado por jQuery!</h1>");
Tenemos ahora un h1 dentro de un div ambos dinámicamente generados por jQuery!
Por ultimo veremos el método .hide(); que sirve para ocultar elementos usando la propiedad CSS de display:none;
$('#hola').html("<h1>Soy un texto generado por jQuery!</h1>").hide();
Lo probamos en el navegador y notamos que se escondió.
No te olvides de ver la continuación: jQuery Rápido y Fácil: Eventos.