+5 Snippets jQuery para manipular tu sitio web

Una de las funcionalidades básicas de jQuery y de las más sencillas de aplicar, son las que modifican el DOM, es decir, el modelo de objetos del documento o otras palabras, la estructura de tu sitio web. Acciones que te permiten agregar, cambiar o eliminar cualquier bloque de código en el documento.

Si no haz usado jQuery, con los siguientes 10 snippets tendrás un ligera idea del potencial de este librería javascript.

1. Agregar/eliminar una clase CSS a un elemento

Especificando un selector, simplemente se usa la función addClass de jQuery para agregar un clase CSS.

Ejemplo: al dar clic en un botón con un id "boton", que agregue la clase "alternativo" a un div con id "header":

$("#boton").click(function () {     $("#header").addClass("alternativo"); })

Y análogamente para removeClass, que cualquier clase establecida en un elemento.

2. Cambiar la hoja de estilos de un documento.

Con jQuey es sencillo seleccionar un elemento a partir de un atributo y también modificarlo con la función attr.

Ejemplo: Cambiar la hoja de estilos de un sitio web al pulsar un link con id "cambiarestilos".

$("#cambiarestilos").click(function () {     $("link[media='screen']").attr("href", "estilos2.css"); })

Análogamente existe una función para remover atributos, con un nombre bastante obvio:removeAttr().

3. Crear un efecto de "zebra".

Gracias al selector "odd", es posible crear tablas o listas con efecto de "zebra", es decir, con estilos intercalados:

Ejemplo: Crear efecto zebra en listas y tablas, agregando una nueva clase llamada "lineazebra".

$("tr:odd").addClass("lineazebra"); $("li:odd").addClass("lineazebra");

4. Verificar si un elemento tiene una clase especifica.

Con la función hasClass() es bastante sencillo saber si un elemento contiene una clase o no.

Ejemplo: Si un párrafo tiene un texto bajo la clase "cita", agregarle una nueva clase llamada "quote".

if ( $("p").hasClass("cita") ) {     $(this).addClass("quote"); }

5. Encontrar el elemento más cercano con alguna característica particular.

Con la función closest() se puede encontrar al elemento que cumpla con una característica en particular.

Ejemplo: Encontrar el imagen más cercano a un párrafo y obtener su id.

$("p").closest("div").attr("id");