jQuery - noConflict()-Methode

Wie verwendet man jQuery und andere Frameworks gleichzeitig auf einer Seite?

jQuery und andere JavaScript-Frameworks

Wie Sie bereits gelernt haben, verwendet jQuery das $-Symbol als Kurzschreibweise für jQuery.

Was, wenn andere JavaScript-Frameworks ebenfalls das $-Symbol als Kurzschreibweise verwenden?

Zu einigen anderen JavaScript-Frameworks gehören: MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman und Ext JS.

Einige dieser Frameworks verwenden ebenfalls das $-Symbol als Kurzschreibweise (genau wie jQuery). Wenn Sie zwei verschiedene Frameworks verwenden, die dasselbe Kurzschreibsymbol nutzen, kann dies dazu führen, dass Skripte nicht mehr ausgeführt werden.

Das jQuery-Team hat dieses Problem berücksichtigt und die noConflict()-Methode implementiert.

jQuery noConflict()-Methode

Die noConflict()-Methode gibt die Kontrolle über den $-Bezeichner frei, sodass andere Skripte ihn verwenden können.

Natürlich können Sie jQuery weiterhin verwenden, indem Sie die Kurzschreibweise durch den vollständigen Namen ersetzen:

Beispiel

$.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery funktioniert noch!"); }); });

Selbst ausprobieren »

Sie können auch Ihre eigene Kurzschreibweise erstellen. noConflict() gibt eine Referenz auf jQuery zurück, die Sie zur späteren Verwendung in einer Variablen speichern können. Sehen Sie sich dieses Beispiel an:

Beispiel

var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery funktioniert noch!"); }); });

Selbst ausprobieren »

Wenn Ihr jQuery-Codeblock die $-Kurzschreibweise verwendet und Sie nicht gewillt sind, diese Abkürzung zu ändern, können Sie das $-Symbol als Variable an die ready-Methode übergeben. Auf diese Weise können Sie das $-Symbol innerhalb der Funktion verwenden - außerhalb der Funktion müssen Sie jedoch weiterhin "jQuery" verwenden:

Beispiel

$.noConflict(); jQuery(document).ready(Funktion($){ $("Schaltfläche").Klick(Funktion(){ $("p").Text("jQuery funktioniert noch!"); }); });

Selbst ausprobieren »
Andere Erweiterungen