Beschreibung des Jquery-Tags

jQuery ist eine Javascript-Bibliothek. Denken Sie auch daran, ein Javascript-Tag hinzuzufügen. jQuery ist eine weit verbreitete Cross-Browser-JavaScript-Bibliothek, die den Durchgang von Document Object Model (DOM), Ereignisbehandlung, Animation und AJAX-Interaktionen erleichtert und die Unterschiede zwischen Browsern minimiert. Eine Frage mit einem Jquery-Tag muss mit Jquery verknüpft sein. Daher muss Jquery im betreffenden Code verwendet werden, und die Frage muss mindestens Elemente enthalten, die sich auf die Verwendung von Jquery beziehen.

Über

jQuery (Core) ist eine browserübergreifende JavaScript-Bibliothek (erstellt von John Resig ), die Abstraktionen für allgemeine Client-Tasks bereitstellt, z.

Mit jQuery können Sie HTML-Dokumente, Ereignisbehandlung, Animation und AJAX dank ihrer API, die in mehreren Browsern verwendet werden kann, einfach crawlen und verarbeiten.

jQuery bietet eine Plattform zum Erstellen von Plugins, die die Funktionen zusätzlich zu den bereits in der Bibliothek bereitgestellten Funktionen erweitern. Die Entwicklung von jQuery und verwandten Projekten wird von der JQuery Foundation koordiniert.

Besonderheiten

jQuery beinhaltet die folgenden Funktionen:

  • Auswählen von DOM-Elementen mithilfe des Sizzle-Multi-Server-Open-Source-Auswahlmechanismus und Markieren des jQuery-Projekts
  • DOM umgehen und ändern (einschließlich Unterstützung für CSS 1-3)
  • DOM-Bearbeitung basierend auf CSS-Selektoren, die Knotennamen und -attribute (z. B. ID und class ) als Kriterien zum Erstellen von Selektoren verwenden
  • Ereignisse
  • Effekte und Animationen
  • AJAX
  • JSON-Analyse (für ältere Browser)
  • Erweiterbarkeit durch Plugins
  • Dienstprogramme wie Benutzeragenteninformationen, Featureerkennung
  • Kompatibilitätsmethoden, die anfänglich in modernen Browsern verfügbar sind, für ältere jedoch eine Sicherung inArray() benötigen, beispielsweise die Funktionen inArray() und each()
  • Multi-Browser (nicht mit Cross-Browser zu verwechseln)

Browser-Unterstützung

jQuery unterstützt die aktuelle stabile Version und die Vorgängerversion oder "aktuelle Version 1" von Chrome, Edge, Firefox und Safari. Es unterstützt auch die aktuelle stabile Version von Opera.

Darüber hinaus unterstützt jQuery 1.x Internet Explorer Version 6 oder höher. Die Unterstützung für IE 6-8 wurde jedoch für jQuery 2.x und jQuery 3.x deaktiviert, die nur IE 9 oder höher unterstützen.

Schließlich unterstützt jQuery den mobilen Browser unter Android 4.0 und höher und Safari unter iOS 7 und höher.

JQuery-Versionen

jQuery wird regelmäßig aktualisiert, daher sollte die Bibliothek sorgfältig verwendet werden. Einige Funktionen werden mit neueren Versionen von jQuery überflüssig. Achten Sie auf Versionshinweise , um Features zu verfolgen.

Das jQuery-CDN bietet Download-Links für alle Versionen von jQuery , einschließlich der neuesten stabilen Versionen jedes Zweigs .

Wenn Sie Fragen zu jQuery stellen, sollten Sie:

  1. Lesen Sie die jQuery-API-Dokumentation sorgfältig durch und probieren Sie Stack Overflow für Duplikate aus.
  2. Isolieren Sie den Problemcode und reproduzieren Sie ihn in einer Online-Umgebung wie JSFiddle , JSBin oder CodePen . Sie können LiveWeave auch für Live Connect verwenden. Stellen Sie jedoch sicher, dass Sie den Problemcode in Ihre Frage aufnehmen - nicht nur einen Link zur Online-Umgebung. Sie können auch Stapelfragmente verwenden , um ausführbaren Code in die Frage selbst aufzunehmen.
  3. Markieren Sie die Frage entsprechend. immer und verwenden Sie andere Web-Development-Tags ( , , ). Die beliebtesten jQuery-Plugins verfügen auch über eigene Tags wie , und . Für jedes andere Plugin gibt es ein Tag.
  4. Geben Sie die Version der verwendeten jQuery-Bibliothek an, damit für die Antworten geeignete Lösungen für die Version verfügbar sind.
  5. Erwähnen Sie, in welchem ​​Browser der Code erscheint und welche Fehlernachrichten (falls vorhanden) vom Browser ausgegeben wurden. Wenn die Probleme in Cross-Browser konsistent sind, sind dies auch wertvolle Informationen.

Häufig gestellte Fragen

Hallo Welt

Es zeigt "Hallo Welt!". Klicken Sie im Warnfenster für jeden Link auf, nachdem das DOM ( JSFiddle ) fertig ist :

 // callback for document load $(function () { // select anchors and set click handler $("a").click(function (event) { // prevent link default action (redirecting to another page) event.preventDefault(); // show the message alert("Hello world!"); }); }); 

Ressourcen

Video-Tutorial

Beliebte Plugins

Andere JQuery Foundation-Projekte

Best Practices und oft Fehler gemacht

Zugehöriges Problem: Zu vermeidende jQuery-Traps

