Maison  >  Article  >  interface Web  >  Comment implémenter le mode sans conflit jQuery

Comment implémenter le mode sans conflit jQuery

清浅
清浅original
2019-01-17 11:16:412862parcourir

Méthode pour implémenter le mode sans conflit jQuery : ouvrez d'abord le fichier de code jQuery correspondant ; puis renvoyez le contrôle de l'identifiant $ à d'autres bibliothèques JavaScript via la méthode noConflict pour résoudre le conflit.

Comment implémenter le mode sans conflit jQuery

L'environnement d'exploitation de cet article : système Windows 7, jquery version 3.2.1, ordinateur Dell G3.

Lorsque nous utilisons du code jQuery avec d'autres bibliothèques JavaScript, des conflits peuvent survenir. Par exemple, si vous utilisez le symbole $ dans jQuery, vous en rencontrez un autre qui utilise le symbole $ comme bibliothèque JavaScript. cela peut provoquer des conflits. Cependant, jQuery propose une méthode spéciale pour gérer les situations de conflit. Ensuite, dans l'article, nous présenterons en détail la méthode de résolution des conflits dans jQuery, qui a une certaine valeur de référence et j'espère qu'elle sera utile à tout le monde.

Méthodes pour résoudre les conflits :

La façon de résoudre les conflits dans jQuery est la méthode noConflict(), qui renvoie le contrôle du $identifier à d'autres bibliothèques JavaScript

Le code jQuery dans l'exemple ci-dessous mettra jQuery en mode sans conflit dès qu'il sera chargé dans la page et attribuera un nouveau nom de variable $j pour remplacer le $alias afin d'éviter les conflits avec le framework prototype. Le code détaillé est le suivant :

// 为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一起正常运行");
    });
});

Le rendu est le suivant :

Comment implémenter le mode sans conflit jQuery

Cependant, si vous ne souhaitez pas définir d'autre raccourci pour jQuery et que vous ne souhaitez pas modifier le code jQuery existant. Ou si vous pensez que $ fait gagner beaucoup de temps dans jQuery et est facile à utiliser, alors nous pouvons utiliser une autre méthode à la place

Nous pouvons passer $ comme paramètre à la fonction 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与原型一起正常使用");
});
});

[Cours recommandé : Tutoriel jQuery]

Rendu :

Comment implémenter le mode sans conflit jQuery

REMARQUE :

La solution ci-dessus pour éviter les conflits repose sur chargement de jQuery après le chargement de prototype.js. Mais si vous incluez jQuery avant d'autres bibliothèques, vous pouvez utiliser le nom complet dans le code jQuery pour éviter les conflits sans appeler jQuery.noConflict(). Mais dans ce cas, $ aura la signification définie dans d'autres bibliothèques

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn