JQuery: Easy JavaScript für Designer

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!