.addClass() de jQuery agrega clases CSS a los elementos seleccionados, permitiendo aplicar estilos específicos sin modificar el HTML o CSS existente.
Leer másMétodos.
Métodos.
El método .first() de jQuery se utiliza para seleccionar el primer elemento de un conjunto de elementos coincidentes. Es útil cuando deseas trabajar específicamente con el primer elemento de un grupo seleccionado.
Definición:
El método .first() de jQuery selecciona el primer elemento del conjunto de elementos coincidentes.
Sintaxis:
index.js
JavaScript
$(selector).first();selector: Un selector que indica el conjunto de elementos del cual se seleccionará el primer elemento.
Ejemplo:
Seleccionar y estilizar el primer párrafo de un contenedor.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo .first().</title>
<style>
.resaltado {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonResaltar").click(function() {
// Selecciona el primer párrafo de la página
$("p").first().addClass("resaltado");
});
});
</script>
</head>
<body>
<button id="botonResaltar">Resaltar Primer Párrafo</button>
<p>Párrafo 1: Este es el primer párrafo.</p>
<p>Párrafo 2: Este es el segundo párrafo.</p>
<p>Párrafo 3: Este es el tercer párrafo.</p>
</body>
</html>
index.js
JavaScript
$("p").first().addClass("resaltado");Explicación del Ejemplo:
En este ejemplo, tenemos un div con el id contenedor que contiene tres párrafos. Al hacer clic en el botón “Resaltar Primer Párrafo”, se ejecuta una función que:
- Selecciona el primer párrafo dentro del
divcon idcontenedorusando$("#contenedor p").first(). - Aplica la clase
resaltadoal primer párrafo, que cambia su fondo a amarillo.
Resultado.
Párrafo 1: Este es el primer párrafo.
Párrafo 2: Este es el segundo párrafo.
Párrafo 3: Este es el tercer párrafo.
