Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter le mode sans conflit jQuery

清浅
Libérer: 2021-04-20 15:06:41
original
2844 Les gens l'ont consulté

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一起正常运行");
    });
});
Copier après la connexion

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与原型一起正常使用");
});
});
Copier après la connexion

[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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal