En este artículo, discutiremos cómo usar jQuery para buscar y reemplazar elementos HTML. Al igual que en Vanilla JavaScript (JavaScript puro), jQuery también presenta selectores para seleccionar las etiquetas HTML para que podamos manipular el contenido y las propiedades de las etiquetas HTML. Usando los selectores de jQuery podemos seleccionar elementos por nombre de etiqueta, nombre de identificación, nombre de clase y también por la ubicación de la etiqueta.
En el siguiente ejemplo, usamos dos métodos jQuery: uno para agregar contenido a las etiquetas HTML existentes y otro para agregar nuevas etiquetas HTML en el cuerpo.
1. texto( ) : el método selecciona la etiqueta y el argumento de la función de texto agrega texto a las etiquetas preexistentes. El argumento es seguro para HTML, lo que significa que el contenido se copiará exactamente en la etiqueta independientemente del código HTML que se pase como argumento.
2. html( ) : el método selecciona la etiqueta y el argumento de la función html agrega el contenido a la etiqueta seleccionada. Es específico de HTML, lo que significa que verificará si el argumento es un contenido HTML y lo agregará en consecuencia.
HTML
<!DOCTYPE html>
<html>
<head>
<title>jQuery!!!</title>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<style type="text/css">
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks Geeks</h1>
<br>
<button class="one">Correct Me!</button>
<br>
<br>
<button class="two">Add Me!</button>
<br>
<span></span>
<script type="text/javascript">
$(".one").click(function()
{
$("h1").text("Geeks for Geeks!");
});
$(".two").click(function()
{
$("span").html("<h3>You can also Contribute.</h3>");
});
</script>
</body>
</html>
Salida: página después de ejecutar el archivo HTML anterior
Después de hacer clic en «¡Corrígeme!» botón
Después de hacer clic en «¡Agregarme!» Botón
Otras funciones jQuery importantes:
3. css( ) : el método se utiliza para seleccionar y manipular las propiedades CSS del elemento.
4. attr( ) : el método devuelve y cambia el atributo de una etiqueta HTML.
5. val( ) : El método devuelve el valor de todas las etiquetas que tienen el atributo de valor. También puede establecer el valor pasándole un argumento.
Si uno quiere agregar múltiples propiedades CSS a una etiqueta, entonces el método más apropiado es otorgar propiedades a una clase y luego eliminar, agregar o alternar la clase en una etiqueta. Esta propiedad hace que jQuery sea muy fácil de usar y manejar.
jQuery proporciona addClass( ), removeClass( ) y toggleClass( ) para agregar, eliminar y cambiar una clase a una etiqueta en HTML.