jQuery debe usarse solo para casos perimetrales
Recomendamos utilizar jQuery lo menos posible. Las aplicaciones web cambian constantemente y pequeñas actualizaciones en la interfaz de usuario y en la estructura de página pueden hacer que el código de jQuery deje de funcionar.
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 utiliza para identificar y manipular elementos HTML en una página. Si bien WalkMe proporciona una selección de elementos lista para usar que se adapta a los cambios en la interfaz de usuario, los selectores de jQuery actúan como una alternativa potente para los casos extremos.
Estos selectores identifican elementos en función de características específicas, como ID, Clase, Tipo y Atributos.
Casos de uso
Recomendamos utilizar jQuery con moderación para mantener la estabilidad de la compilación. Sin embargo, es una herramienta vital para las siguientes tareas:
- Crear objetivos de incorporación: define objetivos en función de un elemento en pantalla.
- Configurar lanzadores: introduce selectores específicos en la pestaña Elemento seleccionado
- Captura de valores: captura variables de usuario o texto en pantalla para anuncios dinámicos
- Verificar las condiciones de la página: utiliza el Motor de reglas para analizar los atributos de los elementos
Cómo funciona
Sigue estos pasos para crear, probar e implementar selectores personalizados en tu contenido de WalkMe.
🎓 Instituto de Adopción Digital
Operadores del motor de reglas disponibles
Al utilizar el tipo de regla de jQuery en el Motor de reglas, utiliza estos operadores para definir la lógica:
- Verdadero: se encontró al menos un elemento
- Falso: no se encontraron elementos
- Visible: el elemento es visible actualmente en la página
- El texto es / no es: el texto del elemento coincide o no coincide con tu entrada
- 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 está por encima o por debajo de un número entero
- Igual/No igual: significa una sintaxis de texto complicada
- La longitud es / no es / mayor que / menor que: el número de elementos devueltos por la consulta
- Encuentra la longitud exacta de la consulta: 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 comunes de jQuery
Utiliza estos patrones para identificar elementos dentro de tu aplicación:
- elemento: localiza un elemento HTML específico por su nombre de etiqueta
- element[attribute]: localiza un elemento que contenga un atributo específico
- element[attribute][attribute]: localiza un elemento que coincida con varios atributos simultáneamente.
- elemento[attribute= value=""]: localiza una coincidencia exacta para un atributo y su valor
- elemento[attribute^= text=""]: localiza un elemento donde el atributo comience con texto específico
- elemento[attribute*= text=""]: localiza un elemento cuyo atributo contenga texto específico en cualquier lugar de la cadena
- elemento[attribute!= text=""]: localiza un elemento que no contenga el texto del atributo especificado
- elemento hijo-elemento: localiza un elemento hijo anidado (el espacio indica una relación padre-hijo).
- element:checked: localiza el estado de una casilla de verificación o un botón de radio
- [element]:visible: verifica si un elemento específico es visible actualmente en la página
- element:contains(Text): localiza un elemento en función de la cadena de texto específica que contiene
- element:eq(#): localiza un índice específico en una lista de resultados (ten en cuenta que el recuento comienza en 0).
Paso 1: Crea el selector
- Localiza el elemento en el HTML haciendo clic con el botón derecho del ratón y seleccionando Inspeccionar elemento
- Identifica características únicas como clase, ID o estilo
- Redacta tu selector utilizando la sintaxis: Elemento → Selector → Valor
- Ejemplo (ID): ul#create-account
- Ejemplo (Clase): ul.nav
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=], tendrá el '${key}' reemplazado por los datos reales de WalkMe y tendrá el siguiente aspecto: [id=”value”].
Paso 2: prueba en la consola
Nota: debes tener activada la extensión del Editor para utilizar este método.
- Abre las Herramientas de desarrollo del navegador y selecciona la pestaña Consola
- Escribe wmjQuery("your-selector-here") y presiona Intro
- Pasa el cursor sobre los objetos devueltos en la consola para verificar que el elemento correcto esté resaltado en la pantalla
Paso 3: Implementar en el editor
Una vez verificado, puedes aplicar el selector en varias ubicaciones:
- Pestaña Elemento seleccionado: úsalo para la identificación de un paso o iniciador específico
- Desencadenadores de pasos adicionales: úsalos para activar pasos al hacer clic o pasar el cursor
- Editor de texto enriquecido: úsalo para mostrar texto dinámico en globos o Shoutouts
- Motor de reglas: selecciona el Tipo de regla de jQuery para crear una lógica compleja
Paso 4: Optimizar el rendimiento
Para garantizar la mejor experiencia de usuario, compara la velocidad de los selectores:
- Escribe el siguiente script en tu consola: var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- Ejecuta el comando varias veces para encontrar el tiempo de ejecución promedio
- Selecciona la versión con el tiempo promedio más bajo
Notas técnicas
- Para los sitios que utilizan Shadow DOM, no podrás ejecutar wmjQuery en la consola de DevTools, en su lugar deberás utilizar esta sintaxis:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
