- Cantidad de funciones escritas que nos ahorrarán mucho trabajo.
- Podremos escribir menos código y más compacto.
- Código más legible y mantenible.
- El código generado es crossbrowser, funcionará igual en todos los navegadores.
- Compatible con CSS 3
- Seguro que hay muchas más…
Existen muchos frameworks a la hora de trabajar con javascript. Uno de los más famosos es prototype, quizás por que es el más antiguo.
Javascript se ha convertido en un lenguaje muy importante en Internet, ha dejado verse como un lenguaje con el cual hacer alguna animación y poco más , para convertirse en uno de los pilares de la web 2.0.
Por todo esto me estoy poniendo al día en una librería que a mi me ha gustado mucho: jQuery.
Me gusta por la sencillez con la que puedes empezar a programar y la cantidad de código que ahorras al usarla, además de ser muy lijera.
También me gusta mucho Dojo , un framework muy interesante también y que incluye soporte para persistencia de datos en el lado del cliente, usando para ello Google Gears u otras tecnologías, pero de las que te abstrae y unicamente tendremos que aprender a usar los objetos de Dojo. Parece muy interesante y con seguridad le daré una revisión en un futuro.
Pero vamos a ver que nos ofrece JQuery. Lo primero que vamos a ver es el evento ready, el cual podremos empezar a ejecutar código javascript una vez cargado el DOM.
Si no usaramos esta función y usaramos el clasico evento “onload”, y tubieramos 100 imágenes en la página, tendriamos que esperar a que se bajaran estas 100 imágenes para que el código se empezara a ejecutar. En cambio el evento ready permite que el código javascript se empiece a ejecutar cuando el objeto DOM de la página este cargado, antes de que se bajen las imágenes.
Vamos a ver un ejemplo:
$(document).ready(function() {
$('.rojoNegrita').addClass('grandeAzul');
});
$( ) se utiliza para seleccionar partes del documento HTML. Normalmente recibe como parámetro un string que puede contenet cualquier selector de CSS.
Con la funcion .addClass() se puede añadir la case pasada como parámetro del objeto DOM.
Asociamos una función al evento $(document).ready mediante el cual no tendremos que esperar a que se carguen las imágenes , videos, etc.. en la página, y se ejecutará cuando el DOM del documento HTML este listo.
SELECTORES EN JQUERY
- ETIQUETA: $(‘p’) devuelve todos los párrafos de la página.
- ID: $(‘#cabecera’) devuelve el elemento de la página que con id cabecera.
- CLASE: $(‘.negrita-rojo’) devuelve todos los elementos de la página que contengan la clase negrita-rojo.
jQuery soporta un conjunto básico de los selectors XPath. Por ejemplo :
Para seleccionar todos los párrafos de la página que implementen alguna clase escribiríamos :
$('p[@class]')
Para obtener todos los divs que contengan algun párrafo dentro, escribiríamos:
$('div[p]')
Se pude utilizar lo operadores ^= , $= y *=.
- ^= : para obtener los elementos de una página HTML que contengan un atibuto que empieze por un valor determinado.
- $= : que acabe por un valor determinado.
- *= : que contenga un valor determinado.
Por ejemplo :
$(document).ready(function() {
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('enlacePdf');
$('a[href*= "sitio.com"]').addClass('sitio');
});
Estas clases css deben estar previamente definidas en la página, por ejemplo:
.mailto { color: red; }
.enlacePdf { color:green; }
.sitio { color: yellow; }
De esta forma, los enlaces de tipo malito apareceran en rojo, los enlaces a ficheros pdf verdes y los enlaces a “sitio.com” apareceran en amarillo.
SELECTORES PERSONALIZADOS
Además, jQuery nos provee de selectores personalizados. La sintaxis de estos selectores de jQuery es la misma que la de las pseudoclases de CSS.
Mediante :eq(2) podemos obtener el tercer elemento de la lista devuelta. Se obtiene el tercero ya que las listas devueltas por jQuery son “zero-based”, es decir, empiezan contar desde 0, por lo tanto el 2 es el tercer elemento de la lista.
enlace = $('a.enlacePdf:eq(2)')
En este caso la variable enlace almacena una referencia al tercer enlace que implementa la clase “enlacePdf”.
DAR ESTILO A LAS ELEMENTOS ALTERNOS
Hay ocasiones en que queremos dar estilo a una tabla para que cada fila salga con un color de fondo diferente, segun sea par o impar, para así conseguir una mayor legibilidad.
Para conseguir este efecto jQuery nos provee de dos selectores propios ( o personalizados ) ; “:odd” y “:even”.
.impar {
background-color: #D6D3CE;
}
.par {
background-color: #FFFFFF;
}
Después, mediante los selectors :odd y :even , aplicamos los estilos a cada elemento tr de la página.
$(document).ready(function() {
$('tr:odd').addClass('impar');
$('tr:even').addClass('par');
});
Por último, el selector personalizado “:contains” seleccionara los elementos que contengan el string pasado como parámetro al selector.
var parrafos = $('p:contains("Hola")') ;
La variable párrafos contendrá una lista de elementos que contengan el string «Hola». Después podriamos aplicarles un estilo a estos parrafos :
parrafos.addClass('subrayado');
De esta forma aplicamos la clase subrayado a todos los párrafos que contengan la palabra «Hola».