jQuery Academy · Lección

Selectores de atributos avanzados

Explore selectores de atributos complejos para seleccionar elementos según la presencia, el valor o las coincidencias parciales de sus atributos, y mejore la precisión de sus selecciones.

Selectores de atributos avanzados es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.

¡Hola, selectores de atributos!

¡Le damos la bienvenida a una forma potente de seleccionar elementos en jQuery! Exploraremos los selectores de atributos, que permiten elegir elementos según sus atributos HTML.

Piense en los atributos como datos adicionales asociados a una etiqueta HTML, como id, class, href, data-* y otros.

Selección por presencia de atributos

El selector de atributos más sencillo encuentra los elementos que tienen un atributo específico, independientemente de su valor. Se escribe como [attributeName].

Es muy útil cuando solo necesita saber si un atributo existe en un elemento. Por ejemplo, $('[title]') encontrará todos los elementos que tengan un atributo title.

Pruébelo: presencia de atributos

Utilicemos el selector de presencia para encontrar todos los elementos que tengan un atributo title y mostrar los nombres de sus etiquetas.

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

Coincidencia de valores exactos de atributos

Para seleccionar elementos cuyo atributo tenga un valor exacto, utilice [attributeName="value"].

¡Este selector es preciso! Solo coincidirá si el valor del atributo es idéntico al que especifique, incluido el uso de mayúsculas y minúsculas (la coincidencia de valores de atributos de jQuery distingue entre mayúsculas y minúsculas).

Coincidencia exacta en acción

Encuentre los elementos con un atributo data-type exactamente igual a "primary".

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

Valores de atributos que comienzan por...

El selector [attributeName^="value"] encuentra los elementos cuyo valor de atributo comienza con una cadena específica.

Es útil para agrupar elementos con convenciones de nomenclatura similares.
Es excelente para filtrar enlaces (por ejemplo, todos los enlaces que comienzan por /products).

Valores que terminan en y que contienen

Estos selectores ofrecen más flexibilidad para las coincidencias parciales:

[attributeName$="value"]: Coincide si el valor del atributo termina con la cadena especificada.
[attributeName*="value"]: Coincide si el valor del atributo contiene la cadena especificada en cualquier parte.

Demostración en directo: coincidencias parciales

Observe cómo ^=, $= y *= seleccionan distintos elementos según los valores parciales de sus atributos href.

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

Selectores de palabras y guiones

Dos selectores especializados más:

[attributeName~="value"]: Coincide si el valor del atributo contiene una palabra específica delimitada por espacios. Se utiliza habitualmente con atributos class.
[attributeName|="value"]: Coincide si el valor del atributo es exactamente "value" o comienza por "value-" (seguido de un guion). Se utiliza habitualmente para códigos de idioma como lang="en-US".

Comprobación rápida: selectores

¿Qué selector o selectores de jQuery identificarían correctamente el elemento <div> siguiente?

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

Repaso: selectores de atributos

¡Excelente trabajo! Ha dominado los selectores de atributos avanzados:

[attr]: Comprueba la presencia del atributo.
[attr="val"]: Coincide con valores exactos.
[attr^="val"]: Coincide con valores que comienzan por.
[attr$="val"]: Coincide con valores que terminan en.
[attr*="val"]: Coincide con valores que contienen.
[attr~="val"]: Coincide con valores que contienen una palabra separada por espacios.
[attr|="val"]: Coincide con valores exactos o que comienzan por «val-».

¡Utilícelos para escribir código jQuery muy preciso y eficiente!

Preguntas frecuentes

¿La lección «Selectores de atributos avanzados» es gratis?

Sí — el texto completo de «Selectores de atributos avanzados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Selectores de atributos avanzados»?

Explore selectores de atributos complejos para seleccionar elementos según la presencia, el valor o las coincidencias parciales de sus atributos, y mejore la precisión de sus selecciones. Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar jQuery Academy?

No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 3.

¿Cuánto tiempo toma la lección «Selectores de atributos avanzados»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?

Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Selectores de atributos avanzados
Pseudoclases y selectores personalizados
Técnicas eficientes para recorrer el DOM

← Volver a jQuery Academy