Vergessen Sie nicht, einen fertigen Handler zu verwenden.

Wenn Ihr Code den DOM irgendwie verwaltet, müssen Sie sicherstellen, dass er ausgeführt wird, nachdem der DOM-Download abgeschlossen ist.

jQuery bietet Möglichkeiten mit einer anonymen Funktion:

 $(function () {  }); // Or $(document).ready(function () {  }); 

oder mit einer benannten Funktion:

 $(functionName); // Or $(document).ready(functionName); 

Dies sind Alternativen zum Platzieren eines JavaScript-Codes oder -Skript-Tags in HTML direkt vor dem schließenden </body> .

In jQuery 3.x wird $(function() {}) empfohlen, um einen fertigen Handler hinzuzufügen. Andere Formulare wie $(document).ready(function() {}) werden jedoch nicht mehr verwendet. Darüber hinaus entfernt jQuery 3.x die Möglichkeit, mit .on("ready", function() {}) eine Funktion in einem "ready" .on("ready", function() {}) auszuführen.

Vermeiden Sie Konflikte mit noConflict() und einem anderen Alias ​​für jQuery

Wenn Ihr jQuery-Code mit einer anderen Bibliothek in Konflikt steht, die auch das $ -Zeichen als Alias ​​verwendet, verwenden Sie die Methode noConflict() :

 jQuery.noConflict(); 

Dann können Sie $ als Alias ​​für eine andere Bibliothek verwenden, indem Sie den jQuery Namen für jQuery-Funktionen verwenden.

Sie können auch anrufen

 $jq = jQuery.noConflict(); 

und benutze $jq als Alias ​​für jQuery. Zum Beispiel:

 $jq(function () { $jq("a").click(function (event) { event.preventDefault(); alert("Hello world!"); }); }); 

Sie können jQuery auch $ in einem bestimmten Bereich zuweisen:

 jQuery(function ($) { // In here, the dollar sign is an alias for jQuery only. }); // Out here, other libraries can use the dollar sign as an alias. 

Dann können Sie $ als Alias ​​für jQuery innerhalb dieses Funktionsblocks verwenden, ohne sich über Konflikte mit anderen Bibliotheken Gedanken machen zu müssen.

Wenn möglich, cachen Sie jQuery-Objekte und -Ketten

Der Aufruf der Funktion jQuery $() ist teuer. Wiederholte Appelle an ihn äußerst ineffizient . Vermeiden dies:

 $('.test').addClass('hello'); $('.test').css('color', 'orange'); $('.test').prop('title', 'Hello world'); 

Zwischenspeichern Sie Ihr jQuery-Objekt stattdessen in einer Variablen:

 var $test = $('.test'); $test.addClass('hello'); $test.css('color', 'orange'); $test.prop('title', 'Hello world'); 

Oder noch besser: Verwenden Sie eine Kette, um Wiederholungen zu reduzieren:

 $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world'); 

Denken Sie auch daran, dass viele Funktionen in einem einzigen Aufruf mehrere Änderungen durchführen können, indem Sie alle Werte in einem Objekt zusammenfassen. Anstelle von:

 $('.test').css('color', 'orange').css('background-color', 'blue'); 

verwenden:

 $('.test').css({ 'color': 'orange', 'background-color': 'blue' }); 

Variable Namenskonventionen

Die aufgelisteten jQuery-Variablen werden normalerweise mit $ , um sie von Standard-JavaScript-Objekten zu unterscheiden.

 var $this = $(this); 

Kennen Sie Ihre DOM-Eigenschaften und -Funktionen

Obwohl es eines der Ziele von jQuery ist, DOM zu abstrahieren, kann das Wissen über DOM-Eigenschaften äußerst nützlich sein. Einer der häufigsten Fehler von Personen, die jQuery studieren, ohne das DOM zu lernen, besteht darin, mit jQuery auf die Eigenschaften eines Elements zuzugreifen:

 $('img').click(function () { $(this).attr('src'); // Bad! }); 

Im obigen Code bezieht sich this auf das Element, von dem aus der Click-Ereignishandler gestartet wurde. Der obige Code ist >

 $('img').click(function () { this.src; // Much, much better }); 

Idiomatische Syntax zum Erstellen von Elementen

Obwohl die folgenden zwei Beispiele funktional äquivalent und syntaktisch korrekt zu sein scheinen, wird das erste Beispiel bevorzugt:

 $('<p>', { text: 'This is a ' + variable, "class": 'blue slider', title: variable, id: variable + i }).appendTo(obj); 

Zum Vergleich ist der String-Verkettungsansatz viel weniger lesbar und viel fragiler:

 $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj); 

Während das erste Beispiel >

Darüber hinaus ist die idiomatische Syntax resistent gegen die Einfügung von Sonderzeichen. Im zweiten Beispiel ist das Anführungszeichen in variable vorzeitig geschlossene Attribute. Die korrekte Codierung selbst ist weiterhin möglich, auch wenn dies nicht empfohlen wird, da sie fehleranfällig ist.

Chats

Chat über jQuery mit anderen Benutzern:

Alternativen / Mitbewerber

Andere bekannte Javascript-Bibliotheken:

Öffentliche Repositories:

  • cdnjs ist ein Community-Projekt für Cloud-Infrastrukturen, das derzeit weltweit rund 1.143.000 Websites nutzt.
  • jsdelivr - gleichermaßen kostenlos und Open Source CDN für cdnjs.

Verwandte Tags