Key Takeaways

• jQuery ist eine JavaScript-Bibliothek, die den Prozess der Verwendung von JavaScript für das Webdesign vereinfacht und eine Reihe vorgefertigter Funktionen und Tools zur Verbesserung der Funktionalit?t und des Benutzererlebnisses bietet.
• jQuery erm?glicht es Designer, HTML -Elemente zu manipulieren, Ereignisse zu behandeln, Animationen zu erstellen und Ajax -Anrufe unter anderem auf Aufgaben zu t?tigen, auf eine optimiertere und effizientere Weise als Raw JavaScript.
• Eine der wichtigsten Merkmale von JQuery ist die F?higkeit, die Funktionen zu ?ketten“, sodass mehrere Aktionen in einer einzelnen Codezeile ausgeführt werden k?nnen. Dies macht es zu einem leistungsstarken Werkzeug zur Vereinfachung komplexer JavaScript -Aufgaben.
Die Ladeereignisfunktion von
• jQuery erm?glicht die Erfüllung der Aufgaben w?hrend des Ladens der Seite, sobald sie über alle Teile verfügt, die sie ben?tigt. Dies ist eine Verbesserung der traditionellen Onload -Methoden.
• Trotz seiner F?higkeiten für High-End-Tricks ist die gr??te Attraktion von JQuery seine F?higkeit, kleine Probleme schnell und mit minimaler Aufregung zu l?sen, was es zu einem wertvollen Tool für Webdesigner macht.

Wenn die Wiedergeburt von JavaScript das gr??te Thema der letzten zwei Jahre war, k?nnten Sie wahrscheinlich den gr??ten Teil des Vortrags um dieses Thema unterteilen.

Am Geekier -Ende der Stadt haben wir Smarties gesehen, die JavaScript nutzten, um alle m?glichen erstaunlichen - und gelegentlich l?cherlichen - Dinge mit Ajax zu machen.

Für Front-End-Leute wie ich wurde jedoch ein Gro?teil des Skript-Fizzes und der Blase darauf konzentriert, Ihr Markup neu aufzunehmen-das hei?t, JavaScript zu verwenden, um Ihr Markup besser funktionieren zu lassen, nachdem es in den Browser gelangt ist. Langj?hrige Leser des Design-Newsletters werden sich wahrscheinlich an einige meiner eigenen Experimente in den letzten Jahren erinnern:

• In Styling -Bildern mit dem DOM haben wir JavaScript verwendet, um Bildern abgerundete Ecken hinzuzufügen.
• In DOM -Text -Schatten haben wir JavaScript verwendet, um einen Schatten auf dem Kopftext zu erstellen.
• In horizontaler Regel! Ok! Wir haben JavaScript verwendet, um das zwielichtige HR -Element zu beheben.

Obwohl jede dieser Skripte einen ganz anderen Zweck hat, sendet sie alle ein ordentliches, semantisches Markup an Browser und verwenden JavaScript, um die F?higkeiten der Browser zu beheben oder zu erweitern, die klug genug sind, um sie zu verstehen. In den meisten F?llen besteht darin, einen Teil Ihres Aufschlags in einem weiteren Markup zu ?einwickeln“. Heute werden wir uns eine einfache Allzweckmethode ansehen, mit der wir dies jederzeit und überall tun k?nnen: jQuery.

Also, was ist jQuery?

jQuery ist eine weitere JavaScript -Bibliothek, die sich dem bereits überfüllten Raum anschlie?t, der Prototyp, scriptaculous, rico, moo.fx und mehr als ein Dutzend andere umfasst. Um sie zu verwenden, fügen Sie einfach die .js-Datei im Kopf Ihrer Seite an: Sie haben auf magische Weise Zugriff auf viele vorgefertigte Funktionen und Gizmos.

F: Warum m?chten Sie m?glicherweise eine andere arkane JavaScript -Bibliothek mit
umgehen? A: Die Schlüsselattraktion von JQuery ist das, was es Ihnen innerhalb der ersten 10 Minuten nach dem Gebrauch bietet.

