Sélecteurs jQuery

Mis à jour le février 10, 2021 Download PDFDownload as PDF
image_pdf

Veuillez noter que cet article fournit uniquement une compréhension de base de l’utilisation des sélecteurs Jquery dans WalkMe. Il est recommandé d’avoir une connaissance préalable de l’utilisation des sélecteurs Jquery.

Aperçu général

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.

Dans certaines circonstances, les sélecteurs jQuery servent d’alternative à l’algorithme WalkMe (Mode Capture) pour identifier les éléments avec une précision améliorée, des performances optimisées, avec la possibilité de saisir des valeurs spécifiques.

Un sélecteur jQuery peut rapidement trouver un élément dans la fenêtre actuelle en fonction des critères fournis. 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. Les Objectifs d’Onboarding sont constamment vérifiés et l’utilisation de jQuery réduira la pression sur votre site.
  • Element Launchers sélectionnés – Ajoutez le sélecteur jQuery dans l’onglet Élément sélectionné d’un Launcher pour optimiser les performances.
  • 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 comme type de règle dans le moteur de règles.
  • Capturer des éléments difficiles ou changeants – Sélectionnez un élément qui peut changer ses attributs tels que sa position sur le site Web ou le texte qu’il contient. Vous pouvez également utiliser Précision pour affiner l’algorithme WalkMe.

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).

Étape 1 : Construire 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.

Découvrez ci-dessous pour une liste de sélecteurs jQuery utiles.

É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 le «» et appuyez sur Entrée.
    1. Veuillez noter que vous ne pourrez utiliser wmjQuery que dans un navigateur avec l’extension Éditeur activée.
  2. Si votre requête renvoie la valeur désirée, votre sélecteur fonctionne ! Pour voir les éléments sélectionnés à l’écran, cliquez sur le lien « Plus… ».
  3. Passez la souris sur les objets retournés pour voir l’élément surligné.

Étape 3 : Utiliser 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 survolez le menu Déclencheurs d’étapes supplémentaires.
  • 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). Les opérateurs disponibles sont:
    • 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. Lorsque le sélecteur renvoie plus d’un élément, le texte de tous les éléments est combiné comme un élément.
    • Plus que / Moins que – La valeur de moyen est supérieure ou inférieure à un nombre entier.
    • Comme / Pas comme – Signifie qu’une syntaxe de texte est 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

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). Veuillez contacter [email protected] pour toutes questions supplémentaires.

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= »]:mt_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)

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. Accédez à l’onglet console des outils de développement.
  3. Tapez « var time1 = window.performance.now(); wmjQuery(‘<Votre sélecteur jQuery>‘); var time2 = window.performance.now(); console.log(time2 – time1); » dans la console et cliquez sur Entrée sur votre clavier.
    • Exécutez cette commande plusieurs fois dans la console pour voir la moyenne approximative du temps nécessaire.
  4. Exécutez cette même commande avec d’autres sélecteurs jQuery et choisissez celui qui prend le moins de temps à s’exécuter.

Essayer

Essayez de construire des objectifs pour votre Walk-Thrus en fonction des éléments jQuery.

  1. Identifiez un élément qui représentera l’achèvement d’un processus (objectif principal) ou l’étape d’un processus (objectif d’étape).
  2. Ouvrez la console et identifiez l’élément Construire un Goal basé sur l’élément jQuery.
  3. Prévisualisez votre travail et vérifiez l’achèvement des objectifs dans le Flow Tracker.

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

Merci pour votre avis!

Articles similaires

< Retour