Contenido.
Contenido.
El método .attr() de jQuery se utiliza para obtener o establecer el valor de un atributo de los elementos seleccionados. Esto es útil para manipular dinámicamente los atributos de los elementos HTML, como href, src, title, entre otros.
Definición:
El método .attr() se puede usar tanto para obtener el valor de un atributo como para establecer un nuevo valor para un atributo.
Sintaxis:
Sintaxis para obtener el valor de un atributo:
index.js
JavaScript
$(selector).attr(attributeName);selector: Un selector de jQuery que selecciona los elementos cuyos atributos se van a manipular.attributeName: El nombre del atributo cuyo valor se quiere obtener.
Sintaxis para establecer el valor de un atributo:
index.js
JavaScript
$(selector).attr(attributeName, value);selector: Un selector de jQuery que selecciona los elementos cuyos atributos se van a manipular.attributeName: El nombre del atributo que se va a establecer o modificar.value: El nuevo valor del atributo.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .attr() en jQuery</title>
<style>
.imagen {
display: block;
margin: 10px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
// Obtener el valor del atributo src
var srcInicial = $("#imagen").attr("src");
console.log("Fuente inicial de la imagen:", srcInicial);
// Establecer un nuevo valor para el atributo src
$("#botonCambiar").click(function(){
$("#imagen").attr("src", "https://via.placeholder.com/150");
});
});
</script>
</head>
<body>
<button id="botonCambiar">Cambiar Imagen</button>
<img id="imagen" class="imagen" src="https://via.placeholder.com/100" alt="Imagen de ejemplo">
</body>
</html>
index.js
JavaScript
// Obtener el valor del atributo src
var srcInicial = $("#imagen").attr("src");
console.log("Fuente inicial de la imagen:", srcInicial);
// Establecer un nuevo valor para el atributo src
$("#botonCambiar").click(function(){
$("#imagen").attr("src", "https://via.placeholder.com/150");
});Explicación del Ejemplo:
En este ejemplo, cuando el documento está listo, el script obtiene el valor del atributo
src de la imagen con el id “imagen” y lo muestra en la consola. Al hacer clic en el botón con el id “botonCambiar”, el método .attr() cambia el valor del atributo src de la imagen a “https://via.placeholder.com/150“, actualizando la fuente de la imagen en el DOM.Resultado.