Vor einiger Zeit haben wir einige Zeit damit verbracht, die Art und Weise zu verbessern, wie der Marktplatz von SitePoint arbeitet. Auf der Suche nach einer eleganten M?glichkeit, um Verk?ufern gro?e Screenshots, Statistiken, Diagramme und andere Bilder anzuzeigen, ohne die Hauptauktionsseite zu verlassen, stie? ich auf Cody Lindley's Thickbox, das von der Jquery JavaScript -Bibliothek von John Ressig angetrieben wird. Das Bild unten zeigt die Dicke in Aktion.

Nach nur fünf Minuten Spielzeit mit Thickbox sehen Sie das Potenzial. Auf dem Marktplatz konnte ich sowohl verknüpfte Bilder als auch vollst?ndige HTML -Dokumente zum Dickenbox -Fenster durchziehen und gleichzeitig die Startseite dimmen (, aber nicht verlieren). Benutzer mit Browsern, in denen JavaScript deaktiviert oder nicht verfügbar ist, werden einfach direkt in das Element (dh das Bild oder die Seite) gebracht. Es ist eine sehr clevere, verwendbare und zug?ngliche L?sung für das Problem "Vergr??ern Sie dieses Miniaturansatz".

Da wir uns jedoch bereits entschlossen hatten, die Jquery -Bibliothek in die Seite aufzunehmen (es ist winzig - ungef?hr 10 KB), dachte ich, es w?re eine gute Idee, herauszufinden, was es sonst noch für uns tun k?nnte.

Eine Stunde sp?ter war ich ein JQuery -Konvertit.

Die wahre Sch?nheit von JQuery ist seine Einfachheit. Einzelne Zeilen von JQuery -Code k?nnen ein Dutzend Zeilen normaler JavaScript ersetzen, bleibt jedoch sehr elementar und flexibel. Lassen Sie mich diesen Punkt mit einem Beispiel veranschaulichen. In meinem ?Horizontal Rules Fixer“ von vor zwei Jahren haben wir das folgende Skript verwendet:

function fancyRules() { ?<br>
 ?if (!document.getElementsByTagName) return; ?<br>
 ? ?var hr = document.getElementsByTagName("hr"); <br>
 ?for (var i=0; i<hr.length; i++) { ?<br>
 ? ?var newhr = hr[i]; ?<br>
 ? ?var wrapdiv = document.createElement('div'); <br>
 ? ?wrapdiv.className = 'line'; ? <br>
 ? ?newhr.parentNode.replaceChild(wrapdiv, newhr); ? <br>
 ? ?wrapdiv.appendChild(newhr); ? <br>
 ?} ?<br>
} ?<br>
 <br>
window.onload = fancyRules;

Als kurzer Zusammenfassung dieses Code wartet der Browser darauf, dass die Seite das Laden beendet, bevor das DOM durchragt, um jedes Ereignis von HR zu lokalisieren. Jedes Mal, wenn es eines findet, erstellt es eine neue DIV, gibt ihm den Klassennamen ?Zeile“, fügt sie ein, wo die Personalabteilung war, und platziert die alte Personalabteilung innerhalb der neuen DIV, um das für die Implementierung dieses bestimmte Effekts erforderliche Aufschl?ge zu erreichen. Abgesehen von der semantischen Pedanterie war das Endergebnis dieses Drehbuchs, dass wir das gewünschte Ergebnis erzielen konnten, ohne Hunderte von Seiten ?ndern zu müssen.

damals dachte ich, es sei kein schlechtes Ergebnis für 12 Codezeilen. Schauen wir uns jedoch an, wie wir mit JQuery das gleiche Ergebnis erzielen.

$(document).ready(function(){ <br>
 ?$("hr").wrap("<div class='line'></div>"); <br>
});

Ich mache dich nicht.

, um es aufzubrechen (nicht, dass es viel zu brechen gibt):

$(document).ready(function(){ <br>
 ?... <br>
});

Die erste und dritte Zeilen sind das Ladungsereignis von JQuery und ersetzen das alte Fenster. Jede Aufgabe, die wir w?hrend des Ladens der Seite ausführen m?chten, kann in diese lockigen Klammern fallen gelassen werden.

Dies ist eine gro?e Verbesserung der alten Onload -Methode, denn anstatt zu warten, bis alles das Laden beendet hat, beobachtet die Funktion von JQuery alles, was hereinkommt, und sobald es zu arbeiten, sobald es alle Teile hat, die es ben?tigt. Es ist wirklich sehr ordentlich.

Bemerkenswerterweise ist die zweite Zeile noch einfacher:

