HOWTO · jQuery

Selectores jQuery

Para poder agregar propiedades y manipular elementos HTML, la instancia se toma en consideración. Estas instancias se denominan indistintamente como selectores. Los selectores básicos de jQuery pueden ser de tres tipos: selector de elementos, selector de #id y selector de .class.

Por Anika Tabassum EraPublicado 2023-06-21Actualizado 2024-02-15

En esta página

jQuery tiene tres tipos básicos de selectores para iniciar una instancia de cualquier elemento HTML, el selector de elementos, selector #id y selector .class.

En la siguiente sección, mostraremos ejemplos que cubren estos selectores básicos y sus funciones y repasaremos una lista de otras posibilidades derivadas de selectores.

Uso de `element selector` y `#id selector` en jQuery

Fragmento de código:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
  $('button').click(function(){
    $('#title').css({'color':'blue'});
});
  });
</script>
</head>
<body>
<p id='title'>Text</p>
<button>Text Change</button>

Producción:

Uso del selector de elementos y el selector de id.

En el código anterior, tenemos un evento de clic para cambiar el color del contenido de las etiquetas p. Tenemos un id='title' asociado con la etiqueta p y un elemento de botón para activar el evento de clic. El elemento del botón se instanciará con un selector de elementos, y la p se obtiene a través del selector de #id.

Uso de `selector de clase` en jQuery

Fragmento de código:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('.x:even').css({'color':'red'});
});
</script>
</head>
<body>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>
<p class='x'>Text</p>

Producción:

Uso del selector de clase

Consideramos algunas etiquetas p seguidas de la clase similar x, y las manipulamos a través del selector .class, haciendo que los contenidos sean más fáciles de entender.

Las etiquetas p incluso posicionadas se han coloreado de rojo, y la propiedad se activó cuando consideramos el selector de clase.