Cette fois, je vais vous donner une explication détaillée de l'utilisation de la bibliothèque jQuery lors de l'impact. Quelles sont les précautions lors de l'utilisation de la bibliothèque jQuery, jetons un coup d'œil.
Avant-propos
Lors d'une interview, l'intervieweur a demandé comment résoudre les conflits entre jQuery et d'autres bibliothèques ? Même si je l'ai déjà vu, je ne m'en souviens plus.
Mon idée est que si on me demande de concevoir, j'utiliserai une valeur par défaut de $ Si aucun paramètre n'est transmis, alors utilisez $. Enfin, montez-le sur window.$ et transmettez les paramètres. . Si le nom est transmis, comme jq, alors je le monterai sur window.jq.
var myControl="jq";
(function(name){
var $=name ||"$"; //name存在$的值就是name的值，不存在或为null，$的值为字符串"$"
console.log($);
window[$]=function(){
alert("123");
}
})(myControl)
window[myControl]();En fait, ce n’est certainement pas la façon dont jquery résout les conflits. Jetez ensuite un œil à la façon dont jQuery résout les conflits.
Les versions multiples de jQuery ou les conflits avec d'autres bibliothèques js sont principalement des conflits avec le symbole $ couramment utilisé.
1. Résolution des conflits
1. Comment résoudre les conflits entre plusieurs versions de jQuery d'une même page
<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. La bibliothèque jQuery importe la méthode
après que d'autres bibliothèques libèrent le contrôle de l'identifiant $ afin que d'autres scripts puissent l'utiliser. jQuery noConflict()
à tout moment pour modifier le La variable $ Control est transférée vers d'autres bibliothèques JavaScript. Ensuite, vous pouvez utiliser la fonction jQuery.noConflict() comme usine de fabrication d'objets jQuery dans le programme. jQuery()
<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> qui peut renvoyer une référence à jQuery et la stocker dans un nom personnalisé, tel que jq, variables $J, pour une utilisation ultérieure. noConflict()
<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><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><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. La bibliothèque jQuery est importée avant les autres bibliothèques
La bibliothèque jQuery est importée avant les autres bibliothèques La propriété de $ appartient au JavaScript suivant. bibliothèque par défaut. Ensuite, vous pouvez utiliser "jQuery" directement pour effectuer du travail jQuery. En même temps, vous pouvez utiliser la méthode comme raccourci vers d'autres bibliothèques. Il n'est pas nécessaire d'appeler la fonction $() ici. jQuery.noConflict()
<!-- 引入 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.Principe
Code source
Code source : Prendre un oeil au code source Comment faire dansvar
// 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;
}
}); actuel est obtenu via la variable _jQuery déclarée à l'avance, et le window.jQuery actuel est obtenu via _ $. window.$
. Alors quand on l'appelle, on l'ajuste toujours comme ça jQuery.extend(). jQuery.noConflict()
noConflict()
passe les paramètres. noConflict()
renvoie l'objet jQuery, quel paramètre est utilisé pour le recevoir et quel paramètre aura le contrôle jQuery. noConflict()
2. Vérification
//冲突
var $ = 123; //假设其他库中$为123
$(
function () {
console.log($); //报错Uncaught TypeError: $ is not a function
}
);//解决冲突
var jq = $.noConflict();
var $ = 123;
jq(function () {
alert($); //123
});<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> n'écrit pas de paramètres et jQuery apparaît en tant que noConflict() constructeur .
<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中文网其它相关文章！
推荐阅读：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Que signifie l'URL ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
