Help Center
Bienvenue au centre d’aide WalkMe

Please login in order to continue:

Work flows better with WalkMe
Work flows better with WalkMe.

Sélecteurs jQuery

Last Updated juin 14, 2024
jQuery doit être utilisé en cas de scenarios extrêmes uniquement

Nous vous recommandons d'utiliser jQuery le moins possible. Les applications Web changent en permanence et de petites mises à jour de l'interface utilisateur et de la structure de la page peuvent briser n'importe quel jQuery utilisé.

La sélection d'éléments de WalkMe s'adapte aux changements de l'application sous-jacente sans avoir recours à jQuery.

Aperçu rapide

jQuery est une bibliothèque Javascript qui peut être utilisée pour manipuler une page HTML. Les sélecteurs jQuery vous permettent d'identifier des éléments dans la structure HTML en fonction de leurs caractéristiques telles que l'ID, la classe, le type, les attributs ou les valeurs d'attributs.

Les sélecteurs jQuery les plus courants dans l'Éditeur WalkMe sont utilisés pour :

  • Créer des Objectifs d'Onboarding : Créez des objectifs d'Onboarding basés sur un élément à l'écran
  • Launchers d'élément sélectionné : Ajoutez le sélecteur jQuery dans l'onglet Élément sélectionné d'un Launcher
  • Saisir des valeurs : Saisissez une valeur à partir d'une variable utilisateur ou d'un texte à l'écran à incorporer dans une annonce dynamique ou utilisez-la dans une règle.
  • Vérifier les conditions de la page : Demandez à WalkMe d'analyser les attributs d'un élément à l'écran à utiliser en tant que type de règle dans le moteur de règles

Comment ça marche

Trouvez l'élément dans le HTML en cliquant avec le bouton droit sur l'élément et en sélectionnant Inspect Element. L'élément sera mis en valeur à l'écran et dans le panneau du développeur. Identifiez les caractéristiques uniques de l'élément (telles que l'emplacement, la classe, l'ID ou le style) afin de créer votre sélecteur jQuery. Les éléments peuvent être identifiés par leur emplacement ou leurs attributs (classe, ID et style).

🎓 Institut d'adoption numérique

Étape 1 : Créer le sélecteur jQuery

La syntaxe de base pour l'utilisation des éléments jQuery dans WalkMe est : Élément → Sélecteur → Valeur

Après avoir identifié l'élément, créez un sélecteur jQuery qui examinera spécifiquement ce qui vous intéresse.

Voici quelques exemples de sélecteurs jQuery :

  • élément ul avec id create-account : ul#create-account.
  • éléments ul avec la classe nav : ul.nav.
  • éléments ul avec la classe nav et le type de classe fl : ul.nav.fl.

Voir une liste de sélecteurs jQuery utiles ci-dessous.

Créer jQuery à l'aide de vos données WalkMe

Vous pouvez désormais utiliser les données WalkMe existantes en faveur d'un sélecteur jQuery.

Cela peut être accompli en ajoutant « $ {wm-data-key}» au sélecteur souhaité. Par exemple : le sélecteur : [id="${key}"], aura le « ${key} » remplacé par les données WalkMe réelles et ressemblera à : [id=”value”].

