El selector en jQuery es una función que selecciona Nodes, es decir, elementos del modelo de objetos del documento. En palabras simples, el selector es una función que se usa para seleccionar/manipular uno o más elementos HTML usando jQuery. Desempeña un papel importante en jQuery. Con la ayuda de un selector, podemos seleccionar un elemento HTML en particular y podemos realizar varias operaciones en él. Esto significa que podemos controlar cualquier elemento y manipularlo según nuestros requerimientos. Para seleccionar estos elementos, el selector utiliza algunos conceptos para identificar qué elemento se selecciona. Los estaremos aprendiendo más.
Los selectores siempre comienzan con un signo de dólar $. También se conocen como funciones de fábrica. Ahora, los elementos HTML se seleccionan en función de su identificación, clase, atributo, etc.
Sintaxis: La siguiente es la sintaxis de cómo usar un selector en jQuery:
$(selector).action()
- Aquí se usa el signo $para acceder a jQuery.
- El método .action() se usa para realizar ciertas acciones en el elemento seleccionado.
- selector es la consulta utilizada para buscar o acceder al elemento HTML.
La función de fábrica hace uso de los siguientes tres conceptos para seleccionar un elemento:
- Nombre de etiqueta: jQuery seleccionará la etiqueta con el nombre dado. Por ejemplo, $(‘p’) seleccionará todos los párrafos.
- ID de etiqueta: jQuery seleccionará la etiqueta con la ID dada. Es esencial tener en cuenta que una identificación debe ser única para cada elemento. Por ejemplo, $(#gfg) seleccionará el elemento con id gfg.
- Clase de etiqueta: jQuery seleccionará la etiqueta con la clase dada. Por ejemplo, $(.abc) seleccionará todas las clases con el nombre abc.
Ejemplo: si queremos seleccionar todos los elementos en el DOM, usamos el signo (*). Veamos un ejemplo de un selector jQuery a través de un programa.
HTML
<!DOCTYPE html>
<html>
<head>
<!--jquery library included-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
// jquery code
// When Document Object Model is ready,
// the following code will execute
$(document).ready(function () {
// When button is clicked paragraph should hide
$("button").click(function () {
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading level 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Hide paragraphs</button>
</body>
</html>
Producción:
Profundicemos ahora en este tema aprendiendo algunos de los diferentes tipos de selectores. La siguiente tabla muestra los distintos tipos de selectores:
| No Señor. | Selector | Ejemplo | Descripción |
| 1. | * | ps | Todos los elementos son seleccionados |
| 2. | #identificación | $(“#roll_no”) | El elemento con id=”roll_no” está seleccionado. |
| 3. | .clase | $(“.nombre”) | Se seleccionan todos los elementos con clase «nombre» |
| 4. | .clase, .clase | $(“.nombre, .apellido”) | Seleccionará todos los elementos con la clase “nombre” o “apellido” |
| 5. | elemento | $(“p”) | Seleccionará todos los elementos p. |
| 6. | :primero | $(“p:primero”) | Se selecciona el primer elemento p. |
| 7. | :ultimo | $(“p:último”) | Se selecciona el último elemento p. |
| 8. | :primer hijo | $(“p:primer hijo”) | Se seleccionan todos los elementos p que son el primer hijo de su padre. |
| 9. | :último niño | $(“p:último hijo”) | Se seleccionan todos los elementos p que son el último hijo de su padre. |
| 10 | hijo único | $(“p:hijo único”) | Se seleccionan todos los elementos p que son el único hijo de su padre |
| 11 | :encabezamiento | $(“:encabezado”) | Todos los elementos del encabezado se seleccionan. |
| 12 | :oculto | $(“tabla:oculto”) | Se seleccionan todos los elementos p ocultos. |
| 13 | :animado | $(“:animado”) | Todos los elementos animados están seleccionados. |
| 14 | :raíz | $(“:raíz”) | Se seleccionará el elemento raíz del documento. |
| 15. | :enfoque | $(“:enfoque”) | Se selecciona el elemento que actualmente tiene el foco. |
| dieciséis. | :contiene(texto) | $(“:contiene(‘Vengadores’)”) | Se seleccionarán todos los elementos que contengan el texto “Avengers”. |
| 17 | :tiene(selector) | $(“div:tiene(p)”) | Se seleccionan todos los elementos div que tienen un elemento ap. |
| 18 | :vacío | $(“:vacío”) | Se seleccionan los elementos vacíos. |
| 19 | [atributo] | $(“[href]”) | Se seleccionan todos los elementos con un atributo href. |
| 20 | [atributo=valor] | $(“[href=’predeterminado.css’]”) | Se seleccionan todos los elementos con un valor de atributo href igual a «default.css». |
| 21 | [atributo!=valor] | $(“[href!=’predeterminado.css’]”) | Se seleccionan todos los elementos con un valor de atributo href que no sea igual a «default.css». |
| 22 | [atributo^=valor] | $(“[título^=’Hardy’]”) | Se seleccionan todos los elementos con un valor de atributo de título que comienza con «Hardy». |
| 23 | [atributo~=valor] | $(“[título~=’Bueno’]”) | Se seleccionan todos los elementos con un valor de atributo de título que contiene el valor específico «Bueno». |
| 24 | [atributo*=valor] | $(“[título*=’Bueno’]”) | Se seleccionan todos los elementos con un valor de atributo de título que contiene la palabra «Bueno». |
| 25 | :aporte | $(“:entrada”) | Se seleccionan todos los elementos de entrada. |
| 26 | :radio | $(“:radio”) | Se seleccionan todos los elementos de entrada con type=”radio”. |
| 27 | :clave | $(“:contraseña”) | Se seleccionan todos los elementos de entrada con type=”password”. |
| 28 | :texto | $(“:texto”) | Se seleccionan todos los elementos de entrada con type=”text”. |
| 29 | :caja | $(“:casilla de verificación”) | Todos los elementos de entrada con type=”checkbox” están seleccionados. |
| 30 | :enviar | $(“:enviar”) | Se seleccionan todos los elementos de entrada con type=”submit”. |
| 31 | :Reiniciar | $(“:restablecer”) | Se seleccionan todos los elementos de entrada con type=”reset”. |
| 32. | :expediente | $(“:archivo”) | Se seleccionan todos los elementos de entrada con type=”file”. |
| 33. | :botón | $(“:botón”) | Se seleccionan todos los elementos de entrada con type=”button”. |
| 34. | :imagen | $(“:imagen”) | Se seleccionan todos los elementos de entrada con type=”image”. |
| 35. | :desactivado | $(“:deshabilitado”) | Se seleccionan todos los elementos de entrada deshabilitados. |
| 36. | :activado | $(“:habilitado”) | Se seleccionan todos los elementos de entrada habilitados. |
| 37. | :comprobado | $(“:marcado”) | Se seleccionan todos los elementos de entrada marcados. |
| 38. | :seleccionado | $(“:seleccionado”) | Se seleccionan todos los elementos de entrada seleccionados. |
| 39. | descendiente padre | $(“div p”) | Seleccionará todos los elementos p que son descendientes de un elemento div. |
| 40 | elemento + siguiente | $(“div + p”) | Se seleccionan los elementos p que están al lado de cada elemento div. |
| 41. | elemento ~ hermanos | $(“div ~ p”) | Se seleccionan todos los elementos p que son hermanos de un elemento div. |
| 42. | :eq(índice) | $(“ul li:eq(1)”) | Seleccionará el segundo elemento en una lista (el índice comienza en 0) |
| 43. | :gt(no) | $(“ul li:gt(3)”) | Se seleccionan los elementos de la lista con un índice superior a 3. |
| 44. | :lt(no) | $(“ul li:lt(2)”) | Se seleccionan los elementos de la lista con un índice inferior a 2. |
| 45. | :no(selector) | $(“entrada:no(:vacío)”) | Se seleccionan todos los elementos de entrada que no están vacíos. |
Algunos ejemplos de selector con su acción:
- $(“botón”).hide(): Todos los botones estarán ocultos.
- $(“#name”).show(): Se mostrará la identificación del nombre.
- $(“p”).append(“Hola”): El texto se agrega a todos los elementos p.
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA