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");

Más snippets jQuey

La idea de los 5 sinippets listados es mostrar la punta del iceberg con jQuery, existen una gran cantidad de snippets que te ayuda a mejorar la experiencia de tus visitantes en tu sitio web: