El first() es una función incorporada en jQuery que se usa para seleccionar el primer elemento de los elementos especificados.
Sintaxis:
$(selector).first()
Aquí selector es la clase principal de todos los elementos.
Parámetros: No acepta ningún parámetro.
Valor devuelto: Devuelve el primer elemento de los elementos seleccionados.
Código jQuery para mostrar el funcionamiento de esta función:
Código #1:
html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").first().css("background-color",
"lightgreen");
});
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks !!!</h1>
<div style="border: 1px solid green;">
<p>This is the first statement.</p>
</div>
<br>
<div style="border: 1px solid green;">
<p>This is the second statement.</p>
</div>
<br>
<div style="border: 1px solid green;">
<p>This is the third statement.</p>
</div>
<br>
</body>
</html>
En el código anterior, se cambia el color de fondo del primer elemento «div».
Producción:
Aquí, también puede elegir seleccionando «id» o «clase» del elemento seleccionado.
Código #2:
html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".main").first().css("background-color",
"lightgreen");
});
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks !!!</h1>
<div style="border: 1px solid green;">
<p>This is the first statement.</p>
</div>
<br>
<div class="main" style="border: 1px solid green;">
<p>This is second statement.</p>
</div>
<br>
<div class="main" style="border: 1px solid green;">
<p>This is the third statement.</p>
</div>
<br>
</body>
</html>
En el código anterior, los elementos con la primera clase «principal» se resaltan.
Producción:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA