sábado, 11 de octubre de 2014

Lectura de un atributo

El primer uso de attr() es para recuperar el valor de un atributo. En este caso, el método debe recibir una cadena con el nombre del atributo que queremos recuperar. 
Ahora podríamos acceder a lo que hay escrito en el campo de texto de la siguiente manera:

$("#campotexto").attr("value")

Pero atención, en el caso que invoquemos el método attr sobre un objeto jQuery que contenga varios elementos a la vez, attr() en este caso devolvería el valor del atributo del primero de los elementos que haya en el objeto jQuery. Además, en caso que el elemento no tenga definido ese atributo al que se pretenda acceder, devolvería undefined.
Veamos un ejemplo, también simple, pero un poco más elaborado. Tenemos varios enlaces en la página, con este código HTML:

<a href="http://www.elpais.com" title="Diario El País">El País</a>
<br>
<a href="http://www.mozilla.org" title="Fundación Mozilla">Mozilla Fundation</a>
<br>
<a href="http://es.openoffice.org/" title="Siute de programas de oficina">Open Office</a>
Si hacemos algo como esto:
$("a").attr("title")
Obtendremos el valor del atributo title del primero de los enlaces. Como tenemos tres enlaces en la página, $("a") nos devolvería un objeto jQuery que contiene esos tres enlaces, pues recordar, que attr("title") devuelve el valor del atributo "title" del primero de los elementos del objeto jQuery. Ahora bien, si quisiéramos obtener el valor del atributo "title" de todos los elementos, tendríamos que hacer un recorrido a cada uno de los enlaces con el método each del core de jQuery http://www.desarrolloweb.com/articulos/core-each-jquery.html. Veamos un ejemplo de una página completa que hace ese recorrido con each para recuperar todos los valores de los atributos title de los enlaces que haya en la página:
<html>
<head>
<title>método attr</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a").each(function(i){
var titulo = $(this).attr("title");
alert("Atributo title del enlace " + i + ": " + titulo);
});
});
</script>
</head>
<body>
<a id="enlace1" href="http://www.elpais.com" title="Diario El País">El País</a>
<br>
<a href="http://www.mozilla.org" title="Fundación Mozilla">Mozilla Fundation</a>
<br>
<a href="http://es.openoffice.org/" title="Siute de programas de oficina">Open Office</a>
</body>
</html>

No hay comentarios:

Publicar un comentario