En JavaScript, tenemos muchas bibliotecas diferentes para diferentes propósitos. jQuery también es parte de la biblioteca de JavaScript que está hecha para simplificar los códigos de JavaScript, y puede hacer animaciones para que su sitio web sea más creativo y dinámico.
Antes de aprender la biblioteca jQuery, debe tener un conocimiento básico de HTML, CSS y JavaScript.
En este artículo, veremos cómo encontrar el atributo de título del primero enfatizado en la página usando jQuery. El título es un atributo, no un elemento que forma parte del elemento principal. Acentuado es un elemento que se utiliza para dar más importancia a ese texto.
Método/función utilizada –
- .click() : este método activa el evento de clic para que se ejecute cuando se produce un evento de clic.
- .attr() : se utiliza para obtener el valor de un atributo para el primer elemento del conjunto de elementos coincidentes.
- .text() : se utiliza para obtener los contenidos de texto combinados de cada elemento en el conjunto de elementos coincidentes, incluidos sus descendientes.
Ejemplo 1: en los siguientes ejemplos primero, encontraremos el elemento enfatizado e imprimiremos el valor del título después de hacer clic en el botón.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>
GeeksForGeeks
<em title="is a computer science portal for geeks.">
(GFG)
</em>.
</p>
<p id="id1"></p>
<button id="button1">
Click to see what is there in the title attribute
</button>
<script>
$("#button1").click(function () {
var title = $("em").attr("title");
$("#id1").text(title);
});
</script>
</body>
</html>
Salida: El texto presente en el párrafo y el elemento enfatizado se muestra seguido del botón. Después de hacer clic en el botón, puede ver el texto (valor) presente en el atributo del título .
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>John <em title="You Can't see me">Cena</em>.</p>
<p id="id1"></p>
<button id="button1">
Click to see what is there in the title attribute
</button>
<script>
$("#button1").click(function () {
var title = $("em").attr("title");
$("#id1").text(title);
});
</script>
</body>
</html>
Producción:
Antes de hacer clic:
