jQuery solo se puede usar para casos extremos
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 predeterminada de elementos de WalkMe se adapta a los cambios en la aplicación subyacente sin depender 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. Mientras que WalkMe ofrece una selección de elementos lista para usar que se adapta a los cambios de la interfaz de usuario, los selectores de jQuery constituyen una alternativa eficaz 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 Onboarding: define objetivos basados en un elemento en pantalla
- Configurar Launchers: introduce selectores específicos en la Pestaña de elemento seleccionado
- Captura de valores: captura variables de usuario o texto en pantalla para anuncios dinámicos
- Comprobar condiciones de la página: utiliza el creador de condiciones 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.
Operadores de creador de condiciones disponibles
Cuando utilices el tipo de regla de jQuery en el creador de condiciones, utiliza estos operadores para definir la lógica:
- Verdadero: se encontró al menos un elemento
- Falso: no se encontraron elementos
- Visible: el elemento está visible en este momento 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
- 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.
Condition Builder
Common jQuery Selectors
Use these patterns to identify elements within your application:
- element: Locate a specific HTML element by its tag name
- element[attribute]: Locate an element that contains a specific attribute
- element[attribute][attribute]: Locate an element that matches multiple attributes simultaneously
- element[attribute="value"]: Locate an exact match for an attribute and its value
- element[attribute^="text"]: Locate an element where the attribute starts with specific text
- element[attribute*="text"]: Locate an element where the attribute contains specific text anywhere within the string
- element[attribute!="text"]: Locate an element that does not contain the specified attribute text
- element child-element: Locate a nested child element (the space indicates a parent-child relationship)
- element:checked: Locate the status of a checkbox or radio button
- [element]:visible: Verify if a specific element is currently visible on the page
- element:contains(Text): Locate an element based on the specific text string it contains
- element:eq(#): Locate a specific index in a list of results (note that the count starts at 0)
Step 1: Build the selector
- Locate the element in the HTML by right-clicking it and selecting Inspect Element
- Identify unique characteristics like class, ID, or style
- Draft your selector using the syntax: Element → Selector → Value
- Example (ID): ul#create-account
- Example (Class): 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 de WalkMe reales y tendrá el siguiente aspecto:[id=”value”]
Step 2: Test in the console
Note: You must have the Editor Extension enabled to use this method.
- Open your browser's Developer Tools and select the Console tab
- Type wmjQuery("your-selector-here") and press Enter
- Hover over the returned objects in the console to verify the correct element is highlighted on screen
Step 3: Implement in the editor
Once verified, you can apply your selector in several locations:
- Selected Element tab: Use for specific Step or Launcher identification
- Additional step triggers: Use to trigger steps on click or hover
- Rich Text Editor: Use to display Dynamic Text in balloons or Shoutouts
- Condition Builder: Select the jQuery Rule Type to build complex logic
To ensure the best user experience, compare the speed of your selectors:
- Type the following script into your console: var time1 = window.performance.now(); wmjQuery('selector'); var time2 = window.performance.now(); console.log(time2 - time1);
- Run the command several times to find the average execution time
- Select the version with the lowest average time
Technical Notes
- For sites using Shadow DOM you won't be able to run wmjQuery in the DevTools Console, you'll need to use this syntax instead:
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')
