DesarrolloWeb.com > Manuales > Manual de jQuery

Método attr() de jQuery, otros usos y removeAttr()

29 de diciembre de 2009

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (1)

Un uso adicional del método attr() de jQuery, para modificar atributos con el valor devuelto de una función y borrar atributos de elementos de la página con removeAttr().

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

En el artículo anterior del Manual de jQuery ya comenzamos a explicar el método attr(), que pertenece al paquete de funciones para modificación de atributos de cualquiera de los elementos de una página web. En esta ocasión nos detendremos un uso adicionale del método attr(), que seguro nos resultarán útiles para mantener el control dinámico de los atributos de las etiquetas HTML, con sus correspondientes ejemplos. Este uso que nos faltaba por ver nos servirá cuando tenemos que asignar el valor de un atributo con la respuesta de una función Javascript.

Además veremos también en este artículo otro método relacionado que sirve para eliminar por completo un atributo de cualquier elemento de la página, el método removeAttr().

Asignar un valor de atributo procesado por una función

Podemos también enviar una función para procesar el valor que queremos asignar a un atributo. Para ello enviamos a attr() dos parámetros, el primero con el nombre del atributo y el segundo con la función que debe devolver el valor a asignar a dicho atributo.

Para ilustrar este uso de attr() mostraremos un ejemplo en el que desde jQuery accedemos a los elementos INPUT de la página que tienen la clase CSS "fecha" y le insertamos como texto a mostrar la fecha de hoy. Para obtener el día actual necesitamos procesar cierto código Javascript y para ello crearemos una función que devuelve la cadena de texto con la fecha.

$('input.fecha').attr("value", function(indiceArray){
   //indiceArray tiene el índice de este elemento en el objeto jQuery
   var f = new Date();
   return f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear();
});

Para que se asimile mejor el uso de jQuery en una página, mostramos el código completo de este ejemplo.

<html>
<head>
   <title>método attr</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

   $('input.fecha').attr("value", function(indiceArray){
      //indiceArray tiene el índice de este elemento en el objeto jQuery
      var f = new Date();
      return f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear();
   });

});
</script>
</head>

<body>
<form>
<input type="text" class="fecha">
<input type="text" class="nofecha">
<input type="text" class="fecha">
</form>

</body>
</html>

Si se desea, se puede ver en marcha el ejemplo en una página aparte.

Eliminar un atributo de uno o varios elementos con removeAttr()

Para acabar vamos a ver otro método distinto de los objetos jQuery, que sirve para borrar un atributo. Este sencillo método, llamado removeAttr(), simplemente recibe una cadena con el nombre del atributo que queremos eliminar y lo borra del elemento. Es decir, no es que se asigne un nuevo valor a un atributo, como ocurría con el método attr(), sino que ese atributo se borra por completo de la etiqueta, con lo cual no existirá en ningún caso, tomando el valor por defecto, si es que existe, que tenga configurado el navegador.

Para mostrarlo vamos a hacer un ejemplo en el que tenemos una celda de una tabla con nowrap, con lo que el texto de esa celda aparece todo en la misma línea. Luego quitamos el atributo y veremos que el texto de la celda se partirá en varias líneas. Esto lo hacemos simplemente enviando el valor "noWrap" al método removeAttr().

El código de este ejemplo es el siguiente.

<html>
<head>
   <title>método removeAttr</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

   $("#boton").click(function(i){
      $("td").removeAttr("noWrap");
   });

});
</script>
</head>

<body>
<table width="50">
<tr>
<td nowrap>
Esta celda tiene un nowrap, con lo que todo el texto se muestra en la misma línea!
Pero realmente la tabla mide 50 pixeles de anchura, luego tendrían que aparece varias líneas!
</td>
</tr>
</table>

<input type="Button" id="boton" value="Quitar nowrap">

</body>
</html>

Un detalle es que en la línea que se hace la llamada al método removeAttr("noWrap"), el nombre del atributo "noWrap" tiene que estar escrito con la "W" mayúscula para que funcione en Explorer.

Podemos ver el ejemplo de removeAttr() en marcha en una página aparte.