jquery

JQuery - New Wave JavaScript

Derzeit finden die Sitzungen auf der matrix.org -Plattform statt.

Die Besprechungsprotokolle finden Sie bei Meetings.jquery.org.

Die neueste Version von JQuery ist unter https://jquery.com/download/ verfügbar.

Versionsunterstützung

Version	Zweig	Status
4.x	hauptsächlich	Beta
3.x	3.x-stabil	Aktiv
2.x	2.x-stabil	Inaktiv
1.x	1.x-stabil	Inaktiv

Sobald das Finale 4.0.0 veröffentlicht ist, erhält die 3.x Branche weiterhin Aktualisierungen für eine begrenzte Zeit. Die Zweige 2.x und 1.x werden nicht mehr unterstützt.

Die kommerzielle Unterstützung für inaktive Versionen ist bei Herodevs erhältlich.

Erfahren Sie mehr über unsere Versionsunterstützung.

Beitragsführer

Im Geiste der Open -Source -Softwareentwicklung fördert JQuery immer den Beitrag des Community Code. Damit Sie den Start haben und bevor Sie in das Schreiben von Code einsteigen, lesen Sie diese wichtigen Beitragsrichtlinien gründlich lesen:

1. Sich engagieren
2. Kernstil -Leitfaden
3. Schreiben von Code für JQuery -Projekte

Verweise auf Probleme/PRs

GitHub-Probleme/PRs werden normalerweise über gh-NUMBER verwiesen, wobei NUMBER die numerische ID der Ausgabe/PR ist. Sie finden ein solches Problem/PR unter https://github.com/jquery/jquery/issues/NUMBER .

JQuery hat in der Vergangenheit einen anderen Bug -Tracker - basierend auf TRAC - verwendet, der unter bugs.jquery.com verfügbar ist. Es wird im lesenden Modus gehalten, so dass sich auf frühere Diskussionen bezieht. Wenn Jquery eine dieser Probleme verweist, verwendet es das Muster trac-NUMBER , wobei NUMBER die numerische ID des Problems ist. Ein solches Problem finden Sie unter https://bugs.jquery.com/ticket/NUMBER .

Umgebungen, in denen JQuery verwendet werden kann

• Browserunterstützung
• JQuery unterstützt auch Knoten, Browser-Erweiterungen und andere Nicht-Browser-Umgebungen.

Was Sie brauchen, um Ihre eigene jQuery zu bauen

Um JQuery zu erstellen, müssen Sie den neuesten Node.js/NPM und Git 1.7 oder höher haben. Frühere Versionen mögen funktionieren, werden aber nicht unterstützt.

Für Windows müssen Sie Git und Node.js. herunterladen und installieren.

MacOS -Benutzer sollten Homebrew installieren. Sobald Homebrew installiert ist, führen Sie brew install git für die Installation von Git und brew install node zur Installation von Node.js.

Linux/BSD -Benutzer sollten ihre entsprechenden Paketmanager verwenden, um Git und Node.js zu installieren oder aus der Quelle zu erstellen, wenn Sie so schwingen. Easy-Peasy.

So bauen Sie Ihre eigene jQuery

Zuerst klonen Sie das JQuery Git Repo.

Geben Sie dann das JQuery -Verzeichnis ein, installieren Sie Abhängigkeiten und führen Sie das Build -Skript aus:

 cd jquery
npm install
npm run build

Die erstellte Version von JQuery wird zusammen mit einer minimierten Kopie und zugehörigen Kartendatei in das dist/ Verzeichnis platziert.

Erstellen Sie alle JQuery -Release -Dateien

Führen Sie den folgenden Befehl aus, um alle Varianten von JQuery zu erstellen:

npm run build:all

Dadurch werden alle Varianten erstellt, die JQuery in einer Veröffentlichung enthalten, einschließlich jquery.js , jquery.slim.js , jquery.module.js und jquery.slim.module.js entlang ihrer zugehörigen Minimed -Dateien und -Socken.

jquery.module.js und jquery.slim.module.js sind ECMAScript-Module, die jQuery exportieren, und $ als benannte Exporte werden eher im dist-module/ Verzeichnis als in das dist/ Verzeichnis platziert.

Bauen eines maßgefertigten JQuery

Das Build -Skript kann verwendet werden, um eine benutzerdefinierte Version von JQuery zu erstellen, die nur die Module enthält, die Sie benötigen.

Jedes Modul kann mit Ausnahme von core ausgeschlossen werden. Wenn Sie selector ausschließen, wird er nicht entfernt, sondern durch eine kleine Wrapper um native querySelectorAll ersetzt (weitere Informationen finden Sie unten).

Skripthilfe erstellen

Führen Sie Folgendes aus:

npm run build -- --help

Module

Um ein Modul --exclude , übergeben Sie seinen Pfad relativ zum src -Ordner (ohne die .js -Erweiterung) an die Option: Bei der Verwendung der Option --include wird die Standardeinstellung fallen gelassen und ein Build wird nur mit diesen Modulen erstellt.

Einige Beispielmodule, die ausgeschlossen oder eingeschlossen werden können, sind:

• AJAX : Alle AJAX -Funktionen: $.ajax() , $.get() , $.post() , $.ajaxSetup() , .load() , Transports und Ajax -Ereignisse wie .ajaxStart() .

• AJAX/XHR : Nur der XMLHTTPREQUEST AJAX -Transport.

• Ajax/Skript : Nur der <script> Ajax -Transport; Wird verwendet, um Skripte abzurufen.

• Ajax/JSONP : Nur JSONP AJAX -Transport; Hängt vom Ajax/Skript -Transport ab.

• CSS : Die .css() -Methode. Entfernt auch alle Module abhängig von CSS (einschließlich Effekten , Abmessungen und Offset ).

• CSS/Showhide : nicht animiert .show() , .hide() und .toggle() ; Kann ausgeschlossen werden, wenn Sie Klassen oder explizite .css() -Anrufe verwenden, um die display festzulegen. Entfernt auch das Effektmodul .

• Veraltet : Methoden, die als veraltet dokumentiert, aber noch nicht entfernt dokumentiert sind.

• Dimensionen : Die Methoden .width() und .height() , einschließlich inner- und outer- Variationen.

• Effekte : Die .animate() -Methode und ihre Vererdigung wie .slideUp() oder .hide("slow") .

• Ereignis : Die Methoden .on() und .off() und alle Ereignisfunktionen.

• Ereignis/Trigger : Die Methoden .trigger() und .triggerHandler() .

• Offset : Die .offset() , .position() , .offsetParent() , .scrollLeft() und .scrollTop() -Methoden.

• Wrap .wrapInner() .wrap() .unwrap() .wrapAll()

• Kern/Bereit : Schließen Sie das bereite Modul aus, wenn Sie Ihre Skripte am Ende des Körpers platzieren. Alle mit jQuery() gebundenen Rückrufe werden einfach sofort aufgerufen. jQuery(document).ready() ist jedoch keine Funktion und .on("ready", ...) oder ähnliches wird nicht ausgelöst.

• Aufgeschoben : JQuery.Deferred ausschließen. Dies schließt auch alle Module aus, die auf verzögerten, einschließlich Ajax , Effekten und Warteschlangen angewiesen sind, ersetzt jedoch Core/Ready durch Core/Ready-No-Deferred .

• Exporte/global : Schließen Sie die Anhaftung globaler JQuery -Variablen ($ und JQuery) an das Fenster aus.

• Exporte/AMD : Schließen Sie die AMD -Definition aus.

• Selektor : Der vollständige JQuery -Selektormotor. Wenn dieses Modul ausgeschlossen ist, wird es durch eine rudimentäre Selektor -Engine ersetzt, die auf der querySelectorAll -Methode des Browsers basiert, die die Erweiterungen von JQuery -Selektors oder eine verbesserte Semantik nicht unterstützt. Weitere Informationen finden Sie in der Datei Selector-Native.js-Datei.

Hinweis : Mit Ausnahme des vollständigen selector schließen auch alle JQuery -Selektorerweiterungen (wie effects/animatedSelector und css/hiddenVisibleSelectors ) aus.

AMD -Name

Sie können den Modulnamen für die AMD -Definition von JQuery festlegen. Standardmäßig ist es auf "JQuery" eingestellt, das gut mit Plugins und Bibliotheken von Drittanbietern spielt. Es kann jedoch Fälle geben, in denen Sie dies ändern möchten. Geben Sie es an den Parameter --amd :

npm run build -- --amd= " custom-name "

Oder um anonym zu definieren, lassen Sie den Namen leer.

npm run build -- --amd

