Heim > Web-Frontend > js-Tutorial > So implementieren Sie den konfliktfreien jQuery-Modus

So implementieren Sie den konfliktfreien jQuery-Modus

清浅
Freigeben: 2021-04-20 15:06:41
Original
2897 Leute haben es durchsucht

Methode zum Implementieren des konfliktfreien jQuery-Modus: Öffnen Sie zuerst die entsprechende jQuery-Codedatei und geben Sie dann die Kontrolle über den $-Bezeichner über die noConflict-Methode an andere JavaScript-Bibliotheken zurück, um den Konflikt zu lösen.

So implementieren Sie den konfliktfreien jQuery-Modus

Die Betriebsumgebung dieses Artikels: Windows 7-System, JQuery-Version 3.2.1, Dell G3-Computer.

Wenn wir jQuery-Code mit anderen JavaScript-Bibliotheken verwenden, kann es zu Konflikten kommen. Wenn Sie beispielsweise das $-Symbol in jQuery verwenden, stoßen Sie zufällig auf eine andere, die das $-Symbol als Verknüpfung verwendet. Dies kann zu Konflikten führen. jQuery bietet jedoch eine spezielle Methode zur Bewältigung von Konfliktsituationen. Als nächstes werden wir in diesem Artikel die Konfliktlösungsmethode in jQuery im Detail vorstellen, die einen bestimmten Referenzwert hat und ich hoffe, dass sie für alle hilfreich sein wird.

Methoden zum Lösen von Konflikten:

Die Möglichkeit, Konflikte in jQuery zu lösen, ist die Methode noConflict(), die die Kontrolle über den $identifier an andere JavaScript-Bibliotheken zurückgibt

Der jQuery-Code im Beispiel unten versetzt jQuery in den konfliktfreien Modus, sobald es auf die Seite geladen wird, und weist einen neuen Variablennamen $j zu, um den $alias zu ersetzen und Konflikte mit dem Prototyp-Framework zu vermeiden. Der detaillierte Code lautet wie folgt:

// 为jQuery定义新的名字
var $j = jQuery.noConflict();
$j(document).ready(function(){
    // 单击demo时弹出对话框
    $j("#demo").click(function(){
        alert("这是jQuery的新定义");
    });
});
 
//原型框架代码
document.observe("dom:loaded", function(){
    // 点击demo1显示弹出框
    $(demo1).observe('click', function(event){
        alert("原型与jQuery一起正常运行");
    });
});
Nach dem Login kopieren

Das Rendering ist wie folgt:

So implementieren Sie den konfliktfreien jQuery-Modus

Wenn Sie jedoch keine weitere Verknüpfung für jQuery definieren möchten, Sie möchten den vorhandenen jQuery-Code nicht ändern oder Wenn Sie der Meinung sind, dass $ viel Zeit spart und in jQuery einfach zu verwenden ist, können wir stattdessen eine andere Methode verwenden.

Wir können $ als Parameter übergeben zur Funktion jQuery(document).ready()

// 为jQuery定义新的名字
jQuery.noConflict();
jQuery(document).ready(function($){
    // The dollar sign in here work as an alias to jQuery
    $("#demo").click(function(){
        alert("jQuery正在正常工作");
    });
});
 document.observe("dom:loaded", function(){
 $(demo1).observe('click', function(event){
        alert("jQuery与原型一起正常使用");
});
});
Nach dem Login kopieren

[Empfohlene Kurse: jQuery Tutorial]

Rendering:

So implementieren Sie den konfliktfreien jQuery-Modus

HINWEIS:

Die obige Lösung zur Vermeidung von Konflikten basiert auf dem anschließenden Laden von jQuery Laden von „prototyp.js“. Wenn Sie jedoch jQuery vor anderen Bibliotheken einbinden, können Sie den vollständigen Namen im jQuery-Code verwenden, um Konflikte zu vermeiden, ohne jQuery.noConflict() aufzurufen. Aber in diesem Fall hat $ die in anderen Bibliotheken definierte Bedeutung

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für alle hilfreich sein

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den konfliktfreien jQuery-Modus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage