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 Seite

JQuery Elementauswahl

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

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

Alles, was zu geschweiften Klammern kommt, wird als Selektor bezeichnet.

  1. Tag-Name
  2. Klasse
  3. Identifikator

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

Was geht wirklich vor? Wenn der Browser des Benutzers auf unsere CSS-Datei zugreift, beginnt er, wenn er einen bestimmten Selektor erreicht, die Eigenschaften, die dem Element mit dem gegebenen Selektor entsprechen. Zum Beispiel in der CSS-Datei:

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

Jetzt, wenn der Browser das Element erreicht

Hallo

dann werden diese Eigenschaften darauf angewendet.

Sehen wir uns nun an, wie die Auswahl der untergeordneten Elemente in CSS ist. Zum Beispiel müssen wir die obigen CSS-Eigenschaften nicht auf alle Absätze anwenden, sondern auf Absätze mit dem Logo-Identifikator. 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 an die Auswahl der Elemente in CSS erinnert. Wie ich oben sagte, wird die Auswahl der Elemente in jQuery analog zu CSS durchgeführt. Wenn wir also alle Absätze auswählen wollen, schreiben wir den folgenden Code:

  $ ("P"); 

Oder wenn wir alle Elemente von der Seite mit id = "logo" auswählen müssen, dann schreiben wir es wie folgt:

  $ ("# 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 die Auswahl 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. Dies ist der Selektor der nächsten Elementauswahl +. Ie In unserem Fall können wir an ein div mit id = "logo" binden und durch Anwenden dieses Selektors das folgende Element auswählen:

  $ ("# Logo + p"); 

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

 <div id = "Inhalt">
  <p> Hallo </ p>
  <p> Wir beginnen jQuery zu lernen </ p>
  <p> Und jetzt werden wir mit den Selektoren der Auswahl der Elemente </ p> vertraut gemacht
 </ div>

Und wir müssen alle ps auswählen, die sich innerhalb des Tags befinden div id = "content" Unser Code sieht folgendermaßen aus:

  $ ("# Inhalt> p"); 

Der nächste Auswahltyp in jQuery ist die Auswahl von Elementen nach Attributwerten. Dieses Beispiel wird sehr häufig in Projekten gefunden, beispielsweise um ein Dropdown-Menü zu implementieren. Zum Beispiel haben wir 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 auswählen, die eine Breite = "50" haben. Dann wird das Beispiel in jQuery so aussehen.

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

Der nächste Typ von Beispiel in jQuery ist ein Beispiel für Wertattribute, die mit einer Bedingung beginnen. Zum Beispiel haben wir 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, für die das src-Attribut mit images / img beginnt, dann wird dieses Beispiel in jQuery wie folgt ausgeführt:

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

Analog dazu können wir eine Auswahl nach Attributwerten treffen, die mit einer bestimmten Bedingung enden. Ie vom vorherigen html-code wollen wir alle png-bilder auswählen. Dann wird das Beispiel in jQuery wie folgt aussehen:

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

Das nächste Beispiel in jQuery ist, wenn Sie nach einem Attribut auswählen müssen, dessen Wert irgendwo sein kann. Aus dem vorherigen HTML-Code müssen wir alle Bilder im Titel auswählen, also das Wort "img".

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

Wir haben uns die grundlegenden Methoden zum Auswählen von Elementen in jQuery angesehen, die es uns ermöglichen, ein beliebiges Element auszuwählen und dann bestimmte Aktionen auszuführen. Sie können mehr über Sampling-Methoden in jQuery unter lesen offizielle Website . Aber die Auswahl von Elementen in jQuery endet dort nicht, und für eine subtilere Auswahl von Elementen in jQuery gibt es Auswahlfilter.

JQuery-Elementfilter

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

Auswahl von geraden Elementen sogar

Es gibt eine Situation, in der Sie nur die geraden Elemente aus der Tabelle auswählen müssen. Zu diesem Zweck 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 legen Sie einen Paritätsfilter fest. Hier sieht jQuery so aus:

  $ ('# table tr: even'); 

Also haben wir alle geraden Reihen ausgewählt. Aber Vorsicht hier - alle geraden Linien aus der Sicht von Javascript. Und in Javascript startet der Countdown von 0, so dass wir die erste Zeile in der Tabelle und die dritte Zeile in der Tabelle ausgewählt haben.

Wählen Sie ungerade ungerade Elemente

Das Gegenteil (wenn so zu sagen) des vorherigen Filters ist der ungerade Filter - die Wahl der ungeraden Elemente. Angenommen, wir müssen ungerade Zeilen aus der Tabelle auswählen. Dann wenden Sie den ungeraden Filter an und so wird es aussehen:

  $ ('# table tr: ungerade'); 

Wählen Sie zuerst das erste Element

Wenn wir nur ein Element auswählen müssen - das erste, dann ist der erste Filter für diesen Zweck geeignet. Zum Beispiel müssen wir aus der Tabelle nur die erste Zeile auswählen, dann sieht das Beispiel 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'); 

Negativfilter nicht

Dieser Filter ist notwendig, um alle Elemente auszuwählen, mit Ausnahme von Elementen, die für die Bedingung geeignet sind. 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 des div mit id = '1' liegen. Und wenn wir schreiben:

  $ ('div'); 

Dann werden wir alle divs auswählen, auch diejenigen, die in div c id = '1' sind, daher ist es in diesem Fall notwendig, den Nicht-Filter anzuwenden.

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

Und indem wir das tun, werden wir alles auswählen, was wir brauchen

Auswählen eines Elements, das ein bestimmtes has-Element enthält

Manchmal gibt es Situationen, in denen es notwendig ist, ein Element auszuwählen, das ein anderes spezifisches Element enthält. Und dafür gibt es in JQuery einen HAS Filter. Zum Beispiel müssen wir ein 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 divs aus und wenden Sie dann den has-Filter an, in dem wir angeben, dass die ausgewählten divs andere divs enthalten sollen

Wählen Sie den Gegenstand nach Inhalt

Zum Beispiel müssen wir ein Element nach seinem Inhalt auswählen, dann kommt der contains-Filter zur Rettung. Aus dem obigen Code müssen wir ein Div auswählen, das ein "Example" enthält:

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

Filter für die Auswahl von Elementen ohne Erben leer

Es gibt Situationen, in denen es notwendig ist, nur diejenigen zu verlassen, die keine Erben haben und nichts von den ausgewählten Elementen enthalten. Zum Beispiel haben wir 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'); 

Als Ergebnis haben wir das zweite <td> vom ersten <tr> und das erste <td> vom zweiten <tr>.

Nach versteckten Elementen filtern

In jQuery müssen Sie oft alle versteckten Elemente auswählen. Und dafür ist ein spezieller Filter versteckt. 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 umgekehrte Filter zu hidden ist ein sichtbarer Filter, der alle sichtbaren Elemente filtert. Ie wenn wir alle divs auswählen müssen, die gerade sichtbar sind.

  $ ('div: sichtbar'); 

JQuery-Methoden: Text, Verbergen, Anzeigen, Breite, Höhe, HTML

Nach Auswahl des erforderlichen Elements in jQuery müssen wir Aktionen ausführen. In diesem Artikel konzentrieren wir uns auf die Aktionen, die mit jQuery an Elementen ausgeführt werden können.

Wie Sie wissen, funktioniert JavaScript mit dem DOM-Seitenmodell. Daher müssen JavaScript-Code erst ausgeführt werden, nachdem das DOM-Modell erstellt wurde. JQuery verfügt dafür über eine ready-Methode, die darauf wartet, dass das DOM ein Dokumentmodell erstellt.

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

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

Text () -Methode

Die Methode text () ist erforderlich, um den Text eines Elements zu erhalten 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 ein 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 einen Parameter an unsere 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');
 })

Hide () Methode

Wenn wir ein Element ausblenden müssen, gibt es in jQuery eine Methode zum Verbergen (Geschwindigkeit, Rückruf). An diese Methode können zwei Geschwindigkeitsparameter übergeben werden - die Extinktionsgeschwindigkeit, die Zeit in Millisekunden und der Rückruf sind Funktionen, die nach dem Verschwinden des Elements ausgeführt werden. Zum Beispiel brauchen wir ein div mit id = text (aus dem obigen Beispiel) um in 2 Sekunden zu verschwinden, dann lautet unser Code:

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

Show () -Methode

Die umgekehrte Versteckmethode wird angezeigt, wenn wir ein Element anzeigen müssen. Ähnlich wie die hide-Methode benötigt show zwei Parameter - das ist die Rate, mit der sie angezeigt wird, und die Funktion, die nach dem Erscheinen des Elements ausgeführt wird.

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

Width () -Methode

Um die Breite eines Elements in jQuery festzulegen oder abzurufen, gibt es eine spezielle Methode für die Breite. Wenn wir die Breite eines 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, muss die Methode width einen Parameter übergeben. Wenn Sie keine Maßeinheiten angeben (%, em), ist der Standardwert px.

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

Höhe () Methode

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

Html () Methode

Wenn wir den HTML-Code des Elements erhalten oder ändern wollen, ist es notwendig, die html () -Methode zu 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