Dateiname und Verzeichnis

Der Standardname für die erstellte jQuery -Datei lautet jquery.js ; Es wird unter das dist/ Verzeichnis gelegt. Es ist möglich, den Dateinamen mithilfe von --filename und das Verzeichnis mit --dir zu ändern. --dir ist relativ zur Projektwurzel.

npm run build -- --slim --filename= " jquery.slim.js " --dir= " /tmp "

Dies würde eine schlanke Version von JQuery erstellen und unter tmp/jquery.slim.js platzieren.

ECMascript -Modulmodus (ESM)

Standardmäßig generiert JQuery eine reguläre Skript -JavaScript -Datei. Sie können auch ein ECMascript -Modul erstellen, jQuery als Standard -Exportieren unter Verwendung des Parameters --esm exportiert:

npm run build -- --filename=jquery.module.js --esm

Fabrikmodus

Standardmäßig hängt JQuery von einem globalen window ab. Für Umgebungen, die keine haben, können Sie einen Werksbau erstellen, in dem eine Funktion window als Parameter enthüllt, die Sie extern angeben können (siehe README des veröffentlichten Pakets für Verwendungsanweisungen). Sie können eine solche Fabrik unter Verwendung des Parameters --factory :

npm run build -- --filename=jquery.factory.js --factory

Diese Option kann mit anderen wie --esm oder --slim gemischt werden:

npm run build -- --filename=jquery.factory.slim.module.js --factory --esm --slim --dir= " /dist-module " 

Beispiele für benutzerdefinierte Build

Erstellen Sie ein benutzerdefiniertes Build mit npm run build und listen Sie die zu ausgeschlossenen Module auf. Ohne ein Modul auf oberster Ebene schließt auch das entsprechende Moduleverzeichnis aus.

Alle AJAX -Funktionen ausschließen:

npm run build -- --exclude=ajax

Ausgenommen CSS entfernt Module in Abhängigkeit von CSS: Effekte , Versatz , Abmessungen .

npm run build -- --exclude=css

Ein paar Module ausschließen ( -e ist ein Alias ​​für --exclude ):

npm run build -- -e ajax/jsonp -e css -e deprecated -e dimensions -e effects -e offset -e wrap

Es gibt einen speziellen Alias, um einen Build mit der gleichen Konfiguration zu generieren wie der offizielle jQuery Slim Build:

npm run build -- --filename=jquery.slim.js --slim

Oder um den schlanken Build als ESM -Modul zu erstellen:

npm run build -- --filename=jquery.slim.module.js --slim --esm

Nicht offizielle benutzerdefinierte Builds werden nicht regelmäßig getestet. Verwenden Sie sie auf eigenes Risiko.

Ausführen der Unit -Tests

Stellen Sie sicher, dass Sie über die notwendigen Abhängigkeiten verfügen:

npm install

Starten Sie npm start um JQuery zu automatisch zu bauen, während Sie arbeiten:

npm start

Führen Sie die Unit -Tests mit einem lokalen Server aus, der PHP unterstützt. Stellen Sie sicher, dass Sie die Site aus dem Stammverzeichnis ausführen, nicht das "Test" -Verzeichnis. Es ist keine Datenbank erforderlich. Vorkonfigurierte PHP-lokale Server sind für Windows und Mac verfügbar. Hier sind einige Optionen:

• Windows: Wamp Download
• MAC: MAMP -Download
• Linux: Lampe einrichten
• Mongoose (die meisten Plattformen)

Wesentlicher Git

Da der Quellcode vom Git -Versionskontrollsystem behandelt wird, ist es nützlich, einige verwendete Funktionen zu kennen.

Reinigung

Wenn Sie Ihr Arbeitsverzeichnis wieder auf den Status von stromaufwärts löschen möchten, können die folgenden Befehle verwendet werden (erinnern Sie sich an alles, woran Sie gearbeitet haben, danach verschwunden):

git reset --hard upstream/main
git clean -fdx

Wiedergeburt

Für Feature/Topic -Zweige sollten Sie immer das Flag --rebase verwenden, um zu git pull . Wenn Sie normalerweise viele vorübergehende "in einer Github Pull -Anfrage" -Ag -Zweige handeln, führen Sie Folgendes aus, um dies zu automatisieren:

git config branch.autosetuprebase local

(Weitere Informationen finden Sie unter man git-config .)

