Primeros pasos

Last updated 2 years ago

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 . Ingresa a ese link y vas a ver una pantalla similar a la siguiente (aunque quizá ya la han actualizado):

Ahora debes configurar jQuery como se muestra en la siguiente animación:

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:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prueba de jQuery</title>
</head>
<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script>
    // acá va el código que vamos a escribir
  </script>
</body>
</html>

Un ejemplo

Independiente de cómo vayas a trabajar con jQuery, vamos a escribir nuestro primer ejemplo.

<div></div>

Escribe el siguiente código CSS (si creaste un documento HTML puedes hacerlo en la etiqueta <style> dentro del <head>):

div {
  background-color: red;
  height: 200px;
}

El código JavaScript que debes incluir es el siguiente:

$('div').on('click', function() {
  $(this).css('background', 'yellow');
});

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.

PreviousjQuery NextManipulando HTML

Last updated 2 years ago