0Pricing
jQuery Academy · Lección

Creación de pseudoselectores personalizados

Aprenda a registrar sus propios pseudoselectores personalizados con jQuery.expr[':'] para simplificar la lógica compleja de selección de elementos y mejorar la legibilidad del código.

Creación de pseudoselectores personalizados 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.

¿Por qué usar selectores personalizados?

Los selectores integrados de jQuery son increíblemente potentes, pero a veces se presentan necesidades de filtrado específicas que son complejas o repetitivas.

¡Aquí resultan útiles los pseudo-selectores personalizados! Le permiten definir sus propios filtros especializados, simplificando la lógica de selección compleja y haciendo que su código sea más limpio y fácil de leer.

Cuando los selectores predeterminados no son suficientes

Imagine que a menudo necesita seleccionar todos los elementos <div> que no solo tienen una clase específica, sino también un atributo data-status establecido en 'active'.

Aunque puede combinar selectores estándar, la expresión puede volverse larga y menos intuitiva si la lógica es más compleja o si necesita aplicarla con frecuencia en toda la aplicación.

Conozca jQuery.expr[':']

jQuery.expr[':'] es el objeto en el que se registran los pseudo-selectores personalizados. Puede considerarlo una ampliación del motor de selección principal de jQuery.

Cuando jQuery encuentra un selector como :myCustomSelector, busca myCustomSelector en este objeto. Usted asigna una función a una clave (el nombre de su selector), que jQuery ejecuta para cada elemento que comprueba.

Definir `:has-tooltip`

Definamos un selector personalizado sencillo, :has-tooltip, que identifique los elementos que tienen un atributo title. Así se añade a jQuery.expr[':'].

La función que proporcione recibe el elem DOM actual que se está comprobando. Debe devolver true si el elemento cumple sus criterios y false en caso contrario.

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

Usar su selector personalizado

Ahora que el selector :has-tooltip está definido, ¡podemos utilizarlo como cualquier otro pseudo-selector de jQuery! Pruebe a ejecutar el ejemplo siguiente.

Resaltará todos los elementos que tengan un atributo title, demostrando la utilidad de su nuevo filtro personalizado.

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

Los argumentos `elem`, `i` y `match`

Cuando se ejecuta la función de su selector personalizado, recibe tres argumentos importantes:

  • elem: el elemento DOM actual que se está comprobando.
  • i: el índice de elem dentro del conjunto de elementos que jQuery está recorriendo en ese momento.
  • match: una matriz que contiene los resultados de la expresión regular utilizada para analizar el selector. Es esencial para los selectores que aceptan argumentos.

En los selectores sencillos, utilizará principalmente el argumento elem.

Selector basado en atributos de datos

Creemos un selector :data-status(active) para encontrar los elementos cuyo atributo data-status sea igual a 'active'. Esto muestra cómo utilizar el argumento match.

El valor 'active' (el argumento dentro de los paréntesis) se encontrará en match[3]. ¡Esto permite que su selector sea dinámico!

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

Comprender `match[3]`

El array match es el resultado del análisis interno de la expresión regular que jQuery realiza sobre la cadena de su selector. Para un selector como :yourSelector(argument), la parte de argument normalmente se captura en match[3].

Este mecanismo es fundamental para crear selectores personalizados dinámicos y flexibles que acepten parámetros, lo que los hace más reutilizables y potentes en diversos escenarios de filtrado.

Lógica avanzada: `:containsExact`

Construyamos un selector más avanzado: :containsExact(text). A diferencia del :contains() predeterminado de jQuery, este solo coincidirá con elementos cuyo contenido de texto completo (sin incluir los elementos secundarios) sea exactamente el texto proporcionado.

Esto suele implicar comparar cuidadosamente $(elem).text().trim() para garantizar una coincidencia exacta.

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

Consejos para selectores personalizados

Tenga presentes estas prácticas recomendadas al crear sus selectores personalizados:

  • Rendimiento: La lógica compleja puede afectar al rendimiento, especialmente en DOM grandes. Optimice las funciones de sus selectores.
  • Claridad: Asigne nombres claros a sus selectores para que su propósito resulte evidente de inmediato a cualquier persona que lea su código.
  • Reutilización: Diseñelos de forma suficientemente genérica para que sean útiles en diversos contextos, no solo en un escenario específico.
  • Evitar conflictos: Elija nombres únicos para evitar conflictos con futuros selectores de jQuery u otros plugins que pueda utilizar.

Desafío: selector personalizado

Desea crear un selector personalizado :is-empty que seleccione los elementos que no tienen contenido de texto ni elementos secundarios. Esto es similar al selector integrado :empty de jQuery.

¿Cuál de los siguientes fragmentos de código define correctamente este pseudo-selector personalizado?

Repaso: selectores personalizados

En esta lección, ha aprendido a ampliar las potentes capacidades de selección de jQuery mediante la creación de sus propios pseudo-selectores personalizados con jQuery.expr[':'].

Ha visto cómo definir selectores sencillos, pasarles argumentos mediante el array match y aplicarlos para simplificar una lógica de filtrado compleja, haciendo que su código jQuery sea, en última instancia, más legible, fácil de mantener y eficiente.

Preguntas frecuentes

¿La lección «Creación de pseudoselectores personalizados» es gratis?

Sí — el texto completo de «Creación de pseudoselectores personalizados» 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 «Creación de pseudoselectores personalizados»?

Aprenda a registrar sus propios pseudoselectores personalizados con jQuery.expr[':'] para simplificar la lógica compleja de selección de elementos y mejorar la legibilidad del código. 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 «Creación de pseudoselectores personalizados»?

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

  1. Creación de pseudoselectores personalizados
  2. Filtrado avanzado con .filter()
  3. Exclusión de elementos con .not()
← Volver a jQuery Academy