Étape 2 : Tester votre sélecteur dans la console

  1. Tapez wmjQuery ('''') dans la ligne de commande dans le panneau de développement avec votre sélecteur jQuery entre les '''' et appuyez sur Entrée
  2. Si votre requête renvoie la valeur désirée, votre sélecteur fonctionne !
    • Remarque : pour voir les éléments sélectionnés à l'écran, cliquez sur Plus…
  3. Passez la souris sur les objets retournés pour voir l'élément surligné

Étape 3 : : Utilisez les sélecteurs jQuery dans WalKme

Selon la façon dont vous souhaitez utiliser l'élément jQuery, jQuery peut être utilisé dans WalkMe aux emplacements suivants :

  • Utilisez l'élément jQuery pour identifier un élément d'une étape ou d'un Launcher à l'aide de l'onglet Élément sélectionné du menu Options
  • Utilisez l'élément jQuery pour déclencher l'étape suivante dans un Walk-Thru lorsque vous cliquez ou passez la souris dans le menu Déclencheurs d'étape supplémentaire
    Remarque

    L'utilisation d'un sélecteur non unique pour détecter un clic ou un survol sur plusieurs éléments à la fois peut ne pas fonctionner comme prévu.

  • Utilisez l'élément jQuery pour saisir une valeur à l'écran à utiliser comme texte dynamique dans l'éditeur de texte enrichi dans une bulle d'étape ou ShoutOut
  • Utilisez l'élément jQuery pour construire un Goal (Objectif) dans l'onglet Goal
  • Utilisez le sélecteur jQuery dans le moteur de règles en tant que type de règle (jQuery est utilisé de la même manière que le type de règle d'élément à l'écran)
Conseil

Souvenez-vous que jQuery doit être utilisé avec parcimonie dans vos créations WalkMe et toujours en combinaison avec des conditions plus légères. Veuillez vous référer à l'article suivant pour plus d'informations : Meilleures pratiques WalkMe Performance

Opérateurs jQuery du moteur de règles disponibles :

  • Vrai : signifie qu'au moins un élément a été trouvé
  • Faux : signifie qu'aucun élément n'a été trouvé
  • Visible : signifie que l'élément est visible
  • Le texte est / n'est pas : Signifie que le texte est égal à la saisie de texte
    • Remarque : Lorsque le sélecteur renvoie plus d'un élément, le texte de tous les éléments est combiné en tant qu'élément unique
  • Plus que / moins que : signifie que la valeur est supérieure ou inférieure à un nombre entier
  • Comme / Pas comme : signifie une syntaxe de texte compliquée
  • La longueur est / n'est pas / supérieure à / inférieure à : Signifie égal ou inférieur à un nombre entier.
    • Utilisé pour demander le nombre d'éléments renvoyés par la requête
    • Découvrez la longueur exacte de la requête dans la console : wmjQuery(“element.value”).length
Remarque

L'Éditeur WalkMe prend en charge uniquement les sélecteurs écrits dans la syntaxe jQuery jusqu'à ce que l'on utilise dans jQuery 1.8.3. Vous pouvez toutefois utiliser n'importe quelle version de jQuery à d'autres fins sur votre site web sans craindre d'un conflit avec la version WalkMe de jQuery (wmjQuery).

Nous vous recommandons d'utiliser également l'optimiseur de sélecteur jQuery de WalkMe.

Sélecteurs jQuery utiles

Requêtes Description
Élément Demander un élément
element[attribute] Demander l'attribut d'un élément
element[attribute][attribute] Demander plusieurs attributs d'un élément
element[attribute="attribute value"] Demander l'attribut d'un élément et sa valeur
element[attribute^="text"] Texte de requête au début d'un attribut
element[attribute*="text"] Texte de requête contenu dans un attribut
element[attribute!="text"] Texte de requête exclu d'un attribut
element child-element Demander l'enfant d'un élément (l'espace indique que le premier élément est le parent du second)
element:checked Demander le statut d'une case à cocher (cochée ou non cochée)
[element='']:visible Demander si un élément est visible
element:contains(Text) L'élément de requête contient du texte
element:eq(#) Résultat spécifique de la requête dans l'ordre (le nombre commence à 0)
Cheat sheet jQuery

Pour plus d'astuces et d'exemples jQuery, veuillez vous référer à notre cheat sheet jQuery

Tester vos sélecteurs jQuery

Lors du choix d'un sélecteur jQuery, il est sage d'en comparer quelques-uns pour vous assurer de choisir celui qui a le moins d'impact sur les performances de votre site Web / application. Pour ce faire, veuillez suivre ces étapes :

  1. Ouvrez les outils de développement de votre navigateur web
  2. Naviguez vers l'onglet console des outils de développement
  3. Tapez les éléments suivants dans la console :
    • var time1 = window.performance.now(); wmjQuery('<your jQuery selector>'); var time2 = window.performance.now(); console.log(time2 - time1);
  4. Cliquez sur Entrée
  5. Exécutez cette commande plusieurs fois dans la console pour voir la moyenne approximative du temps nécessaire
  6. Exécutez cette même commande avec d'autres sélecteurs jQuery et choisissez celui qui prend le moins de temps à s'exécuter
Remarque

  • Si le centre d'assistance du Shadow DOM est assuré, vous devriez alors pouvoir capturer les éléments Shadow DOM dans l'éditeur et utiliser jQuery pour les identifier
  • Cependant, vous ne serez pas en mesure d'exécuter wmjQuery dans la console DevTools, vous devrez utiliser cette syntaxe à la place :
_walkmeInternals.ctx.get('JQuerySelectorRunnerShadow').run('enter your selector here')

jQuery dans WalkMe Share

Cet article a-t-il été utile?

Merci pour votre avis!

Be part of something bigger.

Engage with peers, ask questions, share ideas

Ask the Community
×