This page has been robot translated, sorry for typos if any. Original content here.

JQuery

7 Scrollen Sie zu Top-Lösungen in jQuery
Auf der Seite

JQuery

Bevor Sie mit einem Element arbeiten, müssen Sie lernen, es auszuwählen. Die Auswahl der Elemente in jQuery ist wie die Auswahl in CSS aufgebaut.

Um zu verstehen, wie die Auswahl der Elemente in jQuery erfolgt, sehen wir uns die CSS-Datei an.

Alles was vor geschweiften Klammern steht, wird als Selektor bezeichnet.

  1. Tag-Name
  2. Klasse
  3. Die Kennung

Alles, was nach dem Selektor in geschweiften Klammern steht, sind die Eigenschaften des Elements mit dem angegebenen Selektor.

Was passiert eigentlich? Wenn ein Browser eines Benutzers auf unsere CSS-Datei zugreift, beginnt er beim Ausführen eines Selektors mit der Ausführung von Eigenschaften, die dem Element mit diesem Selektor entsprechen. Zum Beispiel in einer CSS-Datei:

 p {
  Schriftfamilie: Tahoma;
  Schriftgröße: 12px;
 }

Jetzt, wenn der Browser das Element erreicht

Hallo

, dann gelten diese Eigenschaften für sie.

Sehen wir uns nun an, wie die Auswahl der untergeordneten Elemente in CSS erfolgt. Zum Beispiel müssen wir die obigen CSS-Eigenschaften nicht auf alle Absätze, sondern auf Absätze mit dem Bezeichner-Logo anwenden. Dann sieht das CSS so aus:

 p #logo {
  Schriftfamilie: Tahoma;
  Schriftgröße: 12px;
 } 

und wenn wir diese Eigenschaften nicht nur auf Absätze mit id = "logo", sondern auf alle Elemente mit id = "logo" anwenden wollen, dann sieht unser CSS so aus:

 #logo {
  Schriftfamilie: Tahoma;
  Schriftgröße: 12px;
 }

Wir haben uns daran erinnert, wie die Auswahl der Elemente in CSS erfolgt. Wie gesagt, die Auswahl der Elemente in jQuery erfolgt analog zu CSS. Wenn wir also alle Absätze auswählen wollen, schreiben wir den folgenden Code:

  $ ("P"); 

Oder wenn wir alle Elemente auf der Seite mit id = "logo" auswählen müssen, dann schreibe es so:

  $ ("# Logo"); 

Ebenso können wir alle Elemente nach Klassen auswählen, zum Beispiel class = "logo":

  $ (". Logo"); 

Wenn wir untergeordnete Elemente auswählen möchten, beispielsweise alle Absätze

Mit einem Identifizierungslogo müssen wir uns registrieren:

  $ ("P #logo"); 

Der nächste Auswahltyp ist das Auswählen des nächsten Elements. Zum Beispiel haben wir den folgenden HTML-Code:

Test 1

Test 2

Und wir müssen das p-Tag auswählen, das den Text "Test 2" enthält. Wie Sie sehen können, ist dies mit den obigen Beispielen nicht so einfach. Aber in jQuery gibt es einen speziellen Selektor, mit dem wir die Aufgabe vereinfachen können. Dieser Selektor wählt das nächste Element + aus. Ie. In unserem Fall können wir an ein div mit id = "logo" binden und mit diesem Selektor das folgende Element auswählen:

  $ ("# Logo + p"); 

Manchmal gibt es eine Situation, in der Sie alle Kinder auswählen müssen. Dafür hat jQuery einen Selektor>. Zum Beispiel haben wir den folgenden HTML-Code:

 <div id = "Inhalt">
  <p> Hallo </ p>
  <p> Wir fangen an, jQuery zu studieren </ p>
  <p> Und jetzt machen wir uns mit Selektoren der Elementauswahl vertraut </ p>
 </ div>

Und wir müssen alle p auswählen, die sich innerhalb des div-Tags befinden. Id = "content" Unser Code sieht so aus:

  $ ("# Inhalt> p"); 

Der folgende Auswahltyp in jQuery ist eine Auswahl von Elementen nach Attributwerten. Diese Auswahl wird sehr häufig in Projekten gefunden, beispielsweise um ein Dropdown-Menü zu implementieren. Zum Beispiel haben wir den HTML-Code:

 <img src = "images / 1.png" width = "50" Höhe = "50">
 <img src = "images / 2.png" width = "50" Höhe = "50">
 <img src = "images / 3.png" width = "50" Höhe = "50">

und wir müssen alle Bilder mit der Breite = "50" auswählen. Dann wird die Auswahl in jQuery so aussehen.

  $ ("Img [width = 50]"); 

Der folgende Sampling-Typ in jQuery ist eine Stichprobe von Attributwerten, die mit einer Bedingung beginnen. Zum Beispiel haben wir den HTML-Code:

 <img src = "Bilder / img1.png" width = "50" Höhe = "50">
 <img src = "Bilder / img2.png" width = "50" Höhe = "50">
 <img src = "Bilder / img3.png" width = "50" Höhe = "50">

und wir müssen alle Bilder auswählen, deren src-Attribut mit images / img beginnt, dann wird diese Auswahl in jQuery wie folgt gemacht:

  $ ("Img [src ^ = images / img]"); 

Analog dazu können wir eine Stichprobe der Attribute des Wertes erstellen, die mit einer bestimmten Bedingung enden. Ie. vom vorherigen html-code wollen wir alle png-bilder auswählen. Dann würde die Auswahl in jQuery wie folgt aussehen:

  $ ("Img [src $ =. Png]"); 

Die nächste Auswahl in jQuery ist, wenn Sie ein Attribut auswählen müssen, dessen Wert irgendwo sein kann. Aus dem vorherigen HTML-Code müssen wir alle Bilder im Titel auswählen, die das Wort "img" haben.

  $ ("Img [src * = img]"); 

Wir haben die grundlegenden Methoden zum Auswählen von Elementen in jQuery untersucht, mit denen wir ein beliebiges Element auswählen und dann bestimmte Aktionen ausführen können. Weitere Informationen zu jQuery-Auswahlmethoden finden Sie unter offizielle Website . Aber die Auswahl der Elemente in jQuery endet dort nicht und es gibt Beispielfilter für eine feinere Auswahl der Elemente in jQuery.

JQuery-Elementauswahlfilter

In jquery gibt es viele Methoden zum Filtern ausgewählter Objekte, über die Sie in der offiziellen Dokumentation nachlesen können. Und ich werde nur die notwendigsten und oft verwendeten (meiner Meinung nach) Filter betrachten.

Wählen Sie gerade Elemente gerade aus

Es entsteht eine solche Situation, wenn nur gerade Elemente aus der Tabelle ausgewählt werden müssen. Dafür haben die Entwickler einen speziellen Filter erstellt: even. Zum Beispiel haben wir eine Tabelle:

 <tabelle id = "'tabelle'">
 <tbody>
 <tr>
 <td> 1 </ td>
 <td> Name 1 </ td>
 </ tr>
 <tr>
 <td> 2 </ td>
 <td> Name 2 </ td>
 </ tr>
 <tr>
 <td> 3 </ td>
 <td> Name 3 </ td>
 </ tr>
 <tr>
 <td> 4 </ td>
 <td> Name 4 </ td>
 </ tr>
 </ tbody>
 </ table>
 <vor>

Und wir müssen gerade Linien auswählen. Wählen Sie dazu die erforderlichen Elemente aus und wenden Sie einen Paritätsfilter an. So sieht es in jQuery aus:

  $ ('# table tr: even'); 

Also haben wir alle geraden Linien gewählt. Aber sei vorsichtig - alle geraden Linien aus der Sicht von Javascript. Und in Javascript beginnt die Zählung bei 0, also haben wir die erste Zeile in der ausgewählten Tabelle und die dritte Zeile in der Tabelle.

Seltsame Elementauswahl ungerade

Das Gegenteil (wenn ich das sagen darf) zum vorherigen Filter ist der ungerade Filter - die Wahl der ungeraden Elemente. Angenommen, aus der Tabelle müssen ungerade Zeilen ausgewählt werden. Wenden Sie dann den ungeraden Filter an und sehen Sie so aus:

  $ ('# table tr: ungerade'); 

Das erste Element zuerst auswählen

Wenn wir nur ein Element auswählen müssen - das erste, dann ist der Filter zuerst für diese Zwecke geeignet. Zum Beispiel, aus der Tabelle müssen wir nur die erste Zeile auswählen, dann sieht die Auswahl dieses Elements wie folgt aus:

  $ ('# table tr: first'); 

Wählen Sie zuletzt den letzten Punkt

Um das letzte Element auszuwählen, wenden Sie den letzten Filter an. Zum Beispiel müssen Sie aus unserer Tabelle die letzte Zeile auswählen. Dann unser Beispiel:

  $ ('# table tr: last'); 

Der negative Filter nicht

Dieser Filter ist für die Auswahl aller Elemente erforderlich, außer für Elemente, die der Bedingung entsprechen. Zum Beispiel haben wir

 </ pre>
 <div id = "'1'"> </ div>
 <div> Beispiel: </ div>
 <vor>

Wir müssen alle Divs auswählen, mit Ausnahme der Divs, die innerhalb von div-a c id = '1' liegen. Und wenn wir schreiben:

  $ ('div'); 

Wählen Sie dann alle divs aus, auch diejenigen, die in div c id = '1' sind. In diesem Fall müssen Sie den Nicht-Filter anwenden.

  $ ('div: not (# 1 div)'); 

Und so werden wir alle für uns benötigten Divs auswählen

Wählen Sie ein Element, das das angegebene Element has enthält

Manchmal gibt es Situationen, in denen ein Element ausgewählt werden muss, das ein anderes spezifisches Element enthält. Und dafür gibt es in jquery einen Filter. Zum Beispiel müssen wir das div aus dem vorherigen Beispiel auswählen, in dem es ein anderes div gibt. Dann wird unsere Probe so aussehen:

  $ ('div: hat (div)'); 

Ie. Wählen Sie alle div, und wenden Sie dann den Filter hat an, in dem wir angeben, dass das ausgewählte div in sich das andere div enthalten muss

Auswählen eines Elements nach Inhalt

Zum Beispiel müssen wir ein Element nach seinem Inhalt auswählen, dann enthält das Enthält eine Hilfe. Aus dem obigen Code müssen wir das div auswählen, das das "Beispiel" enthält:

  $ ('div: enthält (Hallo)'); 

Elementfilter ohne Erben leer

Es gibt Situationen, in denen es notwendig ist, nur diejenigen Elemente zu belassen, die keine Erben haben und nichts von den ausgewählten Elementen enthalten. Zum Beispiel haben wir einen HTML-Code

 </ pre>
 <Tabelle>
 <tbody>
 <tr>
 <td> 1 </ td>
 <td> </ td>
 </ tr>
 <tr>
 <td> </ td>
 <td> 2 </ td>
 </ tr>
 </ tbody>
 </ table>
 <vor>

Und wir müssen alle td auswählen, die keine Erben haben.

  $ ('td: leer'); 

Und als Ergebnis werden wir das zweite <td> aus dem ersten <tr> und das erste <td> aus dem zweiten <tr> auswählen.

Nach versteckten Elementen filtern

In jQuery müssen Sie häufig alle ausgeblendeten Elemente auswählen. Und dafür gibt es einen speziellen versteckten Filter. Ie. Wenn wir alle divs auswählen müssen, die momentan ausgeblendet sind, müssen wir den folgenden Code schreiben:

  $ ('div: versteckt'); 

Nach sichtbaren Elementen filtern

Der gegenüberliegende Filter ist der sichtbare Filter, der alle sichtbaren Elemente filtert. Ie. wenn wir alle divs auswählen müssen, die gerade sichtbar sind.

  $ ('div: sichtbar'); 

JQuery Methoden: Text, verstecken, zeigen, Breite, Höhe, HTML

Nach Auswahl des erforderlichen Elements in jQuery müssen wir Aktionen ausführen. In diesem Artikel werden wir auf die Aktionen eingehen, die für Elemente mit jQuery ausgeführt werden können.

Wie Sie wissen, arbeitet JavaScript mit dem DOM-Modell der Seite. Daher müssen JavaScript-Code erst nach dem Erstellen des DOM-Modells ausgeführt werden. Dazu verfügt jQuery über eine ready-Methode, die darauf wartet, dass das DOM-Modell erstellt wird.

Verwenden Sie daher den folgenden Aufbau, um das Skript nach dem Erstellen des DOM-Modells auszuführen:

 $ (Dokument) .ready (Funktion () {<Skriptcode>}) 

Die text () -Methode

Die Methode text () ist erforderlich, um den Text eines Elements abzurufen oder zu ändern. Angenommen, wir haben den folgenden HTML-Code:

 <div id = 'Text'>
 Hallo.
 </ div>

