Exemple d'utilisation de fonction globale réalisé par jQuery plug-in_jquery

L'exemple de cet article décrit l'utilisation de fonctions globales dans la production de plug-ins jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Ajouter une nouvelle fonction globale

Les fonctions dites globales sont en fait des méthodes d'objets jQuery, mais d'un point de vue pratique, ce sont des fonctions situées à l'intérieur de l'espace de noms jQuery

(1) Pour ajouter une fonction, spécifiez simplement la nouvelle fonction comme propriété de l'objet jQuery.

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
}

Appel :

Copier le code Le code est le suivant :

$.five();

(2)Ajouter plusieurs fonctions

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
} 
jQuery.six =function(){ 
 alert("直接继承方式不一样2"); 
}

Appel :

Copier le code Le code est le suivant :

$.five();$.six( );

La méthode ci-dessus sera confrontée au risque de conflit d'espace de noms. Pour éviter ce problème, il est préférable d'encapsuler toutes les fonctions globales appartenant à ce plug-in dans un objet, comme suit :

//命名空间继承
jQuery.myPlugin ={ 
 one : function(obj){ 
  var object = obj; 
  var id = object.attr("id"); 
  alert(id); 
 }, 
 two : function(){ 
  alert(22); 
 } 
}

Cela crée en fait un autre espace de noms pour la fonction globale : jQuery.myPlugin.

2. Ajouter la méthode objet jQuery

La plupart des fonctionnalités intégrées de jQuery sont fournies via ses méthodes objet.

jQuery.fn.myMethod= function(){ 
 alert(11); 
}

Appel :

Copier le code Le code est le suivant :

$.fn.myMethod();

Remarque : jQuery.fn est un alias de jQuery.prototype.

Exemple : ce qui suit est une méthode qui ne se comporte pas correctement

<ul> 
  <li>11111111111111111111111111</li> 
  <liclass="this">22222222222222222222</li> 
  <li>333333333333333</li> 
  <liclass="that">44444444444444444</li> 
  <liclass="this">55555555555555</li> 
  <li>6666666666666666</li> 
  <li>777777777777777777</li> 
  <liclass="that">777777777777777777</li> 
</ul> 
<inputtype="button" value="swap" id="swap" />

jQuery.fn.swapClass= function(class1,class2){ 
 if(this.hasClass(class1)){ 
  this.removeClass(class1).addClass(class2); 
 } 
 if(this.hasClass(class2)){ 
  this.removeClass(class2).addClass(class1); 
 } 
} 
 $("#swap").click(function(){ 
  $("li").swapClass("this","that"); 
  return false; 
})

Tous les Li utilisent ce style.

(1)Itération Ermite

Pour garantir un comportement correct quelle que soit la correspondance de plusieurs éléments, le moyen le plus simple est de toujours appeler la méthode .each() sur l'environnement de la méthode, afin que

Effectue une itération ermite, et effectuer une itération ermite est cruciale pour maintenir la cohérence entre les plugins et les méthodes intégrées. À l'intérieur de la méthode appelée .each(), this

.

fait référence à chaque élément DOM tour à tour. Le code ci-dessus est modifié en :

jQuery.fn.swapClass= function(class1,class2){ 
 this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

Appel :

Copier le code Le code est le suivant :

$("li").swapClass("this","that ")

(2) Concaténation de méthodes

Pour utiliser la concaténation de méthodes, un objet jQuery doit être renvoyé dans toutes les méthodes du plugin. L'objet jQuery renvoyé est généralement l'objet référencé par ceci.

jQuery.fn.swapClass= function(class1,class2){ 
 return this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

Appel :

Copier le code Le code est le suivant :

$("li").swapClass("this","that "). css("text-decoration","underline");

3. Ajouter une nouvelle méthode d'abréviation

//添加新的简写方法 
jQuery.fn.slideFadeOut= function(speed,callback){ 
 return this.animate({ 
  height : "hide", 
  opacity : "hide" 
 },speed,callback) 
} 
jQuery.fn.slideFadeIn= function(speed,callback){ 
 return this.animate({ 
  height : "show", 
  opacity : "show" 
 },speed,callback) 
} 
jQuery.fn.slideFadeToggle= function(speed,callback){ 
 return this.animate({ 
  height : "toggle", 
  opacity : "toggle" 
 },speed,callback) 
}

J'espère que cet article sera utile à la programmation jQuery de chacun.