Hola a todos, continuando con los post acerca de JQuery, hoy vamos a tener un post bastante corto pero muy consiso, vamos a revisar como podemos acceder a los elementos del DOM y poder modificar sus atributos y sus clases css muy facilmente.

Añadir/Eliminar atributos:

  1. Añadir atributo simple: Permite agregar una atributo a un elemento, la sintaxis general es: $(“selector”).attr(“nombreatributo”,”valor”), si por ejemplo a un elemento de tipo imágen le quisieramos agregar un título, hariamos algo como: $(“#img1″).attr(“title”,”Título añadido por JQuery”).
  2. Añadir atributo múltiple: Permite agregar varios atributos a un elemento en la misma funcíon, la sistaxis entonces a utilizar es: $(“selector”).attr({nombreatributo1:”valor”, nombreatributo2:”valor”})
  3. Eliminar un atributo: Permite eliminar un atributo a un elemento, la sintaxios general es: $(“selector”).removeAttr(“nombreatributo”), en este caso, si quisieramos eliminar el atributo title a la imágen del punto 1 sería: $(“#img1″).remoteAttr(“title”)

Añadir/Eliminar clases:

  1. Añadir clase: Permite agregar una clase a un elemento, la sintaxis general es: $(“selector”).addClass(“nombreclase”).
  2. Eliminar clase: Permite eliminar una clase de un elemento, la sintaxis general es: $(“selector”).remoteClass(“nombreclase”)
  3. Eliminar todas las clases: Permite eliminar todas las clases asociadas a un elemento, la sintaxis muy parecida al anterior punto, solo que en este clase no se especifica ningún parámetro: $(“selector”).removeClass()

Un claro ejemplo de como podemos aplicar la asignación/eliminación de clases dinámicas es cuando queremos que el usuario defina su look and feel, en el ejemplo (bastante sencillo) tenemos una grilla con algunos datos, y el usuario dispone de tres diferentes estilos para su tabla de datos:

Espero este corto post les sea de utilidad, proximamente hablaremos sobre como definir eventos en jquery, como siempre les dejo el código con el ejemplo.

Link al ejemplo !!