Codebeispiele, die native jQuery-Methoden ändern oder erweitern-js-Tutorial-php.cn

Codebeispiele, die native jQuery-Methoden ändern oder erweitern

PHPz

Freigeben： 2018-09-29 17:29:58

nach vorne

1232 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Codebeispiele zum Ändern oder Erweitern der nativen JQuery-Methode vorgestellt. In diesem Artikel wird erläutert, wie native JQuery-Methoden geändert oder erweitert werden.

Codebeispiele für jQuery-Methoden ändern oder erweitern:

Es besteht kein Zweifel, dass jQuery eine leistungsstarke und benutzerfreundliche Klassenbibliothek ist.

Seine breite Anwendung kann den oben genannten Standpunkt bestätigen, aber wie das Sprichwort sagt: Niemand ist perfekt und kein Gold ist perfekt. Dasselbe gilt für jQuery. Es kann unsere Aufgaben zu keinem Zeitpunkt perfekt erledigen oder Gelegenheit, also In Zukunft müssen die ursprünglichen Methoden von jQuery erweitert und geändert werden, aber die beste Methode verfügt immer noch über die ursprünglichen Funktionen.

Codebeispiel:

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

Nach dem Login kopieren

Der obige Code ist zweifellos eine Erweiterung der val()-Methode von jQuery. Hier finden Sie eine Einführung in den Implementierungsprozess.

Codekommentare:

1. $.prototype.val = function (base) {}(($.prototype.val), ändern Sie die ursprüngliche val()-Methode von jQuery und verwenden Sie hier den Abschluss In der Paketmethode ist der übergebene Parameter die ursprüngliche val()-Methode 2. return function (){}, gibt ein Funktionsobjekt var s = this zurück, zuweisen der Verweis auf die Variable s, wobei dies auf die jQuery-Objektinstanz verweist. 4. var a = „data-property“, eine Variable deklarieren und einen Wert zuweisen, mehr Inhalt dazu wird später vorgestellt 🎜>5. var p = s.attr(a) ist tatsächlich ein benutzerdefiniertes Attribut auf dem Etikett, daher dient dieser Code dazu, den Wert dieses Attributs zu erhalten isset = arguments.length > 0, bestimmen Sie, ob die modifizierte val()-Methode Parameter übergibt

7, wenn ein Parameter übergeben wird 8. if (isset&&typeof(base)=="function") { base.call(s, v);}, Wenn Parameter übergeben werden und der Basisparameter eine Funktion ist, dann wird der Die Basisfunktion wird aufgerufen, um das Element festzulegen.

Das Obige ist der gesamte Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter

jQuery-Video-Tutorial