Siguiendo con los artículos sobre AJAX y jquery veamos ahora como modificar atributos de algún elemento de nuestra página web, primero a modo de introducción veremos como funcionan los selectores en jquery y luego veamos como capturar y/o modificar atributos
Selectores en jquery
Los selectores de jquery funcionan igual que los selectores de jquery para elegir objetos(div, p, input…), clases(.miclase) o id(#miid), por ejemplo para seleccionar un DIV
[cc lang=»html»]
[/cc]
Para elegirlo usariamos en javascript
[cc lang=»javascript»]
var midiv1 = $(«#midiv»);
[/cc]
Tomando los valores de un atributo
Ahora que sabemos como elegir un objeto veamos como recoger el valor de cualquiera de sus atributos
[cc lang=»javascript»]
var titulo = $(«a.milink»).attr(«title»);
var alt = $(«img»).attr(«alt»);
var valor = $(«#mitexto»).attr(«value»);
[/cc]
Modificando atributos de un elemento
Hay 2 formas de hacerlo, la primera es mejor cuando se trata de modificar un solo atributo mientras que la segunda sirve para recoger múltiples atributos
Deshabilita un boton
[cc lang=»javascript»]
$(«#miboton»).attr(«disabled»,»disabled»);
[/cc]
Cambia la imagen a miimagen.gif además cambia el titulo y el texto alternativo(ALT)
[cc lang=»javascript»]
$(«img»).attr({
src: «/images/miimagen.gif»,
title: «jQuery»,
alt: «jQuery Logo»
});
[/cc]
Como ven es muy fácil modificar los atributos de cualquier elemento, esto combinado con eventos podriamos hacer que aparezcan o desaparezcan opciones, se habliten botones, se oculten DIV completos, se muestren mensajes de alerta y un largo etc.
Pronto postearé algo más aplicado al manejo de formularios.
