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.
Excelente man!
a la espera de la continuación del tutorial!
gracias!!!!!!!!!!
No hay de que, gracias por tu comentario!
Magnifico. Muy fácil de entender. Deseando ver la siguiente parte.
Gracias
Excelente tutorial, en espera de la continuación.
Esta muy bueno, me gusto.
no habia visto esta parte, esta excelente. ..gracias
Excelente tutorial. Estoy empezando a aprender Jquery.
q tal amigo muy bueno el tutorial! existe ya la segunda parte de este tuto?
Si lo hay
https://tursos.com/tutoriales/javascript/jquery-rapido-y-facil-eventos/
en document ready cual es el «nuestro codigo».
No entiendo tu pregunta.
Gracias por estos tutoriales, pero tengo una pregunta:
Como puedo editar archivos jQuery? por que lo abro en dreamweaver cs4 y me sale todo seguido, sin formato. Gracias por tu ayuda Josue
Es porque estas abriendo abriendo la version de jQuery comprimida, prueba esta https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
Muy claro y muy didáctico.
Gracias por compartir