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

  • Por
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().
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

IVAN

09/2/2011
ESTA DEMAS indiceArray
indiceArray es un parametro que esta demas, funciona igual si lo quitamos y queda algo como esto:
$('input.fecha').attr("value", function(){

eduardobape

18/1/2013
removeAttr("nowrap") funciona en Internet Explorer
El tutorial dice:

<<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.>>

Yo estoy probando con JQuery 1.9 y, si pongo removeAttr("nowrap"), también funciona en Internet Explorer 8.
Creo que la ventaja de usar el método removeAttr() de JQuery frente al uso del método removeAttribute() de JavaScript es que podamos indicar como parámetro un nombre de atributo HTML sin importar las mayúsculas o las minúsculas que tenga.

Jorge Palomo

18/7/2013
Opinion incorrecta sobra el indiceArray
"indiceArray es un parametro que esta demas, funciona igual si lo quitamos y queda algo como esto:
$('input.fecha').attr("value", function(){"

No es que sea un parámetro que esta demás, si no que obviamente se convierte en una variable para utilizar dentro del function de javascript, haya tu si lo quieres usar o no, como bien dice te da el valor del indice de ese elemento en el objeto de JQuery, no colocarlo seria incorrecto, pero puesto que hablamos de JS, se ejecuta aunque no lo coloques.