Guías de Make it Real
Search…
Primeros pasos
Existen varias formas de empezar a trabajar con jQuery. Vamos a ver dos de ellas.
Codepen
La primera, y quizá la forma más fácil, es utilizar una herramienta en línea como Codepen. Ingresa a ese link y vas a ver una pantalla similar a la siguiente (aunque quizá ya la han actualizado):
Codepen
Ahora debes configurar jQuery como se muestra en la siguiente animación:
Configure jQuery in Codepen
Estás listo(a) para empezar a trabajar con jQuery.
La segunda forma es crear un documento HTML
Otra forma es crear un documento HTML e incluir jQuery.
Puedes copiar la siguiente estructura en un archivo HTML para empezar:
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>Prueba de jQuery</title>
7
</head>
8
<body>
9
10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
11
<script>
12
// acá va el código que vamos a escribir
13
</script>
14
</body>
15
</html>
Copied!
Un ejemplo
Independiente de cómo vayas a trabajar con jQuery, vamos a escribir nuestro primer ejemplo.
1
<div></div>
Copied!
Escribe el siguiente código CSS (si creaste un documento HTML puedes hacerlo en la etiqueta
<style> dentro del <head>):1
div {
2
background-color: red;
3
height: 200px;
4
}
Copied!
El código JavaScript que debes incluir es el siguiente:
1
$('div').on('click', function() {
2
$(this).css('background', 'yellow');
3
});
Copied!
En la primera línea del código JavaScript nos estamos enlazando al evento
click del <div>. De esa forma, cuando le hagan click, se va a ejecutar el código que está dentro de la función, que cambia el fondo a amarillo.jQuery se divide en tres grandes funcionalidades:
- Manipular elementos HTML.
- Escuchar eventos del teclado, mouse, etc.
- Realizar peticiones con AJAX.
Last modified 4yr ago
Copy link