Ver el código de «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:
<source lang="javascript">
$('img').each(function(n){
      this.alt='Esta é a imaxe ['+n+'] cun id de '+this.id;
});
</source>
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:
<source lang="javascript">
var todosAtributos = new Array();
$('img').each(function(){
     todosAtributos.push(this.alt);
});
</source>

Si queremos obter o valor dunha propiedade dun elemento en particular, poderíamos facelo así:
<source lang="javascript">
var valorAlt = $('#imaxe')[0].alt;
</source>

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:
<source lang="javascript">
$("input").attr("size");
</source>

'''attr(propiedades)''': permítenos establecer valores ós atributos : { attr1: "valor", attr2:valor,... }

Exemplo:
<source lang="javascript">
$("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" });
</source>

'''attr(atributo,valor)''': establece un valor para un atributo. Exemplo:
<source lang="javascript">
$("img").attr( "alt", "Imaxe de Santiago de Compostela");
</source>

[http://docs.jquery.com/Attributes 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:
<source lang="javascript">
$('img').removeAttr("alt")
</source>
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:
<source lang="javascript">
$("a[href^=http://]").attr("target","_blank");
</source>

Queremos que cando pulsemos o botón de enviar nun formulario éste quede deshabilitado:

<source lang="javascript">
$("form").submit(function() {
  $(":submit",this).attr("disabled", "disabled");
});
</source>
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.

<table border="1">
  <tr>
    <td width="164" align="center" bgcolor="#79ADEC"><strong>Selector</strong></td>
    <td width="819" align="center" bgcolor="#79ADEC"><strong>Descripcion</strong></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:animated</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos que están baixo o control dunha animación.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:button</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona calqueira botón. Equivaldría ó selector: &quot;input[type=submit],input[type=reset],input[type=button]&quot;.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:checkbox</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo checkbox (input[type=checkbox]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:checked</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo checkbox ou radio que estén chequeados (soportado por CSS).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:contains(texto)</strong></div></td>
    <td align="center" valign="top"><div align="left">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.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:disabled</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos que estén deshabilitados (soportado por CSS).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:enabled</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos que estén habilitados (soportado por CSS).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:file</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona todos os elementos de tipo file (input[type=file]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:header</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona soamente elementos que son cabeceiras; por exemplo &lt;h1&gt; ... &lt;h6&gt;</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:hidden</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona os elementos que están ocultos.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:image</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos input de tipo imaxen. (input[type=image])</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:input</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos do formulario (input, select, textarea, button).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:not(filtro)</strong></div></td>
    <td align="center" valign="top"><div align="left">Nega o filtro especificado.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:parent</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona soamente elementos que teñen fillos (incluindo texto), pero non elementos vacíos.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:password</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo password (input[type=password]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:radio</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo radio (input[type=radio]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:reset</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona botóns de tipo reset (input[type=reset] ou button[type=reset]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:selected</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos do desplegable que estén seleccionados.</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:submit</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona botóns de tipo submit (button[type=submit] ou input[type=submit]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:text</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona elementos de tipo texto (input[type=text]).</div></td>
  </tr>
  <tr>
    <td valign="top"><div align="center"><strong>:visible</strong></div></td>
    <td align="center" valign="top"><div align="left">Selecciona os elementos que están visibles.</div></td>
  </tr>
</table>

--[[Usuario:Veiga|Veiga]] ([[Usuario discusión:Veiga|discusión]]) 22:56 26 ene 2015 (CET)