Und wir wollen diesen Text bekommen, dann müssen wir das div-Element mit id = text auswählen und die text () -Methode darauf anwenden.

 $ (Dokument) .ready (Funktion () {
 $ ('# text'). text ();
 })

Um den Textwert eines Elements zu ändern, müssen wir unseren Parameter an die Textmethode übergeben. Zum Beispiel möchten wir den Text im obigen Beispiel in "Willkommen bei web-programming.com" ändern, dann sieht unser Code so aus:

 $ (Dokument) .ready (Funktion () {
 $ ('# text'). text ('Willkommen bei web-programming.com');
 })

Die Methode hide ()

Wenn wir das Element verstecken müssen, gibt es in jQuery eine Methode zum Verbergen (Geschwindigkeit, Callback). Diese Methode kann zwei Geschwindigkeitsparameter übergeben werden - die Rate des Verschwindens, die Zeit in Millisekunden und die Callback-Funktion, die nach dem Verschwinden des Elements ausgeführt wird. Zum Beispiel brauchen wir das div mit id = text (aus dem obigen Beispiel) um in 2 Sekunden zu verschwinden, dann lautet unser Code:

 $ (Dokument) .ready (Funktion () {
 $ ('# text'). verstecken (2000);
 })

Die Methode show ()

Die umgekehrte Versteckmethode wird angezeigt, wenn wir ein Element zeigen müssen. Ähnlich wie die Verbergen-Methode verwendet show zwei Parameter - die Erscheinungsgeschwindigkeit und die Funktion, die ausgeführt wird, nachdem das Element angezeigt wird.

 $ (Dokument) .ready (Funktion () {
 $ ('# text'). show (2000);
 })

Die Methode width ()

Um die Breite eines Elements in jQuery festzulegen oder abzurufen, gibt es eine spezielle Methode für die Breite. Wenn wir die Breite des div-Elements mit id = text (aus dem obigen Beispiel) ermitteln müssen, müssen wir den folgenden Code schreiben:

 $ (Dokument) .ready (Funktion () {
 $ ('# text'). width ();
 })

Wenn wir die Breite festlegen müssen, müssen wir den Parameter an die Methode width übergeben. Wenn Sie die Maßeinheiten (%, em) nicht angeben, lautet der Standardwert px.

 $ (Dokument) .ready (Funktion () {
 $ ('# text'). width (30);
 })

Die Methode height ()

Verwenden Sie die Methode highth (), um die Höhe eines Elements in jQuery zu ändern oder zu berechnen. Diese Methode funktioniert analog zur Breitenmethode.

Die html () -Methode

Wenn wir den HTML-Code des Elements erhalten oder ändern wollen, müssen wir die html () -Methode verwenden. Diese Methode funktioniert analog zu den Methoden height () und width (). Ie. Wenn wir keine Parameter an unsere Methode übergeben, gibt die Methode den gesamten HTML-Code zurück, der in diesem Element enthalten ist. Wenn wir einen Parameter übergeben, ändern wir den HTML-Code in unserem Element.

JQuery-Methoden: fadeOut, fadeIn, fadeTo, slideUp, slideDown

Die fadeOut () -Methode

Die Methode fadeOut (time, function) dient dem sanften Verschwinden des Elements (das Element ändert seine Transparenz, bis es vollständig verschwindet). Als Parameter akzeptiert es:

  • Zeit ist die Zeit des Verschwindens
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt werden soll

Zum Beispiel haben wir den HTML-Code:

 <div id = 'Text'>
  Hallo.
 </ div>

Wir möchten, dass das Element div mit id = text glatt verschwindet. Schreiben Sie dazu den folgenden Code:

 $ (Dokument) .ready (Funktion () {
  $ ('# text'). fadeOut (2000);
 })

FadeIn () Methode

Die Methode fadeIn (time, function) dient dem reibungslosen Erscheinungsbild des Elements. Das Element ändert seine Transparenz in volle Sichtbarkeit. Als Parameter akzeptiert es:

  • Zeit - Zeit des Auftretens
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt werden soll
 $ (Dokument) .ready (Funktion () {
  $ ('# text') fadeIn (2000);
 })

Die Methode fadeTo ()

Methode fadeTo (Zeit, Deckkraft, Funktion) - ermöglicht es Ihnen, den Grad der Transparenz des Elements auf einen bestimmten Wert zu ändern. Als Parameter akzeptiert es:

  • Zeit - Zeit ändern
  • Opazität - der Grad der Transparenz von 0 bis 1
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt werden soll