FadeOut () Methode

Die Methode fadeOut (time, function) dient zum gleichmäßigen Verschwinden eines Elements (das Element ändert seine Transparenz bis hin zum vollständigen Verschwinden). Als Parameter braucht es:

  • Zeit - Zeit des Aussterbens
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt wird

Zum Beispiel haben wir HTML-Code:

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

Wir möchten, dass das Element div mit id = text glatt verschwindet. Um dies zu tun, schreiben wir den folgenden Code:

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

FadeIn () Methode

Die Methode fadeIn (time, function) dient zum Einblenden eines Elements. Das Element ändert seine Transparenz in volle Sichtbarkeit. Als Parameter braucht es:

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

FadeTo () -Methode

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

  • Zeit - Zeit ändern
  • Opazität - Transparenzgrad von 0 bis 1
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt wird

Beispiel:

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

SlideUp () Methode

Mit der Methode slideUp (Zeit, Funktion) kann ein Element verschwinden, wenn es nach oben geht. Als Parameter braucht es:

  • Zeit - Zeit des Erscheinens
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt wird

Beispiel:

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

SlideDown () -Methode

Mit der Methode slideDown (Zeit, Funktion) können Sie ein Element anzeigen. Element, wie es nach unten geht. Als Parameter braucht es:

  • Zeit - Zeit des Erscheinens
  • Funktion - die Funktion, die nach dem Verschwinden des Elements ausgeführt wird

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 löschen, verschiedene css-Eigenschaften von Elementen anzuzeigen und zu ändern. JQuery hat hierfür spezielle Methoden, die wir berücksichtigen werden.

Attr () Methode

Die attr (key, value) -Methode wird verwendet, um einen Attributwert für ein Element zurückzugeben oder zu ändern, wobei Folgendes gilt:

  • Schlüssel - Attributname
  • Wert - Attributwert (falls angegeben, ändert es, sonst kehrt es nur 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');
 })

RemoveAttr () -Methode

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

  • Schlüsselattributname

Zum Beispiel haben wir ein div mit id = test hat width = 300px und wir wollen dieses Attribut entfernen:

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

AddClass () -Methode

Methode addClass (name) - Fügt dem ausgewählten Element eine Klasse mit dem Namen name hinzu. Fügen Sie beispielsweise einem div-Objekt mit id = test ein Klassenbeispiel hinzu:

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

RemoveClass () -Methode

Die Methode removeClass (name) entfernt eine Klasse aus einem Element mit dem Namen name.

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

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

Css () -Methode

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

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

Animate () -Methode

Bisher haben wir eine einfache Änderung der Eigenschaften von Elementen in Betracht gezogen, aber in jQuery gibt es eine weitere großartige Methode, mit der Sie die Eigenschaften eines Elements problemlos ä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 ist eine Funktion, die ihre Ausführung nach der Änderung startet.

Zum Beispiel haben wir ein div mit id = test und width = 1000px. Wir möchten die Breite dieses Div in 4 Sekunden auf 500px ändern.

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