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.

--Veiga (discusión) 22:56 26 ene 2015 (CET)