jQuery noConflict() Methode

Wie kann man jQuery und andere Frameworks gleichzeitig auf der Seite verwenden?

jQuery und andere JavaScript-Frameworks

Wie Sie bereits erfahren haben, verwendet jQuery das $-Symbol als Abkürzung für jQuery.

Was tun, wenn auch andere JavaScript-Frameworks das $-Symbol als Abkürzung verwenden?

Andere JavaScript-Frameworks umfassen: MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman und Ext JS.

Einige Frameworks verwenden ebenfalls das $-Symbol als Abkürzung (wie jQuery), wenn Sie zwei verschiedene Frameworks verwenden, die das gleiche Abkürzungssymbol verwenden, kann dies zu einem Abbruch des Skripts führen.

Das jQuery-Team hat sich dieser Frage angenommen und die noConflict() Methode implementiert.

jQuery noConflict() Methode

Die noConflict() Methode gibt die Kontrolle über das $-Symbol frei, sodass andere Skripte es verwenden können.

Beispiel

Natürlich können Sie jQuery auch durch den vollständigen Namen ersetzen, um die Abkürzung zu verwenden:

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery läuft noch!");
  );
);

Versuchen Sie es selbst

Beispiel

Sie können auch Ihre eigenen Abkürzungen erstellen. Die noConflict() Methode gibt eine Referenz auf jQuery zurück, die Sie in einer Variable speichern können, um sie später zu verwenden. Sehen Sie sich dieses Beispiel an:

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

Versuchen Sie es selbst

Beispiel

Wenn Ihr jQuery-Codeblock das $-Abkürzungssymbol verwendet und Sie nicht möchten, dass diese Kurzwahl geändert wird, können Sie das $-Symbol als Variable an die ready-Methode übergeben. Auf diese Weise können Sie das $-Symbol im Funktionsbereich verwenden - außerhalb der Funktion müssen Sie jedoch "jQuery" verwenden:

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery läuft noch!");
  );
);

Versuchen Sie es selbst

jQuery Kernreferenzhandbuch

Für eine vollständige Übersicht über die jQuery-Kernmethoden besuchen Sie bitte unsere jQuery Kernreferenzhandbuch.