Propiedades e atributos dos elementos con jQuery
Manipulando propiedades nos elementos
jQuery non dispón dun comando específico para obter ou modificar as propiedades dos elementos. Polo tanto usaremos a notación de JavaScript para acceder ás propiedades e ós seus valores.
A forma máis fácil de inspeccionar ou modificar os compoñentes dos elementos é co método each().
Vexamos o seguinte exemplo:
$('img').each(function(n){
this.alt='Esta é a imaxe ['+n+'] cun id de '+this.id;
});
A instrucción anterior chamará á función para cada elemento que atope no documento, modificando o atributo alt do obxecto e asignándolle o texto correspondente.
De xeito semellante, poderíamos conseguir nun array todos os valores dun atributo específico:
var todosAtributos = new Array();
$('img').each(function(){
todosAtributos.push(this.alt);
});
Si queremos obter o valor dunha propiedade dun elemento en particular, poderíamos facelo así:
var valorAlt = $('#imaxe')[0].alt;
Traballar con atributos non é tan sinxelo como traballar con propiedades en JavaScript, polo que jQuery proporcionanos asistencia para traballar con eles, vexamos no seguinte apartado como facelo.
Consulta e modificación de valores dos atributos
O comando attr() pode ser empregado para ler ou escribir. A diferenciación virá dada polo número de argumentos que se lle pasan o comando.
attr(name): accede ó atributo do elemento. Exemplo:
$("input").attr("size");
attr(propiedades): permítenos establecer valores ós atributos : { attr1: "valor", attr2:valor,... }
Exemplo:
$("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" });
attr(atributo,valor): establece un valor para un atributo. Exemplo:
$("img").attr( "alt", "Imaxe de Santiago de Compostela");
Máis información e exemplos sobre comando attr()
Eliminación de atributos
Para eliminar os atributos dun elemento jQuery proporciona o método removeAttr():
Exemplo:
$('img').removeAttr("alt")
Eliminará todos os atributos alt das imaxes do documento.
Miscelánea
Imaxinade que temos un blog instalado e queremos que todos os hiperenlaces externos que a xente escriba no blog se abran nunha nova ventana do navegador.
Isto podémolo conseguir pondo no atributo target o valor _blank:
$("a[href^=http://]").attr("target","_blank");
Queremos que cando pulsemos o botón de enviar nun formulario éste quede deshabilitado:
$("form").submit(function() {
$(":submit",this).attr("disabled", "disabled");
});
Este código cando se produza o evento de envío de calquera formulario, deshabilitará o botón submit de dito formulario.
O segundo parámetro this no selector, fai referencia ó elemento da páxina para o cal foi asignado o evento submit().
Aquí tedes de novo a táboa de selectores avanzados en jQuery para recordar o que fai :submit.
Selector | Descripcion |
:animated |
Selecciona elementos que están baixo o control dunha animación. |
:button |
Selecciona calqueira botón. Equivaldría ó selector: "input[type=submit],input[type=reset],input[type=button]". |
:checkbox |
Selecciona elementos de tipo checkbox (input[type=checkbox]). |
:checked |
Selecciona elementos de tipo checkbox ou radio que estén chequeados (soportado por CSS). |
:contains(texto) |
Selecciona elementos que conteñan o texto pasado como parámetro. Non sirve para buscar contido HTML, soamente buscará texto que sexa visible no documento. |
:disabled |
Selecciona elementos que estén deshabilitados (soportado por CSS). |
:enabled |
Selecciona elementos que estén habilitados (soportado por CSS). |
:file |
Selecciona todos os elementos de tipo file (input[type=file]). |
:header |
Selecciona soamente elementos que son cabeceiras; por exemplo <h1> ... <h6> |
:hidden |
Selecciona os elementos que están ocultos. |
:image |
Selecciona elementos input de tipo imaxen. (input[type=image]) |
:input |
Selecciona elementos do formulario (input, select, textarea, button). |
:not(filtro) |
Nega o filtro especificado. |
:parent |
Selecciona soamente elementos que teñen fillos (incluindo texto), pero non elementos vacíos. |
:password |
Selecciona elementos de tipo password (input[type=password]). |
:radio |
Selecciona elementos de tipo radio (input[type=radio]). |
:reset |
Selecciona botóns de tipo reset (input[type=reset] ou button[type=reset]). |
:selected |
Selecciona elementos do desplegable que estén seleccionados. |
:submit |
Selecciona botóns de tipo submit (button[type=submit] ou input[type=submit]). |
:text |
Selecciona elementos de tipo texto (input[type=text]). |
:visible |
Selecciona os elementos que están visibles. |