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
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.
Es muy interesante esta info, gracias.
Llevo días intentando cambiar las propiedades de un botón con jquery y ajax en dependencia de si existen o no unos datos en una base de datos sql. He coseguido enviar unos datos pero quisiera agregarle el cambio al boton.
Para que me entiendan mejor, necesito marcar los capitulos vistos de una serie.
Si entran en mi pagina http://www.tubeonline.net en alguna serie podrán ver a lo que me refiero.
Espero alguien pueda ayudarme en esto, le estaría muy agradecido.