[MUSIK].
Lassen Sie uns nun einige Zeit damit verbringen, zu verstehen, wie Bootstrap und
jQuery zusammenarbeiten, um die JavaScript-Komponenten des Bootstrap zu unterstützen.
Wie wir aus dem vorherigen Modul verstanden haben, hat Bootstrap
eine Reihe von interessanten JavaScript-basierten Komponenten.
Und wir haben auch gelernt, dass die JavaScript-basierten Komponenten von Bootstrap
alle mit jQuery als Unterstützung aktiviert sind.
So viele dieser Plugins sind in jQuery geschrieben.
Ihre Plugins selbst können einzeln einbezogen werden oder
Sie können alle Plugins als eine Einheit zusammenfügen.
In den Übungen haben wir alle
JavaScript-Plugins von Bootstrap in unsere Webseite aufgenommen.
Wir haben diese Grafik auch im vorherigen Modul gesehen,
um uns zu helfen, die Beziehung zwischen JavaScript, jQuery und
wie die JS-basierten Plugins des Bootstrap zu verstehen.
Also haben wir gesehen, dass die JS-Komponenten von Bootstrap in den jQuery-basierten Komponenten
oxieren und es uns leicht machen, sie auf unserer Webseite zu nutzen.
Wir haben auch gelernt, dass die JavaScript-basierten Komponenten des Bootstrap
in Ihrer Webseite verwendet werden können, ohne eine einzige Zeile JavaScript-Code zu schreiben.
Hier kommen also die Daten-*-Attribute zu unserer Rettung.
So können Sie die verschiedenen Attribute, die wir im vorherigen
Modul gesehen haben, verwenden, um viele der JavaScript-basierten Komponenten unseres Bootstrap zu aktivieren.
Falls Sie mehr Flexibilität mit Ihren JavaScript-Komponenten wünschen, steht Ihnen
die volle Flexibilität dieser JavaScript-basierten API
für alle Bootstrap-JavaScript-Komponenten zur Verfügung.
Sie können Code mit der jQuery-Syntax schreiben und diesen dann
zusammen verwenden, um die JS-Komponenten Ihres Bootstrap zu steuern.
Wir werden das in diesem Modul etwas genauer untersuchen.
Bevor wir weiter gehen, lassen Sie mich Ihnen einen kurzen Überblick über jQuery und seine Syntax geben
, damit wir einen Teil des Codes verstehen, den wir in diesem Modul schreiben werden.
jQuery ist eine sehr leistungsfähige,
leichtgewichtige JavaScript-basierte Bibliothek, die eine Reihe von verschiedenen Komponenten bereitstellt.
Es ist eine funktionsreiche Bibliothek, die das Schreiben von Code für
HTML- oder DOM-Manipulation ermöglicht.
Es ermöglicht Ihnen, CSS-Manipulation durchzuführen.
So
können Sie zum Beispiel CSS-Klassen auf verschiedene HTML-Elemente über den jQuery-Code anwenden.
Es ermöglicht Ihnen, HTML-Ereignisse zu behandeln,
und wenn diese Ereignisse auftreten, können Sie Methoden implementieren, die
als Reaktion auf das Auftreten dieser Ereignisse ausgeführt werden.
jQuery unterstützt auch verschiedene Effekte und
Animationen, die auf Ihre HTML-Elemente angewendet werden können.
Auch jQuery ermöglicht es Ihnen, mit einem Back-End-Server mit AJAX zu interagieren.
Obwohl wir das in diesem Kurs nicht zu sehr ausführlich erforschen werden.
Wir haben auch gelernt, dass die JavaScript-Komponenten von Bootstrap
auf jQuery basieren.
Diese Komponenten verwenden viele der jQuery-Methoden, die verfügbar sind, um die
verschiedenen Funktionen zu implementieren, die diese Bootstrap JavaScript-Komponenten unterstützen.
Lassen Sie uns kurz jQuery Syntax verstehen.
Wenn Sie nun einen Teil des Codes gesehen haben, den wir
im vorherigen Modul enthalten haben, speziell für
den Tooltip, erinnern Sie sich, dass es etwas gab, das mit einem Dollarzeichen begonnen hat.
Also, die jQuery-Syntax wird alle mit dem Dollarzeichen implementiert.
Das Dollarzeichen am Anfang eines Satzes impliziert, dass dies die
verfügbaren Bibliotheks-Plugins von jQuery definiert und darauf zugreift.
Wenn wir jetzt das Dollarzeichen verwenden, geben Sie auch einen Selektor an.
Der Selektor wird verwendet, um die
HTML-Elemente in Ihrem DOM abzufragen und zu finden, auf die Sie diese Manipulation anwenden möchten.
Es gibt verschiedene Möglichkeiten, Auswahlen durchzuführen.
Wir werden sie in der nachfolgenden Folie betrachten.
Dann ist der dritte Aspekt einer jQuery-Anweisung die Aktion, die Sie angeben.
Nun, da Sie ein HTML-Element auswählen, welche Art von Aktion Sie für
dieses Element ausgeführt werden möchten, also das ist der dritte Teil, den Sie sehen werden.
Als Beispiel können Sie eine jQuery-Anweisung
wie $ („p“) innerhalb von Codes und dann .hide angeben.
In diesem Fall impliziert es, dass, wählen Sie alle diese HTML-Elemente,
die die Absatzelemente sind,
beginnend mit dem p-Tag, und dann diese Elemente verstecken diese Elemente.
Die auszuführende Aktion ist also die Höhe,
so dass alle p-Elemente aus Ihrem
DOM und folglich von der gerenderten Webseite ausgeblendet werden.
In ähnlicher Weise werden Sie später sehen
, dass wir eine Aussage wie Dollar und
dann innerhalb von Anführungszeichen #mycarousel verwenden, was
bedeutet, dass Sie die ID eines bestimmten HTML-Elements
angeben und dann Karussell und Pause angeben.
Wir werden uns mehr Details darüber ansehen, was dies tatsächlich
in einer der nachfolgenden Folien dort tut.
Beachten Sie jedoch die Struktur der jQuery-Anweisungssyntax dort.
Sie geben den Selektor an, und dann geben Sie die entsprechende Aktion für das
Element, das von diesen Selektoren ausgewählt wird ausgeführt werden.
Werfen wir einen Blick auf Bootstrap jQuery Beispiel.
Wir gehen zurück zu dem vorherigen Beispiel, das wir zuvor gesehen haben,
wo wir den Tooltip vorstellen.
Also, wenn wir den Tooltip einführen, spezifizierten wir Skript und
dann innerhalb des Skripts, sagten wir $ (Dokument).
In diesem Fall bedeutet das Dokument das gesamte Dokument.
Das hier ausgewählte ist also für das gesamte Dokument.
Also für das gesamte Dokument, und dann werden wir bereit angeben.
Bereit ist die Aktion, die ergriffen werden muss.
Wenn das Dokument fertig ist, dann führen Sie diese Funktion aus, die
als Parameter für diese ready-Aktion angegeben ist.
Die Funktion, die wir sahen, dass sie für den Tooltip verwendet wurde, spezifizierte sie als $, und
dann innerhalb von Klammern, sagte es, data-toggle=“ tooltip“.
Jetzt hier geben wir an, dass die Elemente auswählen, für
die es ein Attribut mit data-toggle = = „tooltip“ gibt. Führen
Sie dann für die Elemente, die diesen Kriterien entsprechen, diese Aktion mit der
Bezeichnung „QuickInfos aktivieren“ für diese Elemente aus.
Und wir schließen die Funktion dort.
Dies gibt also an, dass dieses bestimmte Skript
für die Elemente aktiviert wird, für die Sie den Tooltip zum Umschalten angewendet haben.
Also im Grunde für jene HTML-Elemente, für die Sie Tooltips definiert haben,
möchten Sie, dass der Tooltip dort aktiviert wird.
So interpretieren wir diese Syntax dieses jQuery-Beispiels hier.
Schauen wir uns die verschiedenen Möglichkeiten an, Selektoren zu spezifizieren.
Wie wir aus der jQuery-Anweisungssyntax erkennen,
folgen wir immer dem Dollar und geben dann in Klammern einen Selektor an.
Wie spezifizieren wir Selektoren, was sind die verschiedenen Möglichkeiten, wie Sie Selektoren angeben können?
Hier sind einige Möglichkeiten.
Sie können einen Selektor angeben, indem Sie ein bestimmtes
HTML-Element angeben, indem Sie das Tag angeben.
Sie können also p, button, h4,
h3 oder eines der HTML-Tags direkt sagen.
Und so wird in diesem Fall der HTML-Tag-Name in Anführungszeichen angegeben und
das wird Ihren Selektor bilden.
Wenn Sie einen Selektor wie diesen anwenden, sagen Sie, dass alle Elemente
ausgewählt werden, die diesen Kriterien entsprechen.
Dann können Sie auch ein bestimmtes
HTML-DOM-Element angeben, indem Sie die ID dieses Elements angeben, indem Sie die #id verwenden.
So verwenden wir zum Beispiel #myCarousel.
Also in diesem Fall sagen Sie, wählen Sie das bestimmte
HTML-Element, für das die ID myCarousel ist.
Das ist also die andere Art der Auswahl, indem Sie eine ID für ein Element angeben.
Die dritte Möglichkeit besteht darin,
Elemente durch die Klassen auszuwählen, die darauf angewendet haben.
So können Sie beispielsweise in Klammern sehen, wenn Sie .btn sagen,
was bedeutet, dass alle HTML-DOM-Elemente, für
die Sie die Schaltflächenklasse angewendet haben, ausgewählt werden.
Oder Sie können sich sogar weiter qualifizieren, indem Sie eine Gruppe von Klassen angeben, indem Sie
.btn.btn-default sagen, was bedeutet, dass die Elemente, für
die die Schaltfläche Klasse und die Schaltfläche Standardklasse angewendet wurden.
Das ist also ein anderer Weg,
indem Sie die Klassen verwenden, die auf das HTML-Element angewendet werden.
Die andere Möglichkeit besteht darin, ein Attribut anzugeben, das
auf HTML-Element angewendet wurde.
So können Sie beispielsweise sagen, dass Attribute in eckigen Klammern hier angegeben werden.
So können Sie in eckigen Klammern href sehen, und es in das Zitat aufnehmen
, so dass alle diese HTML-Elemente, für die href Attribut angewendet wurde.
In ähnlicher Weise können Sie data-toggle = „tooltip“ sagen,
was im Wesentlichen alle Elemente speichert
, für die das tooltip Attribut data-toggle angewendet wurde.
Wählen Sie auch das aktuelle Element aus
, für das Sie etwas tun möchten, indem Sie $ (this) sagen.
Also, für das aktuelle Element, das bereits ausgewählt wurde
, tun Sie dazu etwas.
Und noch viel mehr Möglichkeiten.
Dies sind also einige Beispiele, also werden Sie sehen, wie ich einige dieser
Beispiele in den Beispielen und der folgenden Übung verwende.
Nicht nur das, Sie können auch jQuery-Ereignisse angeben,
Ereignisse, auf denen Sie antworten.
So werden zum Beispiel die Benutzerinteraktionen
mit verschiedenen Elementen auf Ihrer Webseite DOM-Ereignisse verursachen.
So kann der Benutzer beispielsweise mit einer Maus an einer bestimmten Stelle klicken.
Oder doppelklicken Sie, oder wenn die Maus eine bestimmte Position betritt und verlässt.
Für die Tastatur können Sie auf Tastendrucke, Keydown und Keyup reagieren.
Ereignisse für Formulare, wenn das Formular gesendet
wird, wenn sich ein bestimmter
Eingabeelementwert ändert und auf ein bestimmtes Element fokussiert wird usw.
Wir können sogar über das gesamte Dokument sprechen.
So
können Sie beim Laden des Dokuments, beim Ändern der Größe des Dokuments, beim Scrollen oder Entladen des Dokuments auf diese Ereignisse reagieren.
In diesem Fall enthalten die jQuery-Ereignismethoden, die unterstützt werden, ready,
click, dblclick, mousedown, on und so weiter.
Dies sind also alle Ereignismethoden,
die beim Auftreten eines dieser Ereignisse dort ausgeführt werden.
Nehmen wir ein Beispiel des Bootstrap's Karussell, um zu sehen, wie
JavaScript-Code geschrieben werden kann, um die Karussellaktionen zu steuern.
Also, für ein Karussell haben Sie bereits vom vorherigen Modul gesehen, Indexgröße.
Wir haben all diese Attribute verwendet.
Also haben wir das Attribut data-slide = „prev|next“ verwendet, oder
wir sagten, data-slide-to und dann die spezifische Foliennummer angegeben,
wo es heißt data-ride+"carussell“.
Und dann haben wir Datenintervall angegeben, das Intervall für
die gleitende Aktion stattfinden soll.
So können Sie für das Karussell Dinge tun, wie zum
Beispiel können Sie JavaScript-basierte Steuerelemente angeben.
Sie können $ sehen, und in Klammern angeben, um die Elemente auszuwählen,
die Karussell, die in Ihrer Seite enthalten sind, indem Sie .karussell angeben. Das
bedeutet, dass alle Elemente, für die die Karussellklasse angewendet wurde,
und danach verwenden Sie das .carousel, um etwas anzugeben.
Als Beispiel werden Sie sehen, wie ich so etwas
in der folgenden Übung verwende.
Wir sagen. Karussell und Karussell, und
im Inneren würden Sie Intervall angeben: 2000,
was bedeutet, setzen Sie das Intervall für das Schieben auf 2000 Millisekunden.
Oder zwei Sekunden, in diesem Fall.
Auf diese Weise steuern oder ändern Sie eine bestimmte Eigenschaft
des Karussell JavaScript-Elements dort.
Das Karussell unterstützt auch viele andere Bedienelemente.
So können Sie zum Beispiel Karussell ('Zyklus') sagen,
was bedeutet, dass Sie beginnen, die Elemente von links nach rechts zu wechseln.
Sie können Karussell ('Pause') sagen, um die Gleitwirkung des Karusells zu pausieren.
Dann können Sie Karussell (Zahl) sagen, also
fährt es das Karussell zu diesem bestimmten Karussell Artikel.
Und dann kannst du Karussell ('prev'),
Karussell ('next') sagen, um zum vorherigen Punkt und zum nächsten Punkt in meinem Karussell zu gehen.
Diese können also direkt aus unserem JavaScript-Code aufgerufen werden.
Ähnlich, wenn sich das
JavaScript-Karussell in Ihrer Webseite befindet, verursacht es verschiedene Ereignisse.
Und basierend auf dem Auftreten dieser Ereignisse können Sie reagieren.
So können Sie zum Beispiel slide.bs.karussell sagen.
Dieses bestimmte Ereignis wird ausgelöst, wenn die Folieninstanzmethode aufgerufen wird.
In ähnlicher Weise bedeutet slid.bs.carousel, dass
dieses Ereignis ausgelöst wird, wenn der Folienübergang zum nächsten Element abgeschlossen wurde.
In Ihrem Code können Sie also etwas
wie $ (“ #myCarousel „) .on ('slide.bs.carousel' angeben.
Also, wenn diese Folienaktion gestartet wird, rufen Sie diese Funktion auf
und tun Sie dann etwas in dieser Funktion dort.
So kann diese Art von Code auch für die
Reaktion auf die Ereignisse zurückgegeben werden, die durch das Verhalten Ihres Karussells verursacht werden.
Nachdem wir einige dieser Beispiele betrachtet haben, werden wir zu einer Übung gehen, in der
wir tatsächlich einige JavaScript-basierten Code schreiben, um unser Karussell zu steuern.
Wir werden Code schreiben, um ein paar Tasten in unser Karussell aufzunehmen,
die verwendet werden, um die Gleitwirkung des Karussell zu steuern.
Also, was bedeutet, dass wir die Gleitwirkung unseres Karusells pausieren und fortsetzen können.
Und wir werden diese Schaltflächen von JavaScript aktivieren.
( MUSIK)