Vereinfachen Sie die Ajax-Entwicklung mit jQuery – Einführung in die Ajax-Entwicklung[2]

4. Verschieben Sie Ihren HTML-Code.

Mit jQuery können Sie einige grundlegende Animationen und Effekte erstellen. Der Kern des Animationseffekts ist die Funktion animate(), mit der Sie jederzeit den angegebenen CSS-Stil ändern können. Sie können beispielsweise die Höhe, Breite, Transparenz oder Position ändern Sie können beim Ändern der Geschwindigkeit Millisekunden verwenden, oder Sie können vorgegebene Geschwindigkeitswerte verwenden: langsam, normal oder schnell.

Hier ist eine Beispielanimation, die die Breite und Höhe eines Elements gleichzeitig ändert ist kein Anfangswert, sondern nur der Endwert. Der Anfangswert kann direkt vom vorhandenen Element übernommen werden. Gleichzeitig habe ich auch eine Callback-Funktion hinzugefügt:

$('#grow').animate({ height: 500 , width: 500 }, "slow", function() {alert('Das Element wächst nicht mehr!');}); Mit diesen integrierten Funktionen von jQuery ist es ganz einfach, Animationseffekte zu erstellen Die Funktionen show() und hide() zum Ein- und Ausblenden von Elementen können so eingestellt werden, dass sie sofort oder mit einer bestimmten Geschwindigkeit ausgeführt werden. Sie können auch die Funktionen fadeIn() und fadeOut() oder die Funktionen slideDown() und slideUp() verwenden um ein Element anzuzeigen oder auszublenden, je nachdem, welchen Effekt Sie wünschen. Das Folgende ist ein einfaches Beispiel, um den Slide-Down-Effekt der Navigationsleiste zu zeigen:

$('#nav').slideDown('slow'); Die Skripterstellung und die Ereignisverarbeitung sind in jQuery wahrscheinlich am besten geeignet, um DOM zu manipulieren und Ereignisse zu verarbeiten. Das Binden, Entfernen und Aufrufen von Ereignissen ist ebenfalls sehr natürlich und einfach zu handhaben Durch das Schreiben dieser Codes können Fehler erheblich reduziert werden. Mit jQuery können Sie verschiedene Vorgänge im DOM erstellen und mit anderen Elementen verknüpfen. Sie können das Element auch mit clone() kopieren Legen Sie den Inhalt mit html() fest, Sie können den Inhalt mit der Funktion empty() löschen und mit der Funktion delete() können Sie Elemente und Inhalte löschen, und Sie können sogar die Funktion wrap() verwenden, um dieses Element mit einem anderen Element zu umschließen Funktionen, die den Inhalt des jQuery-Objekts selbst ändern können, indem sie das DOM durchlaufen. Sie können auch next() und prev() eines Elements abrufen find siblings. find() ist möglicherweise die leistungsstärkste dieser Funktionen. Sie ermöglicht die Verwendung eines jQuery-Selektors zum Durchsuchen Ihres jQuery-Objekts und seiner Nachkommen. Diese Funktionen werden noch leistungsfähiger, wenn sie mit der Funktion end() kombiniert werden Die Funktion „end()“ verhält sich wie ein Rückgängigmachen und führt dazu, dass Ihr jQuery-Objekt auf den Zeitpunkt zurückfällt, zu dem Sie „find()“ oder „parents()“ aufgerufen haben, oder auf einen anderen Zustand vor der Traversal-Funktion. Wenn Sie die oben erwähnte Methode „Link“ verwenden, sind dies sehr komplexe Funktionen kann mit einfachem Code implementiert werden. Sie finden ein Anmeldeformular und führen einige Operationen an den Elementen darin aus. Listing 7. Das DOM mit Leichtigkeit durchqueren und manipulieren die Beschriftungen innerhalb des Formulars mit der 'optionalen' Klasse.find( 'label.optional').hide().end()// fügen Sie allen Passwortfeldern im Formular einen roten Rahmen hinzu.find('input:password') .css('border', '1px solid red'). end()// Füge einen Submit-Handler zum Formular hinzu.submit(function(){return activate('Sind Sie sicher, dass Sie senden möchten?');}) ; Ob Sie es glauben oder nicht, dieses Beispiel enthält tatsächlich nur einen einzigen Link. Eine Codezeile mit einigen Leerzeichen in der Mitte. Dann habe ich die optionalen Beschriftungen darin gefunden, sie ausgeblendet und dann aufgerufen. ), um zum Formular zurückzukehren, habe ich den Rand in Rot geändert und dann erneut aufgerufen, um zum Formular zurückzukehren. Was ist besonders wichtig? Interessant ist, dass jQuery neben dem äußerst prägnanten Code auch alle Vorgänge selbst optimiert hat, um sicherzustellen, dass Sie, wenn alles gut verbunden ist, nicht zweimal nach einem Element suchen müssen. Auch die Handhabung allgemeiner Ereignisse ist sehr einfach Rufen Sie die Funktion click(), Submit() oder Mouseover() auf und übergeben Sie sie dann an einen Ereignis-Listener. Die Funktionen sind dieselben. Darüber hinaus können Sie auch bind('eventname', function(){}) verwenden Geben Sie die Ereignisverarbeitungsfunktion an. Sie können unbind('eventname') verwenden, um die Bindung eines Ereignisses aufzuheben, oder unbind(), um die Bindung aller Ereignisse aufzuheben. Weitere Informationen zu dieser Reihe von Funktionen und deren Verwendung finden Sie in der Anwendungsprogrammierung von jQuery Schnittstellendokumentation (API). 6. Die Leistungsfähigkeit von jQuery-Selektoren enthüllen

Normalerweise verwenden Sie ID, um Elemente wie #myid; auszuwählen, oder verwenden Sie Klassennamen, um sie auszuwählen, wie z. B. div.myclass

Selektorsyntax

von jQuery basiert weitgehend auf CSS3 und XPath, um so mehr über jQuery-Selektoren zu erfahren , einschließlich CSS3 und XPath, siehe die Ressourcenlinks am Ende dieses Artikels.

CSS3 enthält einige Syntax, die von allen unterstützt wird, sodass Sie sie möglicherweise nicht sehr oft sehen, Sie können sie jedoch weiterhin zum Auswählen von Elementen in jQuery verwenden. Da jQuery über eine eigene benutzerdefinierte Selektor-Parsing-Engine verfügt, können Sie beispielsweise den Pseudooperator :empty verwenden, um jeder leeren Spalte in der Tabelle einen Bindestrich hinzuzufügen:

$('td:empty').html('- '); Wie finde ich jedes Element, das keinen bestimmten Klassennamen enthält? CSS3 verfügt über eine spezielle Syntax für diese Situation, indem der :not-Pseudooperator verwendet wird. Der folgende Code blendet alle Texteingabefeldelemente aus, die nicht den erforderlichen enthalten Klassenname. $('input:not(.required)').hide( ); Sie können auch Kommas verwenden, um mehrere Selektoren miteinander zu verbinden, genau wie in CSS. Der folgende Code blendet verschiedene Arten von Listenelementen auf der Seite aus Gleichzeitig ist $('ul, ol, dl' ).hide();XPath ein leistungsstarkes Tool zum Suchen von Elementen in einem Dokument. Es unterscheidet sich etwas von CSS und ermöglicht es Ihnen, viele Dinge zu finden, die mit CSS nicht gefunden werden können Wenn Sie beispielsweise einen Rahmen hinzufügen möchten, können Sie Folgendes tun: $("input:checkbox/..").css('border', '1px solid #777'); werden beispielsweise nicht in CSS und XPath gefunden. Um die Lesbarkeit einer Tabelle zu verbessern, möchten Sie möglicherweise ungerade und gerade Zeilen so festlegen, dass sie unterschiedliche Klassennamen verwenden. Dies wird mit jQuery als Kinderspiel bezeichnet. Dank des Selektors :odd. Hier ist der Code, der die Verwendung der Stripe-Klasse zum Ändern der Hintergrundfarbe ungerader Zeilen in einer Tabelle demonstriert: $('table.striped > tr:odd').css('background', ' #999999'); Sehen Sie, die leistungsstarken Selektoren von jQuery können Ihren Code vereinfachen, egal wie klar oder verschwommen er ist, Sie können ihn immer mit einem einfachen jQuery-Selektor ansprechen. Erweitern von jQuery mithilfe von Plug-Ins Im Gegensatz zu anderer Software ist das Schreiben eines jQuery-Plug-Ins mit einer Reihe komplizierter APIs keineswegs eine schmerzhafte Tortur. Tatsächlich ist das Schreiben eines Plug-Ins für jQuery so einfach, dass Sie es vielleicht möchten Schreiben Sie später ein Plug-in, um Ihren Code prägnanter zu gestalten. Hier ist der grundlegendste Teil des Plug-ins, den Sie schreiben werden: $.fn.donothing = function(){return this;}; , es bedarf einer kleinen Erklärung. Erstens müssen Sie jedem jQuery-Objekt eine Funktion hinzufügen. Zweitens muss die Funktion dieses (jQuery-Objekt) zurückgeben, um sicherzustellen, dass die Methodenverkettung nicht unterbrochen wird Sie können den oben genannten Code problemlos erweitern, um die Hintergrundfarbe des Plug-Ins zu ändern, anstatt CSS('background') zu verwenden: $.fn.background = function(bg) {return this.css('background', bg);}; Beachten Sie, dass ich die Funktion css() direkt zurückgeben kann, da es sich selbst bereits um ein jQuey-Objekt handelt. Daher empfehle ich die Verwendung eines jQuery-Plugins Stellen Sie fest, dass Sie den Code ständig wiederholen. Wenn Sie beispielsweise die Funktion every( ) verwenden, um immer wieder dasselbe zu verarbeiten, sollten Sie die Verwendung eines Plug-Ins in Betracht ziehen. [Anmerkung: Nicht sehr klar.] sind sehr einfach zu entwickeln, es stehen Ihnen Tausende von Plug-Ins für Tabellen, abgerundete Ecken, Diashows, Datumsauswahl und nahezu jede erdenkliche Anwendung zur Verfügung Eine vollständige Liste der Plug-Ins finden Sie in der Ressourcenliste am Ende dieses Artikels. Das komplexeste und am weitesten verbreitete Plug-In ist Interface, ein Animations-Plug-In, das Sortier-, Zieh- und verschiedene komplexe Spezialeffekte verarbeitet Interessante und komplexe Benutzeroberflächeneffekte sind für jQuery das, was Scriptaculous für Prototype ist. Ein ebenso beliebtes und nützliches Plug-in ist das einfache Senden eines Formulars im Hintergrund mithilfe von Ajax Diese Situation: Wenn Sie das Formularübermittlungsereignis kapern müssen, suchen Sie alle verschiedenen Textausgabefelder und verwenden Sie sie zum Erstellen des Ajax-Aufrufs. 8. Danach habe ich nur über einige oberflächliche Dinge über jQuery gesprochen interessant zu verwenden, da die neuen Funktionen und Methoden, die Sie lernen, sehr natürlich und logisch erscheinen. Wenn Sie jQuery verwenden, werden Sie feststellen, dass es Ihre Arbeit mit Javascript und Ajax vereinfachen kann. Jedes Mal, wenn Sie etwas lernen, wird der Code einfacher

ich

jQuery gelernt habe, hat mir die Javascript-Programmierung viel Spaß gemacht und ich muss mich nur auf den Kernteil konzentrieren. Nach der Verwendung von jQuery kann ich mich kaum daran erinnern, wann ich das letzte Mal ein for verwendet habe Ich habe sogar Angst davor, andere Javascript-Bibliotheken zu verwenden.