jQuery
jQuery es una librería de software libre escrita en Javascript, con Licencia MIT y Pública General de GNU v2, permite su uso en proyectos libres y privados
Responde al principio escribe menos, haz más
Para conseguirlo permite escribir código Javascript de una manera más sencilla, realizando en una sola llamada tareas que requeririan varias líneas de código
Simplifica muchas de las tereas comunes, como la manipulación del DOM, las propiedades CSS y las llamadas AJAX, además de permitir crear efectos o animaciones
Instalación
Descargamos la librería en su versión más estable desde su página oficial jQuery.com
Cargamos la librería en el head de nuestro código HTML:
En el ejemplo, version es el número actual de versión, puede variar en el momento de tu descarga
Es aconsejable que en producción se utilice la versión min, ya que está optimizada para una carga más rápida en el navegador
Existen tambien repositorios CDN de terceros que podemos consultar en la página oficial de descargas, que nos librarian de tener que actualizar la versión actual de la librería
Sin embargo, corremos el riesgo de tener fallos de seguridad si alguien externo introdujera código malicioso en dichos repositorios o quedasen inacesibles por cualquier causa
Para incluirlos simplemente modificariamos el src por la url del repositorio CDN que nos indican
Carga del codigo
Podemos incluir normalmente el código de jQuery dentro de un bloque script como hacemos con Javascript o usar un archivo externo .js donde incluyamos nuestro propio código
Para poder ejecutar nuestras instrucciones será util que el árbol DOM de nuestro HTML se haya cargado completamente, aunque podemos ejecutarlas antes de que ocurra
En el ejemplo se ha optado por cargar el árbol DOM cuando se ha cargado el HTML completamente, incluyendo nuestro código dentro de las llaves
En este otro ejemplo tenemos una versión equivalente que nos permite escribir menos código, elige la que más te guste, aunque la primera es más clara
Sintaxis básica
La sintaxis de jQuery es muy similar a CSS ya que todas las llamadas están compuestas por un selector seguido de una llamada
En el ejemplo podemos ver el símbolo $ que nos permite acceder a los elementos de jQuery
El selector nos permitirá seleccionar elementos concretos dentro del árbol DOM
La acción será una función que nos permite interactuar con el elemento seleccionado por el selector
En los ejemplos tenemos el operador this, que representa el elemento actual seleccionado
‘p’ es una etiqueta HTML válida que representa a un elemento, aquí podremos usar cualquiera de ellas para realizar búsquedas
Cuando veamos con más detalle los selectores, profundizaremos en cómo deben ser esas búsquedas
‘.test’ utiliza el símbolo . para referirnos a que lo que le sigue es una clase, en este caso, la clase test
‘#test’ utiliza el símbolo # para referirnos a que lo que le sigue es un id, en este caso, el id test