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

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

WBOY

Freigeben： 2016-05-16 15:19:06

Original

1263 Leute haben es durchsucht

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(); //最后面，加上这一行。

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.