Heim > Artikel > Web-Frontend > Ausführliche Erklärung zur Verwendung der jQuery-Bibliothek beim Impact

Ausführliche Erklärung zur Verwendung der jQuery-Bibliothek beim Impact

php中世界最好的语言Original: 2018-04-23 11:25:451299Durchsuche

Dieses Mal erkläre ich Ihnen ausführlich, wie Sie die jQuery-Bibliothek verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung der jQuery-Bibliothek?

Vorwort

Während eines Interviews fragte der Interviewer, wie Konflikte zwischen jQuery und anderen Bibliotheken gelöst werden könnten? Obwohl ich es schon einmal gesehen habe, erinnere ich mich nicht mehr daran.

Meine Idee ist, dass ich, wenn ich zum Entwerfen aufgefordert würde, den Standardwert $ verwenden würde. Wenn ich keine Parameter übergebe, würde ich ihn schließlich auf window.$ mounten und übergebe die Parameter, z. B. jq, dann mounte ich ihn auf window.jq.

var myControl="jq";
(function(name){
 var $=name ||"$"; //name存在$的值就是name的值，不存在或为null，$的值为字符串"$"
 console.log($);
 window[$]=function(){
 alert("123");
 }
})(myControl)
window[myControl]();

Tatsächlich ist dies definitiv nicht die Art und Weise, wie Jquery Konflikte löst. Dann schauen Sie sich an, wie jQuery Konflikte löst.

Mehrere Versionen von jQuery oder Konflikte mit anderen js-Bibliotheken sind hauptsächlich Konflikte mit dem häufig verwendeten $-Symbol.

1. Konfliktlösung

So lösen Sie Konflikte zwischen mehreren jQuery-Versionen derselben Seite

<body>
<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script>
<script>
(function($){
 //此时的$是jQuery-1.6.4
 $('#');
})(jq164);
</script>
 
<script>
jq142(function($){
 //此时的$是jQuery-1.4.2
 $('#');
});
</script>
 
</body>

2. Die jQuery-Bibliothek importiert die Methode

jQuery noConflict() , nachdem andere Bibliotheken die Kontrolle über den $-Bezeichner freigeben, damit andere Skripte sie verwenden können.

1. Sie können jQuery verwenden, indem Sie die Abkürzung durch den vollständigen Namen ersetzen.

Nachdem andere Bibliotheken und die jQuery-Bibliothek geladen wurden, können Sie jederzeit die Funktion jQuery.noConflict() aufrufen, um die zu ändern Variable $ Control wird an andere JavaScript-Bibliotheken übertragen. Anschließend können Sie die Funktion jQuery() als jQuery-Objektherstellungsfabrik im Programm verwenden.

<script src="prototype.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict();  //将变量$的控制权让渡给prototype.js，全名可以不调用。
jQuery(function(){   //使用jQuery
 jQuery("p").click(function(){
 alert( jQuery(this).text() );
 });
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。
$("pp").style.display = 'none'; //使用prototype
</script>

2. Passen Sie eine Verknüpfung an

noConflict(), die einen Verweis auf jQuery zurückgeben und ihn zur späteren Verwendung unter einem benutzerdefinierten Namen speichern kann, z. B. jq, $J-Variablen.

Dadurch wird sichergestellt, dass jQuery bei Verwendung einer benutzerdefinierten Verknüpfung nicht mit anderen Bibliotheken in Konflikt gerät.

<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){   //使用jQuery
 $j("p").click(function(){
 alert( $j(this).text() );
 });
});
$("pp").style.display = 'none'; //使用prototype
</script>

3. Wenn kein Konflikt vorliegt, verwenden Sie trotzdem $

