Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der jQuery-Prototypeigenschaften und Prototypmethoden_jquery

Detaillierte Erläuterung der jQuery-Prototypeigenschaften und Prototypmethoden_jquery

WBOYOriginal: 2016-05-16 15:51:071760Durchsuche

Werfen wir zunächst einen Blick auf die Prototypeigenschaften und -methoden, die in jQuery 1.7.1 definiert sind?

Das erste ist das Konstruktorattribut

Ich glaube, dass Entwickler, die mit dem objektorientierten Teil von js vertraut sind, damit vertraut sind, einer Funktion, die zur Rückgabe von Objektattributen verwendet wird. Hier ist ein einfaches Beispiel:

function Person(){};
    var person=new Person();
    alert(person.constructor); //function Person(){}

Wenn wir Vererbung schreiben, fügen wir gerne alle Prototypeigenschaften und -methoden in ein separates Objektliteral ein. Dies führt dazu, dass das Konstruktorattribut nicht mit dem „tatsächlichen“ Zeiger übereinstimmt

  function Person(){

    }

    Person.prototype={
      say:function(msg){
        alert(msg); 
      }
    }

    var person=new Person();
    person.say('hello');
    alert(person.constructor); //function Object(){[native code]}

Der Verweis ändert sich zu diesem Zeitpunkt, da das Literalobjekt eine Instanz von Object ist. Um diesen „Fehler“ zu beheben, muss er normalerweise manuell geändert werden Code. Die Erklärung des Konstruktors:jQuery im Quellcode

Selektorattribut Das

selector-Attribut ist für die Verwendung von jquey als js-Bibliothek nicht nützlich. Es wird hauptsächlich zum Entwickeln von Plug-Ins oder Modifikationen basierend auf jquery verwendet. Dieses Attribut gibt die Selektorzeichenfolge zurück, um das aktuelle jquery-Objekt abzurufen, zum Beispiel:

var obj=$('div a');
console.log(obj.selector);//'div a'

jquery-Attribut

Diese Eigenschaft gibt die aktuell verwendete jQuery-Version zurück

console.log($('body').jquery); //1.7.1

Längenattribut

Dieses Attribut gibt die Anzahl der im JQuery-Objekt enthaltenen Elemente zurück. Beispiel:

console.log ( $('body') .length); //1

Der Quellcode dieser vier Attribute lautet wie folgt:

  constructor: jQuery,


  // Start with an empty selector
  selector: "",

  // The current version of jQuery being used
  jquery: "1.7.1",

  // The default length of a jQuery object is 0
  length: 0,

Größenmethode

// The number of elements contained in the matched element set
  size: function() {
    return this.length;
  },

Diese Methode gibt das Längenattribut des JQuery-Objekts zurück. Es wird empfohlen, das Längenattribut zu verwenden, um unnötigen Funktionsaufrufaufwand zu reduzieren

toArray-Methode

toArray: function() {
    return slice.call( this, 0 );
  },

Alle DOM-Elemente in der jQuery-Sammlung in einem Array wiederherstellen.

alert($('li').toArray());
[<li id="foo">, <li id="bar">]

Zuallererst wurde die Slice-Methode hier im Konstruktor von jQuery beibehalten, bei dem es sich um die Prototyp-Methode von Array handelt

// Save a reference to some core methods
87 toString = Object.prototype.toString,
88 hasOwn = Object.prototype.hasOwnProperty,
89 push = Array.prototype.push,
90 slice = Array.prototype.slice,
91 trim = String.prototype.trim,
92 indexOf = Array.prototype.indexOf,

Implementieren Sie den Objektidentitätswechsel über die Aufrufmethode. Die Übergabe des Parameters 0 bedeutet, dass diese Methode kein sauberes Array zurückgibt, das ein reines Array ist Klassen in der Zukunft Diese Methode kann auch für die Konvertierung in Array-Form verwendet werden, zum Beispiel:

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'/>
    <title>jQuery源码分析-原型属性和方法</title>
  </head>
  <body>
    <div>
    </div>
    <div></div>   
  </body>
  <script src='jquery-1.7.1.js'></script>
  <script>
  var divs=document.getElementsByTagName('div');
  console.log(divs); //[div, div]
  alert(divs instanceof Array); //fasle

  alert(Array.prototype.slice.call(divs,0) instanceof Array); //true
  </script>
</html>

Das Erlernen des jqeury-Quellcodes ist also nicht nur hilfreich für die Verwendung von jquery, sondern Sie können auch viele Fähigkeiten zur Verwendung von js erlernen

Methode abrufen

// Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
  get: function( num ) {
    return num == null &#63;

      // Return a 'clean' array
      this.toArray() :

      // Return just the object
      ( num < 0 &#63; this[ this.length + num ] : this[ num ] );
  },

Diese Methode funktioniert, indem sie eines der Elemente im jquery-Objekt findet und das ursprüngliche js-Knotenelementobjekt anstelle des jquery-Objekts zurückgibt. Dies unterscheidet sich von der eq-Methode. Diese Methode akzeptiert einen Parameter, wenn der Parameter nicht vorhanden ist. Rufen Sie dann die toArray-Methode auf, um ein Array zurückzugeben, das alle Elemente enthält. Wenn die Zahl größer als 0 ist, kann sie direkt durch Subskription erhalten werden. Wenn es sich um eine negative Zahl handelt, wird sie durch Addition zur Länge erhalten Methoden müssen wir positive und negative Indizes unterstützen. Wenn das Geschriebene keine Zahl ist oder die Länge der im aktuellen Objekt enthaltenen Elemente überschreitet, wird undefiniert.

zurückgegeben.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie ein JavaScript-Skript, um einen Scrolleffekt zu erzielenNächster Artikel：So verwenden Sie ein JavaScript-Skript, um einen Scrolleffekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen