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.
Existen varias formas de incluir jQuery pero la más fácil es utilizar un CDN como el de Google.
Puedes copiar la siguiente estructura en un archivo HTML para empezar:
Independiente de cómo vayas a trabajar con jQuery, vamos a escribir nuestro primer ejemplo.
Crea un div en el HTML de Codepen o de tu documento como se muestra a continuación:
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.