Wenn Sie die $-Abkürzung im jQuery-Codeblock verwenden und diese Verknüpfung nicht ändern möchten, können Sie dies tun Übergeben Sie das $-Symbol als Variable. Bereiten Sie die Methode vor. Auf diese Weise können Sie das $-Symbol innerhalb der Funktion verwenden, außerhalb der Funktion müssen Sie jedoch weiterhin „jQuery“ verwenden.

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
//或者如下
jQuery(function($){   //使用jQuery
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
</script>

Oder verwenden Sie IEF-Anweisungsblöcke, was die idealste Methode sein sollte, da vollständige Kompatibilität mit minimalen Codeänderungen erreicht werden kann.

Wenn wir unsere eigenen JQuery-Plug-Ins schreiben, sollten wir alle diese Schreibmethode verwenden, da wir nicht wissen, wie wir verschiedene JS-Bibliotheken während des spezifischen Arbeitsprozesses nacheinander einführen, diese Methode zum Schreiben von Anweisungsblöcken jedoch Schildkonflikte.

<script type="text/javascript">
jQuery.noConflict();  //将变量$的控制权让渡给prototype.js
(function($){   //定义匿名函数并设置形参为$
 $(function(){   //匿名函数内部的$均为jQuery
 $("p").click(function(){ //继续使用 $ 方法
  alert($(this).text());
 });
 });
})(jQuery);    //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
</script>

3. Die jQuery-Bibliothek wird vor anderen Bibliotheken importiert.

Die jQuery-Bibliothek wird vor anderen Bibliotheken importiert Bibliothek standardmäßig. Dann können Sie „jQuery“ direkt verwenden, um einige jQuery-Arbeiten zu erledigen.

Gleichzeitig können Sie die $()-Methode als Verknüpfung zu anderen Bibliotheken verwenden. Es ist hier nicht erforderlich, die Funktion jQuery.noConflict() aufzurufen.

<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
 jQuery("p").click(function(){  
  alert( jQuery(this).text() );
 });
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>

2. Prinzip

Quellcode: Take Schauen Sie sich den Quellcode an So machen Sie es in

Wenn jQuery geladen wird, wird das aktuelle

über die zuvor deklarierte _jQuery-Variable und das aktuelle

var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
 noConflict: function( deep ) {
   if ( window.$ === jQuery ) {
    window.$ = _$;
   }
   if ( deep && window.jQuery === jQuery ) {
    window.jQuery = _jQuery;
   }
   return jQuery;
  }
});

über _ abgerufen $.

window.jQueryNoConflict über window.$ in jQuery einbinden. Wenn wir es also aufrufen, passen wir es immer so an

jQuery.extend() hat beim Anruf zwei Urteile gefällt jQuery.noConflict()

Das erste, wenn, übergibt die Kontrolle über $.

noConflict()Das zweite if übergibt die Kontrolle über jQuery, wenn

Parameter übergibt.

Abschließend gibt

das jQuery-Objekt zurück, welcher Parameter zum Empfang verwendet wird und welcher Parameter die jQuery-Steuerung hat. noConflict()

2. ÜberprüfungnoConflict()

Konflikte lösen

//冲突 
 var $ = 123; //假设其他库中$为123
 $(
   function () {
    console.log($); //报错Uncaught TypeError: $ is not a function
   }
 );

$-Kontrollbeispiel freigeben

//解决冲突
 var jq = $.noConflict();
 var $ = 123;
 jq(function () {
  alert($); //123
 });

JQuery freigeben Kontrollbeispiel

Die Rolle des Parameters deep: deep wird verwendet, um die externe Schnittstelle von jQuery aufzugeben.

<script>
 var $ = 123; // window.$是123，存储在私有的_$上。
</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict();//当window.$===jQuery的时候，把_$赋给了window.$。
 jq(function () {
  alert($); //123
 });
</script>

lautet wie folgt:

schreibt keine Parameter und jQuery wird als

Konstruktor

angezeigt.

<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict();
 jq(function () {
  alert(jQuery); //构造函数
 });
</script>

如果写个参数true，会弹出456。

<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict(true); //写了true或者参数的时候，deep为真window.jQuery===jQuery为真，所以进入if条件。把456赋值给window.jQuery
 jq(function () {
  alert(jQuery); //456
 });
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen