jQuery selectors (jQuery-Selektoren)
Kurzübersicht
jQuery ist eine Javascript-Bibliothek, die zur Manipulation einer HTML-Seite verwendet werden kann. CSS-Selektoren ermöglichen es Ihnen, Elemente in der HTML-Struktur anhand ihrer Merkmale wie z. B. ID, Klasse, Typ, Attribute oder Attributwerte zu identifizieren.
Die häufigsten jQuery-Selektoren im WalkMe-Editor werden wie folgt verwendet:
- Onboarding-Ziele erstellen: Erstellen Sie Onboarding-Ziele basierend auf einem Bildschirmelement
- Selected Element Launchers: Fügen Sie den jQuery Selector in die Registerkarte Selected Element eines Launchers hinzu
- Werte erfassen: Erfassen Sie einen Wert aus einer Benutzervariablen oder einem Text auf dem Bildschirm, um ihn in eine dynamische Ankündigung einzubinden oder ihn in einer Regel zu verwenden.
- Seitenbedingungen überprüfen: Veranlassen Sie WalkMe an, die Attribute eines Elements auf dem Bildschirm zu analysieren, um sie als Regeltyp in der Rule Engine zu verwenden.
Funktionsweise
Finden Sie das Element im HTML, indem Sie mit der rechten Maustaste auf dieses klicken und „Inspect Element“ auswählen. Das Element wird auf dem Bildschirm und im Entwicklerbereich (Developer Panel) markiert. Identifizieren Sie die eindeutigen Merkmale des Elements (wie Ort, Klasse, ID und Stil), um Ihren jQuery-Selektor zu erstellen. Elemente können anhand ihrer Position oder Attribute (Klasse, ID und Stil) identifiziert werden.
Schritt 1: Erstellen Sie den jQuery Selector
Die grundlegende Syntax für die Verwendung von jQuery-Elementen in WalkMe ist: Element – Selector – Value
Nach der Identifizierung des Elements erstellen Sie einen jQuery-Selektor, der spezifisch das anschaut, was Sie interessiert.
Nachstehend folgen einige Beispiele für jQuery-Selektoren:
- ul element with id create-account: ul#create-account.
- ul elements with class nav: ul.nav.
- ul elements with class nav and class fl type: ul.nav.fl.
Sehen Sie sich unten eine Liste der nützlichen jQuery Selectors an.
Schritt 2: Testen Sie Ihren Selector in der Konsole
- Geben Sie in der Befehlszeile im Entwickler-Bedienfeld wmjQuery(“”) mit Ihrem jQuery-Selektor zwischen den “” ein und drücken Sie die Eingabetaste.
- Hinweis: Sie können wmjQuery nur in einem Browser verwenden, wenn die Editor-Erweiterung aktiviert ist
- Wenn Ihre Abfrage den gewünschten Wert zurückgibt, funktioniert Ihr Selektor!
- Hinweis: Um die ausgewählten Elemente auf dem Bildschirm zu sehen, klicken Sie auf More…
- Bewegen Sie den Mauszeiger über die zurückgegebenen Objekte, um das hervorgehobene Element anzuzeigen.
Schritt 3: Verwenden Sie jQuery Selectors in WalkMe
Je nachdem, wie Sie das jQuery-Element verwenden möchten, kann jQuery in WalkMe in folgenden Bereichen eingesetzt werden:
- Verwenden Sie das jQuery-Element, um ein Element für einen Schritt oder Launcher über die Registerkarte „Selected Element“ (Ausgewähltes Element) im Optionsmenü zu identifizieren.
- Verwenden Sie das jQuery-Element, um den nächsten Schritt in einem Walk-Thru auszulösen. Dazu klicken Sie im Menü „Additional Step Triggers“ (Zusätzliche Schrittauslöser) auf das Element oder bewegen den Mauszeiger darüber.
- Verwenden Sie das jQuery-Element, um einen Wert auf dem Bildschirm zu erfassen und als dynamischen Text im Rich Text Editor in einer Schritt-Sprechblase oder einem ShoutOut zu verwenden.
- Verwenden Sie das jQuery-Element, um ein Ziel in der Registerkarte „Goal“ (Ziel) zu erstellen.
- Verwenden Sie den jQuery-Selektor in der Rule Engine als Regeltyp (ähnlich wie jQuery als Regeltyp für Bildschirmelemente verwendet wird).
Verfügbare Rule Engine jQuery Operators:
- True: Bedeutet, dass mindestens ein Element gefunden wurde
- False: Bedeutet, dass keine Elemente gefunden wurden
- Visible: Bedeutet, dass das Element sichtbar ist
- Text Is/Is Not: Bedeutet, dass der Text der Texteingabe entspricht
- Hinweis: Wenn der Selector mehr als ein Element zurückgibt, wird der Text aller Elemente als ein Element zusammengefasst.
- Greater Than/Less Than: Bedeutet, dass der Wert über oder unter einer ganzen Zahl liegt
- Like/Not Like: Bedeutet eine komplizierte Textsyntax
- Length Is/Is Not/Greater Than/Less Than: Bedeutet gleich, größer oder kleiner als eine ganze Zahl
- Wird verwendet, um abzufragen, wie viele Elemente die Abfrage zurückgibt.
- Die genaue Abfragelänge können Sie in der Konsole herausfinden: wmjQuery("element.value").length
Nützliche jQuery-Selektoren
| Abfrage | Beschreibung |
|---|---|
| Element | Abfragen eines Elements |
| element[attribute] | Abfragen eines Attributs eines Elements |
| element[attribute][attribute] | Abfragen mehrerer Attribute eines Elements |
| element[attribute="attribute value"] | Abfragen eines Attributs eines Elements und dessen Wert |
| element[attribute^="text"] | Abfragetext am Anfang eines Attributs |
| element[attribute*="text"] | Abfragetext, der in einem Attribut enthalten ist |
| element[attribute!="text"] | Abfragetext, der von einem Attribut ausgeschlossen ist |
| element child-element | Abfragen des untergeordneten Elements eines Elements (Leerzeichen zeigt an, dass das erste Element das übergeordnete Element des zweiten ist) |
| element:checked | Abfragen des Status eines Kontrollkästchens (markiert oder nicht markiert) |
| [element='']:visible | Abfragen, ob ein Element sichtbar ist |
| element:contains(Text) | Abfrageelement enthält Text |
| element:eq(#) | Abfragen spezifischer Ergebnisse in Reihenfolge (Zählung beginnt bei 0) |
Testen Ihrer jQuery-Selektoren
Bei der Auswahl eines jQuery-Selektors ist es ratsam, mehrere zu vergleichen. Dadurch können Sie sicherstellen, dass Sie denjenigen auswählen, der die geringsten Auswirkungen auf die Leistung Ihrer Website/Anwendung hat. Führen Sie dazu die folgenden Schritte aus:
- Öffnen Sie die Entwicklertools Ihres Webbrowsers
- Gehen Sie zur Registerkarte „Dev Tools“ der Konsole
- Geben Sie Folgendes in die Konsole ein:
- var time1 = window.performance.now(); wmjQuery('<your jQuery selector>'); var time2 = window.performance.now(); console.log(time2 - time1);
- Klicken Sie auf Enter
- Führen Sie diesen Befehl mehrmals in der Konsole aus, um ungefähr die durchschnittliche Zeit zu sehen, die er benötigt.
- Führen Sie denselben Befehl mit einigen alternativen jQuery-Selektoren aus und wählen Sie denjenigen, der am wenigsten Zeit für die Ausführung benötigt.