Selectores de jQuery
Breve descripción general
jQuery es una biblioteca de Javascript que se puede utilizar para manipular una página de HTML. Los selectores de jQuery te permiten identificar elementos en la estructura HTML en función de sus características, como ID, clase, tipo, atributos o valores de atributos.
Los selectores de jQuery más comunes en el WalkMe Editor se utilizan para:
- Crear objetivos en materia de incorporación: Crea objetivos de incorporación basados en un elemento en pantalla
- Iniciadores de elementos seleccionados: Añade el selector de jQuery a la pestaña Elemento seleccionado de un iniciador
- Captura de valores: captura un valor de una variable de usuario o un texto en la pantalla para incorporarlo a un anuncio dinámico o utilizarlo en una regla
- Condiciones de la página de verificación: Indica a WalkMe que analice los atributos de un elemento en la pantalla para utilizarlo como tipo de regla en el motor de reglas
Cómo funciona
Busca el elemento en el HTML pulsando con el botón derecho en el elemento y seleccionando Inspeccionar elemento. El elemento se resaltará en la pantalla y en el panel de desarrollador. Identifica las características únicas del elemento (como ubicación, clase, ID o estilo) para desarrollar el selector de jQuery. Los elementos se pueden identificar por su ubicación o atributos (clase, ID y estilo).
Paso 1: Crear el selector de jQuery
La sintaxis básica para el uso de elementos de jQuery en WalkMe es: Elemento → Selector → Valor
Después de identificar el elemento, crea un selector de jQuery que observe específicamente lo que te interesa.
Estos son algunos ejemplos de selectores jQuery:
- elemento ul con id crear-cuenta: ul#create-account.
- elementos ul con clase nav: ul.nav.
- elementos ul con clase nav y clase fl tipo: ul.nav.fl.
Consulta una lista de selectores jQuery útiles a continuación.
Paso 2: Prueba el selector en la consola
- Escribe wmjQuery(“”) en la línea de comando en el panel de desarrollador con el selector de jQuery entre el "" y haz clic en Intro
- Nota: Solo podrás utilizar wmjQuery en un navegador con la extensión de Editor activada
- Si la consulta devuelve el valor deseado, el selector funciona.
- Nota: Para ver los elementos seleccionados en la pantalla, pulsa en Más…
- Pasa el cursor sobre los objetos devueltos para ver el elemento resaltado
Paso 3: Utiliza los selectores de jQuery en WalkMe
Dependiendo de cómo te gustaría utilizar el elemento de jQuery, jQuery se puede utilizar en WalkMe en las siguientes ubicaciones:
- Utiliza el elemento de jQuery para identificar un elemento para un paso o iniciador utilizando la pestaña Elemento seleccionado del menú de Opciones
- Utiliza el elemento jQuery para activar el siguiente paso en un Walk-Thru cuando se hace clic o se pasa el cursor en el menú Desencadenadores de pasos adicionales
- Utiliza el elemento de jQuery para captar un valor en la pantalla y utilizarlo como texto dinámico en el Editor de texto enriquecido en un globo de pasos o ShoutOut
- Utiliza el elemento de jQuery para crear un objetivo en la pestaña Objetivo
- Utiliza el selector de jQuery en el motor de reglas como tipo de regla (similar a que jQuery se utiliza de manera similar al tipo de regla de elemento en pantalla)
Operadores jQuery disponibles en el motor de reglas:
- Verdadero: significa que se encontró al menos un elemento
- Falso: significa que no se encontraron elementos
- Visible: significa que el elemento es visible
- Texto es / no es: significa que el texto es igual al texto introducido
- Nota: cuando el selector devuelve más de un elemento, el texto de todos los elementos se combina como un solo elemento
- Mayor que/Menor que: el valor medio está por encima o por debajo de un número entero
- Igual/No igual: significa una sintaxis de texto complicada
- Longitud es / No es / Mayor que / Menor que: Significa igual a, por encima o por debajo de un número entero
- Se utiliza para consultar cuántos elementos devuelve la consulta
- Descubre la longitud exacta de la consulta en la consola: wmjQuery(“element.value”).length
Selectores útiles de jQuery
| Consulta | Descripción |
|---|---|
| elemento | Consultar un elemento |
| elemento[atributo] | Consultar un atributo de un elemento |
| elemento[atributo][atributo] | Consultar varios atributos de un elemento |
| element[attribute="valor de atributo"] | Consultar un atributo de un elemento y su valor |
| element[attribute^="text"] | Texto de consulta al principio de un atributo |
| element[attribute*="text"] | Texto de consulta contenido en un atributo |
| element[attribute!="text"] | Texto de consulta excluido de un atributo |
| elemento elemento-secundario | Consultar el hijo de un elemento (el espacio indica que el primer elemento es el padre del segundo) |
| element:comprobado | Consultar el estado de una casilla de verificación (marcada o desmarcada) |
| [element='']:visible | Consultar si un elemento es visible |
| elemento:contiene(Texto) | El elemento de consulta contiene texto |
| element:eq(#) | Consultar resultados específicos en orden (el recuento comienza en 0) |
Prueba de los selectores de jQuery
A la hora de elegir un selector de jQuery, es aconsejable comparar algunos para garantizar que estás eligiendo el que tenga el menor impacto en el rendimiento en tu sitio web o aplicación. Para ello, sigue estos pasos:
- Abre las herramientas de desarrollo del navegador web
- Navega hasta la pestaña de consola de las herramientas de desarrollo
- Escribe lo siguiente en la consola:
- var time1 = window.performance.now(); wmjQuery('<your jQuery selector>'); var time2 = window.performance.now(); console.log(time2 - time1);
- Haz clic en Entrar
- Ejecuta este comando varias veces en la consola para ver el promedio aproximado del tiempo que tarda
- Ejecuta este mismo comando con algunos selectores jQuery alternativos y elige el que tarde menos tiempo en ejecutarse