Introducción:
Los selectores en jQuery son patrones utilizados para seleccionar los elementos del DOM (Document Object Model) con los que deseas trabajar. Al igual que en CSS, los selectores de jQuery permiten apuntar a elementos específicos para aplicarles efectos, manipular sus propiedades, o agregar eventos.
Nota: El parámetro selector es un componente fundamental que utilizaremos en muchos métodos de jQuery. Aunque el término se puede leer tanto en inglés como en español, hes decidido mantener todos los nombres de los parámetros en inglés. Esto facilita la relación con la documentación oficial en jquery.com. Cuando ingresemos los valores, no aparecerán en los métodos de jQuery, pero usar los términos en inglés ayudará a comprender mejor los ejemplos y la documentación en el sitio oficial.
Definición:
Un selector en jQuery es una cadena de texto que especifica los elementos del DOM que deseas seleccionar y manipular. Los selectores en jQuery son similares a los selectores de CSS, pero también pueden incluir funcionalidad adicional específica de jQuery.
Tipos de Selectores:
1. Selector de Elemento.
- Selecciona todos los elementos de un tipo específico.
$("p") // Selecciona todos los elementos <p>2. Selector de ID.
- Selecciona un único elemento con un ID específico. El ID debe ser único dentro del documento.
$("#miElemento") // Selecciona el elemento con el id="miElemento"3. Selector de Clase.
- Selecciona todos los elementos que tienen una clase específica.
$(".miClase") // Selecciona todos los elementos con la clase="miClase"4. Selector de Atributo.
- Selecciona elementos que tienen un atributo específico o cuyo atributo cumple con un valor específico.
$("input[type='text']") // Selecciona todos los elementos <input> con type="text"5. Selector de Descendiente.
- Selecciona elementos que son descendientes de un elemento especificado.
$("div p") // Selecciona todos los <p> que están dentro de un <div>6. Selector de Hijo.
- Selecciona los elementos que son hijos directos de un elemento especificado.
$("ul > li") // Selecciona todos los <li> que son hijos directos de <ul>7. Selector de Pseudo-clases.
- Selecciona elementos basados en su estado o posición.
$("a:first") // Selecciona el primer <a> en el documento
$("input:checked") // Selecciona todos los <input> que están marcados (checked)Ejemplo en HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplos de Selectores en jQuery</title>
<style>
.resaltado {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#aplicarCambios").click(function(){
// Selector de Elemento
$("p").css("color", "blue");
// Selector de ID
$("#miElemento").text("Texto cambiado");
// Selector de Clase
$(".miClase").addClass("resaltado");
// Selector de Atributo
$("input[type='text']").val("Valor cambiado");
// Selector de Descendiente
$("div p").css("font-weight", "bold");
// Selector de Hijo
$("ul > li").css("color", "red");
// Selector de Pseudo-clases
$("a:first").css("font-size", "20px");
});
});
</script>
</head>
<body>
<button id="aplicarCambios">Aplicar Cambios</button>
<p>Este es un párrafo.</p>
<p id="miElemento">Texto del elemento con ID</p>
<div>
<p>Texto dentro de un div.</p>
</div>
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
</ul>
<input type="text" value="Texto original">
<input type="checkbox" checked>
<a href="#">Primer enlace</a>
<a href="#">Segundo enlace</a>
</body>
</html>Explicación del ejemplo:
- Selector de Elemento: Cambia el color del texto de todos los
<p>a azul. - Selector de ID: Cambia el texto del elemento con id “miElemento”.
- Selector de Clase: Añade la clase “resaltado” a todos los elementos con la clase “miClase”.
- Selector de Atributo: Cambia el valor de todos los
<input>contype='text'. - Selector de Descendiente: Cambia el peso de la fuente de todos los
<p>dentro de un<div>. - Selector de Hijo: Cambia el color del texto de los
<li>que son hijos directos de<ul>. - Selector de Pseudo-clases: Cambia el tamaño de la fuente del primer
<a>en el documento
Resultado:
Observa cómo cambia todo el texto al dar clic en Aplicar Cambios, incluso el de esta página:
Este es un párrafo.
Texto del elemento con ID
Texto dentro de un div.
- Elemento de lista 1
- Elemento de lista 2
