La funcionalidad más importante de jQuery la proporcionan sus selectores. Este tutorial explicará los selectores de jQuery con ejemplos sencillos que cubren los tres selectores estándar.
Los selectores de jQuery se utilizan para seleccionar elementos de un documento HTML. Imagina que necesitas seleccionar todos los <div> de un HTML. Aquí es donde los selectores jQuery te ayudarán.
Los selectores de jQuery pueden encontrar elementos HTML (es decir, seleccionar elementos HTML) basándose en lo siguiente:
- Nombre del elemento HTML
- ID del elemento
- Clase de elemento
- Nombre del atributo del elemento
- Valor del atributo del elemento
- Otros criterios
La librería jQuery aprovecha el poder de los selectores de CSS para permitirnos acceder rápida y fácilmente a elementos o grupos de elementos en el DOM.
Los selectores de jQuery funcionan de manera muy similar en un documento HTML como una sentencia Select de SQL funciona en una base de datos para seleccionar registros.
Sintaxis de los selectores jQuery
La siguiente es la sintaxis del selector jQuery para seleccionar elementos HTML:
$(document).ready(function(){
$(selector)
});Un selector jQuery comienza con el signo del dólar $ y luego escribimos un selector dentro del paréntesis (). $() se llama función por defecto, que hace uso de los siguientes tres bloques de construcción:
| Selector | Descripción |
| name del elemento | Representa el nombre del elemento HTML disponible en el DOM. Por ejemplo, $(‘p’) selecciona todos los párrafos del documento. |
| #id del elemento | Representa un elemento HTML disponible con el ID dado en el DOM. Por ejemplo, $(‘#algun-id’) selecciona el único elemento del documento que tiene algun-id como Id de elemento. |
| .class del elemento | Representa un elemento HTML disponible con la clase dada en el DOM. Por ejemplo, $(‘.alguna-class’) selecciona todos los elementos del documento que tienen la clase alguna-class. |
Todos los selectores anteriores se pueden utilizar solos o en combinación con otros selectores. Todos los selectores de jQuery se basan en el mismo principio, salvo algunos retoques.
El selector de elementos
El selector de elementos de jQuery selecciona los elementos HTML en función del nombre del elemento. La siguiente es una sintaxis simple de un selector de elementos:
$(document).ready(function(){
$("nombre del elemento")
});Ejemplos
A continuación, se muestra un ejemplo para seleccionar todos los elementos <p> de un documento HTML y luego cambiar el color de fondo de esos párrafos.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Sintaxis básica de jQuery</h1>
<p>Esto es una etiqueta p</p>
<p>Esto es otro p</p>
<span>Esto es un span</span>
<div>Esto es un div</div>
</body>
</html>El selector #id
El selector jQuery #id selecciona un elemento HTML basado en el atributo id del elemento. La siguiente es una sintaxis simple de un selector #id:
$(document).ready(function(){
$("#id del elemento")
});Para utilizar el selector jQuery #id, es necesario asegurarse de que el atributo id debe ser asignado de forma única a los elementos del DOM. Si tus elementos tienen ids iguales, entonces no se producirá un resultado correcto.
Ejemplos
El siguiente es un ejemplo para seleccionar el elemento <p> cuyo id es foo y cambiar el color de fondo de esos párrafos.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#foo").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Sintaxis básica de jQuery</h1>
<p id="foo">Este foo es un p</p>
<span id="bar">Este id bar es un span</span>
<div id="bill">Este id bill es un div</div>
</body>
</html>El selector .class
El selector jQuery .class selecciona los elementos HTML en función del atributo de clase del elemento. La siguiente es una sintaxis simple de un selector .class:
$(document).ready(function(){
$(".class del elemento")
});Debido a que una clase puede ser asignada a múltiples elementos HTML con en un documento HTML, por lo que es muy posible encontrar múltiples elementos con una sola declaración del selector .class.
Ejemplos
A continuación se muestra un ejemplo para seleccionar todos los elementos cuya clase es foo y cambiar el color de fondo de esos elementos.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".foo").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Sintaxis básica de jQuery</h1>
<p id="foo">Este foo es un p</p>
<p class="foo">Este es otro foo p</p>
<span id="bar">Este id bar es un span</span>
<div id="bill">Este id bill es un div</div>
</body>
</html>