function fancyRules() { ?<br>
 ?if (!document.getElementsByTagName) return; ?<br>
 ? ?var hr = document.getElementsByTagName("hr"); <br>
 ?for (var i=0; i<hr.length; i++) { ?<br>
 ? ?var newhr = hr[i]; ?<br>
 ? ?var wrapdiv = document.createElement('div'); <br>
 ? ?wrapdiv.className = 'line'; ? <br>
 ? ?newhr.parentNode.replaceChild(wrapdiv, newhr); ? <br>
 ? ?wrapdiv.appendChild(newhr); ? <br>
 ?} ?<br>
} ?<br>
 <br>
window.onload = fancyRules;

Das "Dollar -Objekt" - $ ("HR") - ist alles, was wir JQuery sagen müssen, dass er jede horizontale Regel auf dieser Seite greifen soll, und Wrap ist das, was wir diesen HR -Elementen tun werden.

Die integrierte Wrap-Funktion von

jQuery nimmt das, was wir ihnen geben (in diesem Fall "

") und umschlie?e sie auf jeder Personalabteilung auf unserer Seite-keine Schleifen oder Tests erforderlich.

Wir haben hier ein DIV verwendet, aber wir k?nnten genauso leicht ein B, eine Span oder ein Element modifiziert oder einwickelt.

Und obwohl wir hier eine sehr einfache Auswahlregel (alle HRs) verwendet haben, h?tten wir mit dem, was wir angegriffen haben, leicht genauer sein k?nnen. Mithilfe einer vertrauten alten CSS -Syntax h?tten wir eines der folgenden verwenden k?nnen:

• $ ("hr. separat") - Holen Sie sich die HR -Elemente mit dem Klassennamen "separat".
• $ ("li: nur child")-Holen Sie sich Listenelemente, die für sich selbst sind.
• $ ("ul> li") - Holen Sie sich nur Listenelemente mit nicht ordnungsgem??en übergeordneten Listen.

W?hrend ich pers?nlich festgestellt habe, dass Wrap von den sofort nützlichsten JQuery -Funktionen ist, ist es nur eine von vielen, darunter Hide, Show, Fadeout ("Slow") und Slideup ("Fast"), um nur einige zu nennen. Sie k?nnen wahrscheinlich erraten, was jede dieser Funktionen tut. Das Tutorial des Jquery Starters auf der Jquery -Website ist ein ziemlich sanfter Anf?nger und führt Sie durch einige der h?ufigsten Funktionen.

Aber vielleicht ist Jquerys einzelnes, ordentlichste Funktion, die F?higkeit, zusammen zu ?ketten“. Mit anderen Worten, wenn ich aus irgendeinem verrückten Grund einen zweiten Div zu unseren HR -Elementen hinzufügen wollte, k?nnte ich einfach einen weiteren Aufruf zur Wrap -Funktion zum Ende meines Codes hinzufügen

$(document).ready(function(){ <br>
 ?$("hr").wrap("<div class='line'></div>"); <br>
});

Es ist so einfach, es ist verrückt. Verrückt wie ein Fuchs!

Der Verkauf Ihres Website -Abschnitts auf dem Marktplatz gibt Ihnen ein weiteres Beispiel dafür, wo sich dies handelt, wie unten gezeigt.

Als wir diese Seite entwickelten, wollte ich ein kleines Symbol in die untere Ecke jedes Miniaturbilds hinzufügen. Dies musste, dass jedes IMG -Element in ein Container -Div eingewickelt wurde, und ein weiteres Div, das das Symbol im Container -Div.

zeigt

Auch hier ist der JQuery -Code nur eine Zeile (ich habe ihn hier geteilt, weil wir nur eine begrenzte Spaltenbreite haben, mit der wir arbeiten k?nnen).

$(document).ready(function(){ <br>
 ?... <br>
});

Auf einfachem Englisch fordert dieser Code JQuery einfach auf:

• Finden Sie alle Bilder in Li -Elementen, die sich in #Thumbnails befinden.
• Wickeln Sie diese Bilder in ein DIV namens "Wrap".
• drücken Sie ein weiteres Div (die mit der Symbolgrafik) in meinem "Wrap" Div kurz vor meinem Bild.

Jetzt, da wir die Struktur haben, macht CSS den Rest.

Wenn JavaScript ausgeschaltet ist, verknüpfen die Miniaturansichten direkt mit den Rohbilddateien, und die Symbole sind nicht erforderlich. Das nenne ich einen eleganten Abbau.

Wie die meisten anderen JavaScript-Bibliotheken kann JQuery einige sehr High-End-Tricks (wir haben seine AJAX-Funktionen in einem früheren Artikel behandelt) in der Lage, die gr??te Anziehungskraft für mich war jedoch die F?higkeit, die kleinen Probleme schnell und mit einem Minimum an Aufhebens zu l?sen.

Wie Sie wahrscheinlich sagen k?nnen, bin ich schon ein gro?er Jquery -Fan. Ich hoffe, Sie werden es auch nützlich finden.

Und wenn Sie Ihre JavaScript -Horizonte erweitern, vergessen Sie natürlich nicht, auf die neueste Version von Joe Hewitts Firebug -Erweiterung zu aktualisieren, die jetzt der unbestrittene K?nig von Javascript -Debuggers ist.

Dieser Artikel wurde ursprünglich in der Designansicht #23 ver?ffentlicht.

H?ufig gestellte Fragen zu JQuery und JavaScript für Designer

Was ist der Unterschied zwischen JQuery und JavaScript? JQuery hingegen ist eine schnelle, kleine und featurereiche JavaScript-Bibliothek. Es macht Dinge wie das HTML-Dokument durchquert und Manipulation, Ereignishandhabung und Animation viel einfacher mit einer benutzerfreundlichen API, die in einer Vielzahl von Browsern funktioniert. Im Wesentlichen ist JQuery eine Reihe von JavaScript -Bibliotheken, mit denen das HTML -Dokument durchqueren, Ereignisbehandlungen und Animieren vereinfacht werden sollen. Sie k?nnen es von der offiziellen JQuery -Website herunterladen oder direkt aus einem Content Delivery Network (CDN) einbeziehen. Sobald die Bibliothek in Ihr Projekt enthalten ist, k?nnen Sie JQuery -Funktionen mithilfe des $ -Szeichens, gefolgt von einem Selektor (zur Auswahl von HTML -Elementen) und einer JQuery -Aktion (um die ausgew?hlten Elemente ausgew?hlt) zu verwenden. (Wie Klicks oder Mausbewegungen), Animationen erstellen und Ajax -Anrufe zum Abrufen oder Senden von Daten an einen Server t?tigen. Es wird auch verwendet, um interaktive Funktionen wie Image -Sliders, Formularvalidierungen und dynamisches Inhaltsladen zu erstellen.

Wie vereinfacht JQuery die Arbeit mit JavaScript? Es behandelt auch viele Probleme mit dem Cross-Browser-Kompatibilit?t, die beim Schreiben von RAW-JavaScript auftreten k?nnen, wodurch Ihr Code einfacher zu schreiben und zu warten ist.

Kann ich JQuery mit anderen JavaScript-Bibliotheken verwenden? Es bietet eine Funktion namens Noconflict -Modus, mit der Sie JQuery mit anderen Bibliotheken verwenden k?nnen, die auch das $ -Symbol verwenden. Die offizielle JQuery -Website bietet umfassende Unterlagen und Tutorials. Andere Online -Plattformen wie Codecademy, Udemy und Khan Academy bieten auch Kurse zu JQuery an.

Wie kann ich JQuery -Code debuggen? Sie k?nnen die Entwickler -Tools des Browsers verwenden, um Elemente zu inspizieren, Konsolenprotokolle anzusehen und Ihren Code durchzusetzen. Darüber hinaus bietet JQuery einige Methoden wie .Eror (), .fail () und .done (), um Fehler und Ausnahmen zu bew?ltigen. Die jQuery -CDN für schnellere Ladezeiten.

Wie kann ich meinen jQuery -Code für eine bessere Leistung optimieren? Dazu geh?ren: Minimierung der DOM -Manipulation, die Verwendung von ID -Selektoren anstelle von Klassenw?hlern, Caching JQuery -Objekten und Verwendung der .on () -Methode zur Ereignisbindung. Es bietet ein einheitliches HTML5-basierter Benutzeroberfl?chen-System für alle beliebten mobilen Ger?teplattformen.

Das obige ist der detaillierte Inhalt vonJQuery: Easy JavaScript für Designer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!