Heim > Artikel > Web-Frontend > Zwei Lösungen für jQuery-Prototypkonflikte (mit Demo-Beispiel-Download)_jquery

Zwei Lösungen für jQuery-Prototypkonflikte (mit Demo-Beispiel-Download)_jquery

WBOYOriginal: 2016-05-16 15:19:061264Durchsuche

In diesem Artikel werden zwei Lösungen für jQuery-Prototypkonflikte anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wie kann es zu Konflikten zwischen Jquery und Prototyp kommen, weil beide $ verwenden und gleichzeitig verwendet werden, was verwirrend ist? Dieses Problem wurde nicht weniger als fünf Mal gelöst und ich muss es jedes Mal überprüfen. Es tut nicht weh, hehe.

Methode 1. Code zur Kernbibliotheksdatei von jquery hinzufügen.

1. Normalerweise ist es jquery.js oder jquery.min.js, einige mit Versionsnummern. Wissen Sie einfach, um welche Datei es sich handelt.

})( window );
jQuery.noConflict(); //最后面，加上这一行。

2. Test-JQuery- und Prototyp-Dateien laden

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="jquery.min.js"></script>

3. Wie schreibe ich JS-Code

<script type="text/javascript">
alert('prototype value : '+$('test').value); //prototype写法
jQuery(document).ready(function($){ //注意这里的，jQuery和$
  alert('jquery value : '+$('#test').val()); //jquery写法
});
</script>

Diese Methode empfohlen, diese Methode ist ein für alle Mal effektiver

Der vollständige Democode lautet wie folgt:

<html>
<head>
<script type="text/javascript" src="./prototype.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<form>
<input id="test" type='text' name='test' value='test'/>
</form>
<script type="text/javascript">
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
 alert('jquery value : '+$('#test').val());
});
</script>
</body>
</html>

Methode 2: Lösen Sie den Konflikt, bei dem jquery aufgerufen wird

1. Test-JQuery- und Prototyp-Dateien laden

//jquery和prototype，没有先后顺序，谁先谁后都一样。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>

2. js-Code

<script type="text/javascript">
jQuery.noConflict(); //解决冲突，这个一定要放在js代码的最前面，不然就会报错了。
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
  alert('jquery value : '+$('#test').val());
});
</script>

Diese Methode eignet sich besser für Situationen, in denen sich die Kernquelldateien von JQuery nicht auf Ihrem eigenen Server befinden oder der JQuery-Code relativ klein ist. Die BeispieldemoKlicken Sie hier, um sie anzuzeigen.

Die komplette Demo kann hier angeklickt werdenVon dieser Seite herunterladen.

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

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

Vorheriger Artikel：Beispiel eines binären Suchalgorithmus, der in js_javascript-Fähigkeiten implementiert istNächster Artikel：Beispiel eines binären Suchalgorithmus, der in js_javascript-Fähigkeiten implementiert ist

In Verbindung stehende Artikel

Mehr sehen