Umgang mit zusammengeführten Konflikten

Wenn Sie bei der Verschmelzung verschmelzende Konflikte erhalten, können Sie die Funktion git mergetool verwenden, anstatt die konfliktreichen Dateien manuell zu bearbeiten. Obwohl das Standard -Tool xxdiff schrecklich/alt aussieht, ist es ziemlich nützlich.

Im Folgenden finden Sie einige Befehle, die dort verwendet werden können:

• Ctrl + Alt + M - Automerge so weit wie möglich
• b - Springen Sie zum nächsten Zusammenführungskonflikt
• s - Ändern Sie die Reihenfolge der widersprüchlichen Linien
• u - eine Zusammenführung rückgängig machen
• left mouse button - Markieren Sie einen Block, um der Gewinner zu sein
• middle mouse button - Markieren Sie eine Linie, um der Gewinner zu sein
• Ctrl + S - Speichern
• Ctrl + Q - aufhören

Qunit Referenz

Testmethoden

 expect ( numAssertions ) ;
stop ( ) ;
start ( ) ;

Hinweis : In dieser Testsuite wird in dieser Testsuite die letztendliche Hinzufügung eines Arguments zum Anhalten/Starten ignoriert, damit Start und Stopp als Rückrufe übergeben werden können, ohne sich um ihre Parameter zu kümmern.

Testbehauptungen

 ok ( value , [ message ] ) ;
equal ( actual , expected , [ message ] ) ;
notEqual ( actual , expected , [ message ] ) ;
deepEqual ( actual , expected , [ message ] ) ;
notDeepEqual ( actual , expected , [ message ] ) ;
strictEqual ( actual , expected , [ message ] ) ;
notStrictEqual ( actual , expected , [ message ] ) ;
throws ( block , [ expected ] , [ message ] ) ; 

Test Suite Convenience Methods Referenz

Siehe Test/Data/testinit.js.

Gibt eine Reihe von Elementen mit den angegebenen IDs zurück

 q ( ... ) ;

Beispiel:

 q ( "main" , "foo" , "bar" ) ;

=> [ div # main , span # foo , input # bar ]

Behauptet, dass eine Auswahl mit den angegebenen IDs übereinstimmt

 t ( testName , selector , [ "array" , "of" , "ids" ] ) ;

Beispiel:

 t ( "Check for something" , "//[a]" , [ "foo" , "bar" ] ) ;

Feuert ein natives DOM -Ereignis, ohne durch JQuery zu gehen

 fireNative ( node , eventType ) ;

Beispiel:

 fireNative ( jQuery ( "#elem" ) [ 0 ] , "click" ) ;

Fügen Sie der URL eine zufällige Zahl hinzu, um das Caching zu stoppen

 url ( "some/url" ) ;

Beispiel:

 url ( "index.html" ) ;

=> "data/index.html?10538358428943"


url ( "mock.php?foo=bar" ) ;

=> "data/mock.php?foo=bar&10538358345554"

Führen Sie Tests in einem Iframe aus

Einige Tests erfordern möglicherweise ein anderes Dokument als die Standard -Testvorrichtung, die in einem separaten Iframe ausgeführt werden können. Der tatsächliche Testcode und die Behauptungen bleiben in den wichtigsten Testdateien von JQuery. In der IFrame -Datei sollten nur der minimale Testspiel und ein Setup -Code eingerichtet werden.

 testIframe ( testName , fileName ,
  function testCallback (
      assert , jQuery , window , document ,
	  [ additional args ] ) {
	...
  } ) ;

Dadurch wird eine Seite geladen, die eine URL mit Dateiname "./data/" + fileName erstellt. Die iframed -Seite bestimmt, wann der Rückruf im Test auftritt, indem das Skript "/test/data/iframetest.js" und " startIframeTest( [ additional args ] ) aufgerufen wird. Oft erfolgt dies entweder nach dem Dokument bereit oder window.onload feuer.

Der testCallback empfängt das von testIframe für diesen Test erstellte Qunit assert -Objekt, gefolgt von der globalen jQuery , window und document aus dem Iframe. Wenn der Iframe -Code Argumente übergibt, um startIframeTest zu starten, folgen sie dem document .

Fragen?

Wenn Sie Fragen haben, können Sie das sich entwickelnde JQuery Core Forum oder in #JQuery on Libera im sich entwickelnden JQuery Core -Forum stellen.