JavaScript está de moda, eso es un hecho. Y esto es así debido a librerías como jQuery, que simplifican mucho la forma de trabajar con él. Todo lo que se puede hacer con jQuery se puede lograr también con JavaScript directamente, pero teniendo que teclear mucho más código y sufriendo adaptándolo para que funcione en todos los navegadores; jQuery nos libera de ésto y de mucho más.
No soy ningún experto en jQuery, ni mucho menos, pero con este pequeño curso básico intentaré enseñar, de manera práctica, a dar los primeros pasos y de paso pondré en orden lo que he aprendido hasta ahora. Iré mezclando jQuery y también jQueryUI, mostrando cosas básicas de uno y cómo trabajar con controles del otro.
En éste primer post veremos cómo utilizar los selectores básicos de jQuery para interactuar con los diferentes elementos de una página HTML. En la siguiente entrada mostraré otros selectores más avanzados, para no hacer de cada entrada un libro. Pero lo primero de todo es saber cómo incluir jQuery en nuestra web, y qué opciones tenemos. Vamos a ello:
Cómo incluir jQuery en tu página web
Existen dos maneras de incluir la librería jQuery en nuestra página. La primera de ellas es utilizar una versión alojada en un proveedor de contenido externo, como puede ser Google y su Google Hosted Libraries. Si optamos por este método, nuestra página cargará la librería desde el repositorio de Google, y para ello deberemos incluir en la sección <head> de nuestra página la línea siguiente:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
La segunda manera es descargarnos la librería directamente de la página de jQuery y guardarla en la raíz de nuestro servidor web, en una carpeta llamada js, por ejemplo. Hay dos versiones diferentes: la comprimida y la descomprimida. Ambas son iguales, con la diferencia de que la comprimida elimina los espacios y es más ilegible, pero también pesa menos y carga más rápido, por ello es la recomendable. Si queremos revisar el código, descargaremos la descomprimida.
Para utilizar la librería recién descargada, insertaremos una línea en la cabecera de nuestra página parecida a ésta, dependiendo del destino que hayamos escogido:
<script src="js/jquery-1.9.1.min.js"></script>
Siempre es mejor trabajar de esta manera en vez de con un proveedor externo, para no depender de éstos, que podrían tener problemas y no dar servicio. Además, para entornos de desarrollo, donde puede que no siempre tengamos conexión (ahora que está de moda trabajar desde cafeterías), es la mejor opción.
Una vez que tenemos la librería incluida en nuestra página, sigamos con el siguiente paso: los selectores.
Selectores
Como ya sabemos (y si no, deberías aprender HTML antes de revisar este curso), las páginas web están compuestas de etiquetas, a las cuales se aplican estilos CSS, o se les aplica identificadores únicos. Vamos a ver cómo alcanzar desde jQuery a cada uno de los elementos para poder interactuar con ellos. La sintaxis para utilizar los selectores jQuery es la siguiente:
$('selector').funcion();
El símbolo ‘$‘ es el alias de jQuery; indica que tiene que ser interpretado por éste. Se puede sustituir por la sentencia jQuery, pero además de ser más rápido de teclear, personalmente me parece que es más identificable al revisar el código.
Después viene, entre paréntesis, el selector, que será de cualquiera de los tipos que veremos a continuación. Finalmente, mediante un punto llamaremos a la función que necesitemos, y podremos encadenar diferentes funciones poniendo siempre un punto entre una y otra.
Seleccionar por etiqueta HTML
Podemos acceder a cualquier etiqueta HTML desde javascript mediante la función nativa getElementsByTagName(), de la siguiente manera:
document.getElementsByTagName('h1');
jQuery utiliza internamente esta función nativa también, pero simplifica su sintaxis y nos permite encadenar acciones sobre los elementos. Por ejemplo, para cambiar el color de fondo a gris y el texto a blanco de todas las etiquetas <h1> de nuestra página, utilizaremos la linea siguiente:
$("h1").css("background-color","grey").css("color","white");
Hemos encadenado dos funciones de jQuery, concretamente la que nos permite variar un atributo CSS, y que admite dos parámetros: el primero es el atributo a cambiar, y el segundo es el nuevo valor que queremos que tome. Podemos ver un ejemplo aquí.
Seleccionar por clase CSS
Pero no siempre querremos acceder a todas las etiquetas del mismo tipo, sino solamente a algunos elementos concretos. Por ejemplo, si queremos acceder a los elementos que tengan una clase CSS concreta, podemos utilizar la función nativa de Javascript:
document.getElementsByClassName('desactivado');
Nuevamente, jQuery nos simplifica la sintaxis y su posterior manipulación utilizando la siguiente sintaxis:
$('.desactivado').css('opacity', '0.5');
El ejemplo indicado obtiene todos los elementos que tengan la clase ‘.desactivado’ y les aplica una opacidad de 0.3, es decir, que serán un 70% transparentes. El ejemplo se puede ver aquí.
Si nos fijamos atentamente, veremos que al comienzo del nombre del elemento, ‘.desactivado‘, se ha añadido un punto. Ésto indica a jQuery que el selector que le indicamos es una clase CSS, y buscará las etiquetas que contengan esa clase para aplicar la transformación indicada. No es necesario que la clase exista en nuestro CSS, así que podemos asignar clases a las etiquetas que luego solamente utilizaremos para tratar con jQuery.
Seleccionar por ID de elemento
Podemos asignar un identificador (ID) a cualquier etiqueta de nuestra página, y así tener una referencia que nos conducirá a ella. El ID ha de ser único, ningún otro elemento debe tenerlo o el comportamiento no será el esperado. La manera de acceder a un elemento por su ID en Javascript tradicional es:
document.getElementById('email');
Sin embargo, con jQuery utilizaremos el prefijo (‘#’) en el nombre del selector para indicarle que se trata de un ID de elemento:
$('#email').css('border', '2px solid red');
La línea superior encaja en el siguiente ejemplo, en el que vemos un formulario al que hemos marcado en rojo con un grosor de 2 píxeles el campo con el ID email.
Éstos son los selectores principales, pero hay algunos más que veremos en una futura entrada para no hacer ésta más extensa.
Dejar un comentario