Exemples de code qui modifient ou étendent les méthodes natives jQuery-js tutoriel-php.cn

Exemples de code qui modifient ou étendent les méthodes natives jQuery

PHPz

Libérer： 2018-09-29 17:29:58

avant

1236 Les gens l'ont consulté

Cet article présente principalement des exemples de code pour modifier ou étendre les méthodes natives jQuery. Cet article utilise un exemple d'extension de la méthode native jquery val pour expliquer comment modifier ou étendre les méthodes natives jquery. Les amis qui en ont besoin peuvent s'y référer

Modifiez ou étendez les exemples de code de méthode jQuery :

Il ne fait aucun doute que jQuery est une bibliothèque de classes puissante et facile à utiliser.

Sa large application peut confirmer le point de vue ci-dessus, mais comme le dit le proverbe, personne n'est parfait, et aucun or n'est parfait. Il en va de même pour jQuery. Il ne peut à aucun moment accomplir parfaitement nos tâches. ou occasion, donc à l'avenir, les méthodes originales de jQuery devront être étendues et modifiées, mais la meilleure méthode a toujours les fonctions d'origine.

Exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.prototype.val = function (base) {
  return function () {
    var s = this;
    var a = "data-property";
    var p = s.attr(a);
    var isset = arguments.length > 0;
    var v = isset ? arguments[0] : null;
         
    if (isset&&typeof(base)=="function") { 
      base.call(s, v); 
    } 
    else { 
      v = base.call(s); 
    }
    if (p) {
      if (isset) { 
        s.attr(p, v); 
        return s 
      }
      else { 
        return s.attr(p) 
      }
    }
    else {
      if (!s.is(":input")){ 
        if (isset) { 
          s.text(v); return s; 
        } 
        else { 
          return s.text(); 
        } 
      }
      else { 
        return isset ? s : v; 
      }
    }
  }
}($.prototype.val);
$(document).ready(function(){
  $("#show").html($("#lbl").val()+"<br>"+$("#txt").val());
})
</script>
</head>
<body>
<span id="lbl">php中文网</span>   
<input type="text" id="txt" value="softwhy.com" />
<input type="checkbox" value="antzone" />
<p id="show"></p>
</body>
</html>

Copier après la connexion

Le code ci-dessus est sans aucun doute une extension de la méthode val() de jQuery. Voici une introduction à son processus d'implémentation.

Commentaires de code :

1. $.prototype.val = function (base) {}(($.prototype.val), modifiez la méthode val() originale de jQuery et utilisez la fermeture ici Dans la méthode package, le paramètre passé est la méthode val() d'origine pour conserver la fonction de la méthode val() d'origine. 2. return function (){}, renvoie un objet fonction >3. la référence de this à la variable s, où this pointe vers l'instance d'objet jQuery. 4. var a = "data-property", déclarez une variable et attribuez une valeur, plus de contenu à ce sujet sera introduit plus tard

<.>5. var p = s.attr(a). En fait, data-property est un attribut personnalisé sur l'étiquette, donc ce code sert à obtenir la valeur de cet attribut

6. isset = arguments.length > 0, détermine si la méthode val() modifiée passe les paramètres

7. var v = isset arguments[0] : null, si un paramètre est passé, le premier paramètre le sera. être obtenu, et les autres seront ignorés. 8. if (isset&&typeof(base)=="function") { base.call(s, v);}, Si des paramètres sont passés et que le paramètre de base est une fonction, alors le La fonction de base est appelée pour définir l'élément

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo jQuery