jQuery debe usarse solo para casos perimetrales
Recomendamos utilizar jQuery lo menos posible. Las aplicaciones web están cambiando constantemente y las pequeñas actualizaciones en la interfaz de usuario y la estructura de página pueden romper cualquier jQuery utilizado.
La selección de elementos innovativa de WalkMe se adapta a los cambios en la aplicación subyacente sin el uso 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).
Instituto de Adopción Digital 🎓
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.
Crear jQuery utilizando tus datos de WalkMe
Ahora puedes utilizar los datos de WalkMe existentes a favor de un selector de jQuery.
Esto se puede lograr añadiendo '${wm-data-key}' al selector deseado. Por ejemplo: el selector: [id="${key}"], tendrá el '${key}' reemplazado por los datos reales de WalkMe y tendrá el siguiente aspecto: [id="value"].
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
Nota
Utilizar un selector no único para detectar clic o pasar el cursor en varios elementos a la vez puede que no funcione como se esperaba.
- 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
Nota
El Editor de WalkMe solo admite selectores escritos en sintaxis de jQuery hasta la utilizada en jQuery 1.8.3. Sin embargo, puedes utilizar cualquier versión de jQuery para otros fines en tu sitio web sin temor a un conflicto con la versión de jQuery de WalkMe (wmjQuery).
Recomendamos que también utilices el Optimizador del selector de jQuery de WalkMe.
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
Nota
- Si es compatible con Shadow DOM, deberías poder capturar elementos de Shadow DOM en el Editor y utilizar jQuery para identificarlos
- Sin embargo, no podrás ejecutar wmjQuery en la consola de DevTools, en su lugar necesitarás utilizar esta sintaxis:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
jQuery en WalkMe Share
- Las selecciones de elementos de jQuery no se muestran correctamente en WalkMe Share debido a la infraestructura de captura de pantalla del Editor. Por lo tanto, cuando la captura de pantalla del Editor envíe la imagen a WalkMe Share, el elemento se colocará en la esquina superior izquierda de la imagen en las coordenadas 0x y 0y.
- WalkMe Share tiene una función que permite a los usuarios ajustar la ubicación de los elementos en la pantalla para este caso de uso. Cuando se utiliza esta función y se ajusta el elemento para que aparezca en la ubicación correcta, la captura de pantalla del editor se actualiza para reflejar el cambio realizado en WalkMe Share.
- Cuando la selección de elementos se lleva a cabo utilizando el algoritmo de búsqueda de elementos o DeepUI, la infraestructura de captura de pantalla del editor es capaz de determinar las coordenadas X e Y del elemento, por lo que en WalkMe Share, el elemento se verá en la ubicación correcta.
