Atributos y Clases JQuery

Posted on Actualizado enn


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 !!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s