Beispiel:

 $ (Dokument) .ready (Funktion () {
  $ ('# text') fadeTo (2000, 0.5);
 })

Die Methode slideUp ()

Die Methode slideUp (time, function) lässt das Element verschwinden, indem es nach oben geht. Als Parameter akzeptiert es:

  • Zeit - Zeit des Auftretens
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt werden soll

Beispiel:

 $ (Dokument) .ready (Funktion () {
  $ ('# text'). slideUp (2000);
 })

Die slideDown () -Methode

Mit der Methode slideDown (Zeit, Funktion) können Sie ein Element anzeigen. Das Element scheint zu sinken. Als Parameter akzeptiert es:

  • Zeit - Zeit des Auftretens
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt werden soll

Beispiel:

 $ (Dokument) .ready (Funktion () {
  $ ('# text'). slideDown (2000);
 })

JQuery Methoden: attr, removeAttr, addClass, removeClass, css, animieren

Ich erinnere Sie daran, dass jQuery ein JavaScript-Framework ist.

In der Praxis ist es oft notwendig, verschiedene Attribute von HTML-Elementen zu ändern, Klassen hinzuzufügen und zu entfernen, verschiedene css-Eigenschaften von Elementen anzuzeigen und zu ändern. Um dies zu tun, hat jQuery spezielle Methoden, die wir behandeln werden.

Attr ()

Die attr (key, value) -Methode wird verwendet, um den Attributwert eines Elements zurückzugeben oder zu ändern, wobei Folgendes gilt:

  • Schlüssel - der Name des Attributs
  • value - der Wert des Attributs (wenn der Wert angegeben ist, ändert er es, sonst kehrt es einfach zurück)

Ein div mit id = test hat zum Beispiel width = 300px und wir möchten seine Breite wissen

 $ (Dokument) .ready (Funktion () {
  $ ('# test') attr ('Breite');
 })

Methode removeAttr ()

Die Methode removeAttr (key) entfernt das angegebene Attribut, wobei Folgendes gilt:

  • Schlüsselname des Attributs

Zum Beispiel haben wir ein div mit id = test mit width = 300px und wir wollen dieses Attribut löschen:

 $ (Dokument) .ready (Funktion () {
  $ ('# test'). removeAttr ('width');
 })

Die addClass () -Methode

Die addClass (name) -Methode fügt dem ausgewählten Element namens name eine Klasse hinzu. Fügen Sie beispielsweise die Beispielklasse zum div mit id = test hinzu:

 $ (Dokument) .ready (Funktion () {
  $ ('# test'). addClass ('Beispiel');
 })

Die removeClass () -Methode

Die Methode removeClass (name) entfernt eine Klasse aus einem Element namens name.

Zum Beispiel haben wir ein div mit id = test und wollen unsere Klasse aus diesem div löschen:

 $ (Dokument) .ready (Funktion () {
  $ ('# test'). removeClass ('Beispiel');
 })

Die Methode css ()

Die Methode css (name, value) ermöglicht es, die css-Eigenschaft eines Elements mit dem Namen name zu erhalten (wenn der Wert dieser Eigenschaft nicht durch den zweiten Parameter angegeben ist) oder den css-Wert der Eigenschaft namens name in value zu ändern (wenn der zweite value-Parameter gesetzt ist) und wir möchten die Schriftgröße auf 20px ändern, dann:

 $ (Dokument) .ready (Funktion () {
  $ ('h1') .css ('font-size', 20);
 })

Die animate () -Methode

Bisher haben wir eine einfache Änderung der Eigenschaften von Elementen in Betracht gezogen, aber in jQuery gibt es eine weitere wunderbare Methode, mit der Sie die Eigenschaften eines Elements reibungslos ändern können, als würde es animiert werden. Dies ist die Animationsmethode (Einstellungen, Zeit, Funktion), wobei:

  • Einstellung - Eigenschaften, die ihren Wert ändern
  • Zeit - die Zeit, für die diese Eigenschaften den Wert ändern
  • Funktion - eine Funktion, die ihre Ausführung nach dem Wechsel beginnt.

Zum Beispiel haben wir ein div mit id = test und width = 1000px. Wir wollen die Breite dieses div bis zu 500px in 4 Sekunden ändern

 $ (Dokument) .ready (Funktion () {
  $ ('# test'). animate ({'Breite': '500px'}, 4000);
 })