Spezialthema

War Ukraine Russland

JQuery

Auf Seite

JQuery Beispiel Artikel
JQuery Elementauswahlfilter
JQuery Methoden: Text, verbergen, anzeigen, Breite , Höhe, html
JQuery Methoden: fadeOut, fadeIn, fadeTo, slideUp , slidedown
JQuery Methoden: attr, removeAttr, addClass, removeClass , css, animieren

JQuery Beispiel Artikel

Bevor Sie beginnen mit einem Element arbeiten müssen lernen, zu wählen. Auswahl von Elementen in jQuery auch als Probe in der CSS aufgebaut.

Um, wie die Beispiel Elemente in jQuery zu verstehen, lassen Sie uns in der CSS-Datei zu suchen.

Alles, was an den Streben geht wird der Selektor genannt.

Namensschild
Klasse
der Identifikator

Alles, was in geschweiften Klammern nach dem Selektor geschrieben - eine Eigenschaft Element mit dem angegebenen Selektor.

Was geschieht eigentlich? Wenn der Browser des Benutzers auf unsere CSS-Datei zugreift, wenn es um einen Teil der Wähler kommt, beginnt er die entsprechenden Elementeigenschaften mit dem Wähler auszuführen. Beispielsweise in der CSS-Datei:

 p {
  font-family: Tahoma;
  font-size: 12px;
 }

Nun, wenn der Browser erreicht das Element

Hallo

Dann bewerben Sie sich diese Eigenschaften zu.

Nun wollen wir sehen, wie die Auswahl der untergeordneten Elemente in CSS. Zum Beispiel müssen wir die oben genannten CSS-Eigenschaften sind nicht alle Absätze und den Absätzen mit dem ID-Logo anzuwenden. Dann wird CSS wie folgt aussehen:

 p #logo {
  font-family: Tahoma;
  font-size: 12px;
 }

und wenn wir nicht nur die Eigenschaftsdaten zu den Ziffern mit id = "Logo", und alle Elemente mit id = "Logo" anwenden möchten, dann ist unser CSS ist wie folgt:

 #logo {
  font-family: Tahoma;
  font-size: 12px;
 }

Wir beide daran, wie die Beispiel Elemente in CSS. Wie ich oben sagte, dass die Probenelemente in jQuery wird analog zu CSS durchgeführt. Also, wenn wir wollen, dass alle Absätze zu wählen, dann schreiben Sie den folgenden Code:

  $ ( "P");

Oder wenn wir alle Elemente aus der Seite mit id = "Logo" zu wählen müssen, dann können wir es wie folgt schreiben:

  $ ( "# Logo");

In ähnlicher Weise können wir alle Elemente der Klasse wählen, wie class = "Logo":

  $ ( "Logo.");

Wenn wir wollen, untergeordnete Elemente zum Beispiel zu wählen, alle Absätze

eine Kennung Logo hat, dann müssen wir verschreiben:

  $ ( "P #logo");

Die nächste Art der Probenahme ist die nächste Option auszuwählen. Zum Beispiel haben wir die folgenden HTML-Code:

Test 1

Test 2

Und wir brauchen p-Tag zu wählen, die den Text "Test 2" enthält. Wie Sie sehen können, ist dies nicht so einfach, die Probe unter Verwendung von oben dargestellt. Aber es gibt eine spezielle jQuery-Selektor, der uns die Aufgabe zu vereinfachen, ermöglicht. Dieser Selektor wählen Sie den nächsten Punkt. + dh in unserem Fall können wir zu einem div id anlagern = "Logo" und mit Hilfe der Wähler den nächsten Punkt zu wählen:

  $ ( "# Logo + p");

Manchmal entsteht eine Situation, wo Sie alle untergeordneten Elemente auswählen müssen. Um dies zu tun, hat jQuery einen Selektor>. Zum Beispiel haben wir die folgenden HTML-Code:

 <Div id = "content">
  <P> Hallo </ p>
  <P> Wir starten jQuery </ p> zu lernen
  <P> Und jetzt sind wir auf die Probe Selektorelemente eingeführt </ p>
 </ Div>

Und wir müssen alle p zu wählen, die in der div id eingeschlossen sind = "content" Unser Code wird wie folgt sein:

  $ ( "# Content> p");

Die nächste Art der Probe in jQuery - diese Probe Elemente durch Attributwerte. Diese Probe ist in Projekte wie die Umsetzung der Drop-down-Menü sehr häufig. Zum Beispiel haben wir einen HTML-Code:

 <Img src = "images / 1.png" width = "50" height = "50">
 <Img src = "images / 2.png" width = "50" height = "50">
 <Img src = "images / 3.png" width = "50" height = "50">

und wir brauchen, um alle Bilder auszuwählen, die width = "50" haben. Dann wird die Probe in jQuery wie folgt ist.

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

Der folgende Beispieltyp in jQuery - das Sampling-Attributwerte, die mit einem bestimmten Zustand zu starten. Zum Beispiel haben wir einen HTML-Code:

 <Img src = "images / img1.png" width = "50" height = "50">
 <Img src = "images / img2.png" width = "50" height = "50">
 <Img src = "images / img3.png" width = "50" height = "50">

und wir brauchen, um alle Bilder auszuwählen, deren Attribut src beginnt mit Bildern / img, dann ist diese Probe in jQuery ist wie folgt:

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

Analog dazu können wir eine Auswahl durch Attributwerte machen, die in einem gewissen Zustand zu beenden. dh von der vorherigen HTML-Code wollen wir alle PNG-Bilder auszuwählen. Anschließend wird die Probe in jQuery ist wie folgt:

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

Nächste Picks in jQuery - ist, wenn Sie ein Attribut, dessen Wert kann überall sein auswählen muss. Von der vorherigen html-Code, müssen wir alle Bilder in den Titel zu wählen, die das Wort "img" ist.

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

Wir haben die wichtigsten Methoden der Stichprobenelemente in der jQuery überprüft, die uns ein beliebiges Element auswählen können und dann auf sie eine Aktion ausführen. Weitere Informationen über die Methoden zur Probenahme in jQuery können Sie lesen, auf offizielle Website . Aber die Probe Elemente in jQuery nicht mehr zu haben und subtile Wahl der Elemente in jQuery hat eine Probenahmefilter.

JQuery Elementauswahlfilter

In jquery gibt es viele Methoden, um die ausgewählten Elemente zu filtern, die Sie in der offiziellen Dokumentation lesen kann. Und ich werde diskutieren nur die wichtigsten und am häufigsten verwendeten (meiner Meinung nach) Filter.

Die Wahl der auch Elemente selbst

Es ist eine Situation, wo Sie nur die geraden Elemente der Tabelle auswählen müssen. Um dies zu tun, haben die Entwickler einen speziellen Filter erstellt: selbst. Zum Beispiel haben wir eine Tabelle:

 <Table id = " 'table'">
 <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>
 <Pre>

Und wir brauchen die geraden Linien zu wählen. Um dies zu tun, wählen Sie die notwendigen Elemente und erlegen sie Parität Filter. Hier ist, wie es in jQuery aussieht:

  $ ( '# Tabelle tr: sogar');

So haben wir alle geraden Zeilen ausgewählt. Aber hier vorsichtig sein - alle geraden Linien mit Javascript Perspektive. Und in Javascript-Countdown beginnt bei 0, so dass die erste Zeile in der Tabelle und die dritte Zeile in der Tabelle wird hier ausgewählt werden.

Auswählen ungerade ungerade Elemente

Das Gegenteil (sozusagen) der vorherige Filter ist ein Filter ungerade - ungerade Wahl Elemente. Angenommen, die Tabelle, müssen wir die ungeraden Zeilen auszuwählen. Dann gelten die ungeraden Filter und das ist, wie es aussehen wird:

  $ ( '# Tabelle tr: odd');

Auswählen des ersten Elements zuerst

Wenn wir müssen nur ein Element wählen - die erste, die für diese Zwecke geeigneten Filter zuerst. Zum Beispiel aus der Tabelle, müssen wir nur die erste Zeile auszuwählen, und dann eine Probe dieser Artikel ist wie folgt:

  $ ( '# Tabelle tr: zuerst');

Wählt den letzten Eintrag letzten

So wählen Sie das letzte Element des Filters angewendet zuletzt. Zum Beispiel aus unseren Tabellen müssen Sie die letzte Zeile zu wählen. Dann wird unser Beispiel:

  $ ( '# Tabelle tr: letzte');

nicht Filter zu leugnen

Dieser Filter wird benötigt, um alle Elemente mit Ausnahme der Elemente zu holen, die entsprechenden Zustand. Zum Beispiel haben wir

 </ Pre>
 <Div id = "" 1 ""> </ div>
 <Div> Beispiel. </ Div>
 <Pre>

Wir alle müssen eines div auszuwählen, mit der Ausnahme div-s, die innerhalb eines div-c-ID sind = '1'. Und wenn wir schreiben:

  $ ( 'Div');

Dann alle div wählen, auch diejenigen, die in div id c sind = '1', so in diesem Fall ist es notwendig, nicht um den Filter anzuwenden.

  $ ( 'Div: nicht (# 1 div)');

Und so wählen wir alle für uns notwendig, div

Wählen Sie ein Element, das ein bestimmtes Element enthält, hat

Manchmal gibt es Situationen, die das Element wählen müssen, das ein anderes bestimmtes Element in sich enthält. Und dafür muss es zu jquery Filter. Zum Beispiel sollte man div aus dem vorherigen Beispiel wählen, in dem es div sind. Dann wird unser Beispiel wie folgt aussehen:

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

dh Alle wählen div und dann den Filter anwenden, die, dass die ausgewählte div an sich, um anzuzeigen, sollten andere div enthalten

Auswählen der Inhalt des Elements

Zum Beispiel müssen wir ein Element in seinem Inhalt zu wählen, dann helfen Sie uns, Filter enthält kommt. Aus dem obigen Code, müssen wir die div auszuwählen, die das "Beispiel" enthält:

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

Filter Artikelauswahl ohne Erben leer

Es gibt Situationen, in denen es notwendig ist, die Elemente aus nur diejenigen ausgewählt zu lassen, die keine Nachfolger und nichts enthalten. Zum Beispiel haben wir den HTML-Code

 </ Pre>
 <Table>
 <Tbody>
 <Tr>
 <Td> 1 </ td>
 <Td> </ td>
 </ Tr>
 <Tr>
 <Td> </ td>
 <Td> 2 </ td>
 </ Tr>
 </ Tbody>
 </ Table>
 <Pre>

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

  $ ( 'Td: leer');

Als Ergebnis, werden wir die zweite <td> des ersten <tr> und das erste <td> in der zweiten <tr> wählen.

Filter für versteckte Gegenstände

Oft in jQuery haben alle versteckten Gegenstände zu wählen. Und dafür gibt es einen speziellen Filter ausgeblendet. dh Wenn wir alle div-s auswählen müssen, die derzeit ausgeblendet sind, dann ist es notwendig, den folgenden Code schreiben:

  $ ( 'Div: hidden');

auf die sichtbaren Elemente des Filters

Das Gegenteil im Sinn versteckt Filter - der Filter sichtbar, die die sichtbaren Elemente alle herausfiltert. dh wenn wir brauchen alle div-s zu wählen, die derzeit sichtbar sind.

  $ ( 'Div: sichtbar');

JQuery Methoden: Text, verbergen, anzeigen, Breite , Höhe, html

Nachdem Sie das gewünschte Element in jQuery auswählen, müssen wir eine Aktion darauf machen. In diesem Artikel werden wir uns auf Maßnahmen konzentrieren, die auf den Elementen mit jQuery ausgeführt werden können.

Wie Sie wissen, arbeitet mit JavaScript DOM-Modell Seite. Also müssen wir, dass JavaScript-Code erst nach dem Aufbau des DOM ausgeführt wird. Um dies zu tun, hat jQuery ein fertiges Methode, die für den Bau eines DOM Dokument wartet.

Daher das Skript nach dem Bau des DOM, verwenden Sie die folgende Struktur auszuführen:

 $ (Dokument) .ready (function () {<code script>})

text () Methode

text () Methode ist erforderlich, um das Textelement zu erhalten oder zu ändern. Angenommen, wir die folgenden HTML-Code haben:

 <Div id = 'text'>
 Hallo.
 </ Div>

Und wir wollen, um den Text zu bekommen, dann müssen wir das div-Element mit id = Text auswählen und auf den Text () -Methode anzuwenden.

 $ (Dokument) .ready (function () {
 $ ( '# Text') Text () .;
 })

Um den Textwert des Elements ändern müssen unsere Methode einen Parameter Text zu übergeben. Zum Beispiel wollen wir den Text in dem obigen Beispiel auf der "Welcome to web-programming.com site" zu ändern, dann ist unser Code würde wie folgt aussehen:

 $ (Dokument) .ready (function () {
 $ ( '# Text') Text ( "Willkommen in web-programming.com ') .;
 })

hide () Methode

Wenn wir das Element verstecken müssen, dann gibt es in jQuery ausblenden (Geschwindigkeit, Rückruf) Methode. Dieses Verfahren kann zwei Parameter Geschwindigkeit geführt werden - die Geschwindigkeit des Aussterbens, gibt die Zeit in Millisekunden und Callback - Funktion, die nach dem Verschwinden des Elements ausgeführt wird. Zum Beispiel müssen wir zu einem div id = Text (im Beispiel oben) verschwand für 2 Sekunden, dann wird unser Code sein:

 $ (Dokument) .ready (function () {
 $ ( '# Text') verstecken (2000) .;
 })

Show () Methode

Das gegenüberliegende Methode hide - Die Show, wenn wir den Punkt zeigen müssen. In ähnlicher Weise wie die Methode verbergen, show zwei Parameter - eine Rate von Aussehen und Funktion ausgeführt werden, nachdem das Element angezeigt werden.

 $ (Dokument) .ready (function () {
 $ ( '# Text') zeigen (2000) .;
 })

Breite ()

Um eine spezielle Methode der Breite zu setzen oder die Breite eines Elements in jQuery bekommen. Wenn wir die Breite des div mit id = Text (im obigen Beispiel) erhalten müssen, dann müssen Sie den folgenden Code schreiben:

 $ (Dokument) .ready (function () {
 $ ( '# Text') Breite () .;
 })

Wenn wir die Breite einstellen müssen, ist die Breite notwendig, einen Parameter an die Methode zu übergeben. Sofern nicht anders angegeben Einheiten (%, em), dann werden px Standard.

 $ (Dokument) .ready (function () {
 $ ( '# Text') Breite (30) .;
 })

heigth () -Methode

heigth () -Methode verwendet, um die Änderung oder Elementhöhe in jQuery zu berechnen. Dieses Verfahren funktioniert ähnlich wie die Methode der Breite.

html () Methode

Wenn wir den HTML-Elemente-Code, HTML () Methode verwendet werden muss, zu erhalten oder ändern möchten. Diese Methode funktioniert in Analogie mit dem Verfahren heigth () und Breite (). dh wenn wir unsere Methodenparameter nicht teilen, wird die Methode gibt uns alle HTML-Code, der in diesem Element zu sein. Wenn wir die Parameter übergeben werden, dann ändern wir den HTML-Code in unserem Element.

JQuery Methoden: fadeOut, fadeIn, fadeTo, slideUp , slidedown

fadeOut () -Methode

fadeOut Methode (Zeit, Funktion) zum Ausblenden des Elements verwendet (Element ändert seine Transparenz bis Verschwinden zu vervollständigen). Da die Parameter nimmt:

Zeit - Zeit des Verschwindens
Funktion - eine Funktion, die nach dem Verschwinden des Elements ausgeführt wird,

Zum Beispiel haben wir einen HTML-Code:

 <Div id = 'text'>
  Hallo.
 </ Div>

Wir wollen ein div-Element mit id = Text reibungslos. Um dies zu tun, schreiben wir den folgenden Code:

 $ (Dokument) .ready (function () {
  $ ( '# Text') fadeOut (2000) .;
 })

fadeIn () -Methode

fadeIn Verfahren (Zeit, Funktion) wird verwendet, um das Aussehen des Elements zu glätten. Das Element ändert seine Opazität auf volle Sichtbarkeit. Da die Parameter nimmt:

Zeit - Zeit des Auftretens
Funktion - eine Funktion, die nach dem Verschwinden des Elements ausgeführt wird,

 $ (Dokument) .ready (function () {
  $ ( '# Text') fadeIn (2000) .;
 })

fadeTo () -Methode

fadeTo Methode (Zeit, Undurchsichtigkeit, Funktion) - ermöglicht es Ihnen, die Transparenz eines Elements auf einen bestimmten Wert zu ändern. Da die Parameter nimmt:

Zeit - Zeit izmenneniya
Opazität - Transparenz von 0 bis 1
Funktion - eine Funktion, die nach dem Verschwinden des Elements ausgeführt wird,

Beispiel:

 $ (Dokument) .ready (function () {
  $ ( '# Text') fadeTo (2000, 0,5) .;
 })

slideUp () -Methode

slideUp Methode (Zeit, Funktion) ermöglicht es Ihnen, das Element zu verblassen durch die Spitze zu verlassen. Da die Parameter nimmt:

Zeit - Zeit des Auftretens
Funktion - eine Funktion, die nach dem Verschwinden des Elements ausgeführt wird,

Beispiel:

 $ (Dokument) .ready (function () {
  $ ( '# Text') slideUp (2000) .;
 })

slidedown () -Methode

slidedown-Methode (Zeit, Funktion) können Sie den Eintrag anzuzeigen. Ein Element, wie es bewegt sich nach unten. Da die Parameter nimmt:

Zeit - Zeit des Auftretens
Funktion - eine Funktion, die nach dem Verschwinden des Elements ausgeführt wird,

Beispiel:

 $ (Dokument) .ready (function () {
  $ ( '# Text') slidedown (2000) .;
 })

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

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

In der Praxis recht häufig ist es notwendig, verschiedene Attribute von HTML-Elementen, hinzuzufügen oder zu entfernen Klassen, anzeigen und ändern verschiedenen CSS-Eigenschaft Elemente zu ändern. Um dies zu tun in jQuery gibt es spezielle Techniken, die wir in Betracht ziehen.

attr () -Methode

Methode attr (Schlüssel, Wert) für die Rückkehr verwendet oder einen Attributwert eines Elements ändern, wobei:

Schlüssel - der Name des Attributs
Wert - der Attributwert (falls der Wert angegeben wird, dann ändern, sonst ist es einfach zurückgibt)

Zum Beispiel hat ein div mit id = Test width = 300px, und wir wollen, um die Breite zu wissen

 $ (Dokument) .ready (function () {
  $ ( '# Test') attr ( 'width') .;
 })

removeAttr () -Methode

removeAttr Methode (key) - löscht das angegebene Attribut, wobei:

Tasten- name-Attribut

Zum Beispiel haben wir ein div mit id = Test hat eine width = 300px, und wir wollen das Attribut zu entfernen:

 $ (Dokument) .ready (function () {
  $ ( '# Test') removeAttr ( 'width') .;
 })

addClass () -Methode

addClass Methode (name) - fügt Klasse auf das ausgewählte Element mit dem Namen Namen. Um zum Beispiel ein div mit id = Testklasse Beispiel hinzuzufügen:

 $ (Dokument) .ready (function () {
  $ ( '# Test') addClass ( "Beispiel") .;
 })

removeClass () -Methode

removeClass Methode (name) - entfernt die Klasse des Elements namens Namen.

Zum Beispiel haben wir ein div mit id = Test und wir Hoti unserer Klasse entfernen in DIV-as:

 $ (Dokument) .ready (function () {
  $ ( '# Test') removeClass ( "Beispiel") .;
 })

css () -Methode

Methode css (name, value) - ermöglicht es Ihnen, CSS-Eigenschaft Element mit Vorname Namen bekommen (wenn nicht durch den zweiten Parameter Wert dieser Eigenschaft angegeben) oder den Wert des CSS genannt Name auf den Wert Wert zu ändern (wenn der zweite Parameterwert eingestellt ist) Zum Beispiel haben wir h1 Header und wir wollen die Schriftgröße zu verändern, zu 20px dann:

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

animieren () -Methode

Bis jetzt haben wir eine einfache Änderung in den Eigenschaften der Elemente in jQuery angesehen, aber es ist eine weitere gute Methode, die Sie die Eigenschaften des Elements glatt ändern können, als ob sie zu animieren. Diese belebtes (Einstellungen, Zeit, Funktion) Verfahren, wobei:

Einstellung - Eigenschaften, die seinen Wert ändert
Zeit - Zeit, für die die Daten auf den Wert der Eigenschaften ändern
Funktion - eine Funktion, die ihre Ausführung nach dem Start wird, da es eine Veränderung.

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

 $ (Dokument) .ready (function () {
  $ ( '# Test') belebtes ({ 'width': '500px'}, 4000).
 })

Wie es? Abonnieren Sie RSS Nachrichten!
Sie können auch shram.kiev.ua unterstützen, klicken Sie auf:

Seien Sie nicht zu Ihren Freunden und finden Sie diese Informationen, teilen mit ihnen den Artikel nicht in Ordnung!

Erweitern / Reduzieren

Kommentare

Kommentar nicht vergessen , dass der Inhalt und der Ton Ihrer Nachrichten , die Gefühle von echten Menschen verletzen können, Respekt und Toleranz gegenüber seinen Gesprächspartnern, auch wenn Sie Ihr Verhalten in Bezug auf die Meinungsfreiheit ihre Meinung nicht teilen, und die Anonymität des Internets, ändert sich nicht nur virtuell, sondern realen Welt. Alle Kommentare werden aus dem Index, Spam - Kontrolle versteckt.

Kostenlose Kreditkarte mit einem Limit von 15.000 US-Dollar.