jQuery se utiliza mucho para manipular varios atributos asociados a los elementos HTML. Cada elemento HTML puede tener varios atributos estándar y personalizados (es decir, propiedades) que se utilizan para definir las características de ese elemento HTML.
jQuery nos da los medios para manipular fácilmente (Get y Set) los atributos de un elemento. Primero tratemos de entender un poco sobre los atributos estándar y personalizados de HTML.
Atributos estándar
Algunos de los atributos más comunes son:
- className
- tagName
- id
- href
- title
- rel
- src
- style
Ejemplo
Veamos el siguiente fragmento de código HTML de un elemento de imagen.
<img id="id" src="imagen.gif" alt="Imagen" class="class" title="Esto es una imagen"/>En este elemento, el nombre de la etiqueta es img, y el marcado para id, src, alt, class y title representa los atributos del elemento, cada uno de los cuales consiste en un nombre y un valor.
Atributos personalizados data-*
La especificación HTML nos permite añadir nuestros propios atributos personalizados con los elementos DOM para proporcionar detalles adicionales sobre el elemento. Los nombres de estos atributos comienzan con data-.
Ejemplo
A continuación se muestra un ejemplo en el que proporcionamos información sobre los derechos de autor de la imagen utilizando data-copyright, que es un atributo personalizado.
<img data-copyright="Dev en apuros" id="imageid" src="imagen.gif" alt="Imagen"/>Obtener atributos estándar
El método jQuery attr() se utiliza para obtener el valor de cualquier atributo estándar del elemento(s) HTML coincidente(s). Utilizaremos los selectores de jQuery para encontrar los elementos deseados y luego aplicaremos el método attr() para obtener el valor del atributo del elemento.
Si el selector dado coincide con más de un elemento, entonces devuelve la lista de valores que puede iterar a través de los métodos de jQuery Array.
Example
A continuación se muestra un programa jQuery para obtener los atributos href y title de un elemento <a> anchor:
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
alert( "Href = " + $("#home").attr("href"));
alert( "Title = " + $("#home").attr("title"));
});
});
</script>
</head>
<body>
<p>Haz click en el boton para el ver el resultado:</p>
<p><a id="home" href="index.htm" title="Dev en apuros">Home</a></p>
<button>Ver atributo</button>
</body>
</html>Obtener atributos data
El método jQuery data() se utiliza para obtener el valor de cualquier atributo de datos personalizado del elemento(s) HTML coincidente. Utilizaremos los selectores de jQuery para hacer coincidir los elementos deseados y luego aplicaremos el método data() para obtener el valor del atributo del elemento.
Example
A continuación se muestra un código jQuery para obtener los atributos de nombre de autor y año de un elemento div:
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
alert( "Author = " + $("#home").data("author-name"));
alert( "Year = " + $("#home").data("year"));
});
});
</script>
</head>
<body>
<p>Haz click en el boton para el ver el resultado:</p>
<div id="home" data-author-name="Don Faustino" data-year="2022">
Ejemplo de contenido
</div>
<br>
<button>Ver atributo</button>
</body>
</html>Establecer atributos estándar
El método jQuery attr(name, value) se utiliza para establecer el valor de cualquier atributo estándar del elemento(s) HTML coincidente. Utilizaremos los selectores de jQuery para encontrar los elementos deseados y luego aplicaremos el método attr(key, value) para establecer el valor del atributo para el elemento.
Si el selector dado coincide con más de un elemento, entonces establecerá el valor del atributo para todos los elementos coincidentes.
Ejemplo
A continuación se muestra un programa jQuery para establecer el atributo title de un elemento de <a>:
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#home").attr("title", "Nuevo titulo Anchor");
/* Obtenemos y mostramos el título cambiado */
alert( "Título cambiado = " + $("#home").attr("title"));
});
});
</script>
</head>
<body>
<p>Haz click en el boton para el ver el resultado:</p>
<p><a id="home" href="index.htm" title="Dev en apuros">Home</a></p>
<button>Modificar atributo</button>
<p>Tu puedes pasar el mouse sobre el link de la Home para verificar el titulo de antes y después.</p>
</body>
</html>Establecer atributos personalizados
El método jQuery data(name, value) se utiliza para establecer el valor de cualquier atributo personalizado de los elementos HTML coincidentes. Utilizaremos los selectores de jQuery para hacer coincidir los elementos deseados y luego aplicaremos el método attr(key, value) para establecer el valor del atributo para el elemento.
Si el selector dado coincide con más de un elemento, entonces establecerá el valor del atributo para todos los elementos coincidentes.
Ejemplo
El siguiente es código de jQuery es para establecer el atributo author-name de un elemento div:
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("#home").data("author-name", "Pepito Pérez");
/* Obtenemos y mostramos el nombre cambiado */
alert( "Nombre cambiado = " + $("#home").data("author-name"));
});
});
</script>
</head>
<body>
<p>Haz click en el boton para el ver el resultado:</p>
<div id="home" data-author-name="Josefina García" data-year="2022">
Algún contenido
</div>
<br>
<button>Modificar atributo</button>
</body>
</html>