¿Quieres aprender a utilizar los selectores de jQuery para hacer más eficientes tus proyectos de desarrollo web? ¡Pues estás en el lugar correcto! En este artículo te explicaremos cómo utilizar los selectores de jQuery para agregar un toque de dinamismo y funcionalidad a tu sitio web. ¡Prepárate para dar el salto en tus habilidades de programación web con TIEngranaje!
El selectores de jQuery nos permite acceder rápida y fácilmente a elementos HTML individuales o grupales en el Modelo de objeto de documento (DOM). Los selectores le permiten obtener el elemento o atributo exacto que desea de su documento HTML.
jQuery admite el existente Selectores de CSS, así como algunos selectores personalizados. Todos los selectores de jQuery comienzan con el signo de dólar y paréntesis: $().
| Selector | Ejemplo | Descripción |
|---|---|---|
* |
$("*") |
Todos los elementos |
selector-1,selector-2 |
$("p,div") |
Todos los elementos con selectores coincidentes |
#id |
$("#one") |
El elemento con id="one" |
.class |
$(".two") |
Todos los elementos con class="two" |
element |
$("div") |
Todos los elementos div |
.class.class |
$(".abc.def") |
Todos los elementos con las clases. abc y def |
| Selector | Ejemplo | Descripción |
|---|---|---|
:animated |
$(":animated") |
Todos los elementos animados |
:contains(text) |
$(":contains('test')") |
Todos los elementos que contienen el texto. |
:empty |
$(":empty") |
Todos los elementos sin nodos secundarios |
:eq(index) |
$("ul li:eq(2)") |
El tercer elemento de una lista. [starts at 0] |
:even |
$("tr:even") |
Todos los elementos incluso tr |
:first |
$("div:first") |
El primer elemento div |
:gt(index) |
$("ol li:gt(2)") |
Listar elementos con un index > 2 |
:header |
$(":header") |
Todos los elementos del encabezado [h1, h2 …] |
:hidden |
$("div:hidden") |
Todos los elementos div ocultos |
:last |
$("div:last") |
El último elemento div |
:lt(index) |
$("ol li:lt(2)") |
Listar elementos con un index < 2 |
:not(selector) |
$("td:not(:empty)") |
Todos los elementos td que no están vacíos |
:odd |
$("tr:odd") |
Todos los elementos tr impares |
:visible |
$(":visible") |
Elementos visibles |
| Selector | Ejemplo | Descripción |
|---|---|---|
[attribute] |
$("[href]") |
Todos los elementos con un atributo href |
[attribute=value] |
$("[href="https://www.itgeared.com/jquery-selectors-tutorial/index.htm"]") |
Todos los elementos con un atributo href igual a index.htm |
[attribute!=value] |
$("[href!="https://www.itgeared.com/jquery-selectors-tutorial/index.htm"]") |
Todos los elementos con un atributo href diferente a index.htm |
[attribute$=value] |
$("[href$='.png']") |
Todos los elementos con un atributo href que termina en .png |
[attribute^=value] |
$("[href^='http']") |
Todos los elementos con un atributo href que comienza con http |
| Selector | Ejemplo | Descripción |
|---|---|---|
:input |
$(":input") |
Todos los elementos de entrada |
:text |
$(":text") |
Elementos de entrada con type="text" |
:password |
$(":password") |
Elementos de entrada con type="password" |
:radio |
$(":radio") |
Elementos de entrada con type="radio" |
:checkbox |
$(":checkbox") |
Elementos de entrada con type="checkbox" |
:submit |
$(":submit") |
Entrada con type="submit" |
:reset |
$(":reset") |
Elementos de entrada con type="reset" |
:button |
$(":button") |
Elementos de entrada con type="button" |
:image |
$(":image") |
Elementos de entrada con type="image" |
:file |
$(":file") |
Elementos de entrada con type="file" |
:enabled |
$(":enabled") |
Elementos de entrada habilitados |
:disabled |
$(":disabled") |
Elementos de entrada deshabilitados |
:selected |
$(":selected") |
Elementos de entrada seleccionados |
:checked |
$(":checked") |
Elementos de entrada comprobados |
Los selectores son muy útiles y serían necesarios en cada paso al usar jQuery. Hacen un gran trabajo al facilitar el acceso al elemento exacto que desea de su documento HTML.
Aquí hay un ejemplo donde está seleccionando todos los elementos del párrafo y cuando hace clic en cualquiera de ellos, el color del texto cambia a rojo. Si copia y pega este ejemplo, asegúrese de actualizar el valor correcto para el src atributo en la referencia a la biblioteca jQuery.
<html>
<head>
<title>Your Title</title>
<script type="text/javascript" src="https://www.itgeared.com/jquery-selectors-tutorial/jquery.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
<script type="text/javascript">
$(document).ready(function () {
$("p").click(function () {
$(this).css("color", "red");
});
});
</script>
</body>
</html>