Currently viewing and reading

AJAX modificando atributos con jquery

Posted by admin in December 1st 2009

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

1	<div id="midiv"></div>

Para elegirlo usariamos en javascript

1	var midiv1 = $("#midiv");

Tomando los valores de un atributo

Ahora que sabemos como elegir un objeto veamos como recoger el valor de cualquiera de sus atributos

1
2
3

var titulo = $("a.milink").attr("title");
var alt = $("img").attr("alt");
var valor = $("#mitexto").attr("value");

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

1	$("#miboton").attr("disabled","disabled");

Cambia la imagen a miimagen.gif además cambia el titulo y el texto alternativo(ALT)

1
2
3
4
5

$("img").attr({
src: "/images/miimagen.gif",
title: "jQuery",
alt: "jQuery Logo"
});

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.