jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript. Al elaborar los términos, simplifica el recorrido y la manipulación de documentos HTML, el manejo de eventos del navegador, las animaciones DOM, las interacciones Ajax y el desarrollo de JavaScript entre navegadores.
Es un jQuery Selector que se usa para seleccionar el primer elemento del tipo especificado.
Sintaxis:a
$(":first")
Valor devuelto: Selecciona y devuelve el primer elemento.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("p:first").css(
"background-color", "green");
});
</script>
</head>
<body>
<h1>
<center>
Geeks
</center>
</h1>
<p>Geeks for Geeks</p>
<p>jQuery</p>
<p>First Selector</p>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("p:first").css(
"background-color", "green");
});
</script>
</head>
<body>
<h1>
<center>
Geeks
</center>
</h1>
<div style="border:1px solid;">
<p>Geeks for Geeks</p>
<p>jQuery</p>
</div>
<br>
<div style="border:1px solid;">
<p>Geeks for Geeks</p>
<p>jQuery</p>
<p>First Selector</p>
</div>
<p>jQuery:First Selector</p>
</body>
</html>
Producción:
Nota: el código anterior seleccionará solo el primer elemento <p> del primer div. Para seleccionar el primer elemento <p> del segundo uso div: selector de primer hijo.
Navegadores compatibles:
- Google Chrome 90.0+
- Internet Explorer 9.0
- Firefox 3.6
- Safari 4.0
- Ópera 10.5