Sélecteurs 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).
É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.
Étape 2 : Tester votre sélecteur dans la console
- 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
- Remarque : vous pourrez uniquement utiliser wmjQuery dans un navigateur avec l'extension Éditeur activée
- 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…
- 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
- 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)
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
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) |
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 :
- Ouvrez les outils de développement de votre navigateur web
- Naviguez vers l'onglet console des outils de développement
- 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);
- Cliquez sur Entrée
- Exécutez cette commande plusieurs fois dans la console pour voir la moyenne approximative du temps nécessaire
- Exécutez cette même commande avec d'autres sélecteurs jQuery et choisissez celui qui prend le moins de temps à s'exécuter