jQuery - Grundlagen

jQuery ist ein Framework, das mit JavaScript-Funktionen erstellt wurde. Sie können also alle in JavaScript verfügbaren Funktionen und sonstigen Funktionen nutzen. In diesem Kapitel werden die meisten grundlegenden Konzepte erläutert, die jedoch in jQuery häufig verwendet werden.

String

Eine Zeichenfolge in JavaScript ist ein unveränderliches Objekt, das keine, ein oder mehrere Zeichen enthält. Im Folgenden finden Sie die gültigen Beispiele für eine JavaScript-Zeichenfolge.

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Zahlen

Zahlen in JavaScript sind IEEE 754-Werte im 64-Bit-Format mit doppelter Genauigkeit. Sie sind unveränderlich, genau wie Saiten. Im Folgenden finden Sie die gültigen Beispiele für JavaScript-Nummern:

5350
120.27
0.26

Boolescher Wert

Ein Boolescher Wert in JavaScript kann entweder sein true oder false. Wenn eine Zahl Null ist, ist sie standardmäßig false. Wenn eine leere Zeichenfolge standardmäßig false ist.

Im Folgenden finden Sie die gültigen Beispiele für einen JavaScript-Booleschen Wert -

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

Objekte

JavaScript unterstützt das Objektkonzept sehr gut. Sie können ein Objekt mit dem Objektliteral wie folgt erstellen:

var emp = {
   name: "Zara",
   age: 10
};

Sie können Eigenschaften eines Objekts mithilfe der Punktnotation wie folgt schreiben und lesen:

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

Arrays

Sie können Arrays mithilfe des Array-Literal wie folgt definieren:

var x = [];
var y = [1, 2, 3, 4, 5];

Ein Array hat eine length Eigenschaft, die für die Iteration nützlich ist -

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

Funktionen

Eine Funktion in JavaScript kann entweder benannt oder anonym sein. Eine benannte Funktion kann mit dem Funktionsschlüsselwort wie folgt definiert werden :

function named(){
   // do some stuff here
}

Eine anonyme Funktion kann auf ähnliche Weise wie eine normale Funktion definiert werden, hat jedoch keinen Namen.

Eine anonyme Funktion kann einer Variablen zugewiesen oder wie unten gezeigt an eine Methode übergeben werden.

var handler = function (){
   // do some stuff here
}

JQuery verwendet sehr häufig anonyme Funktionen wie folgt:

$(document).ready(function(){
   // do some stuff here
});

Argumente

JavaScript variable Argumente ist eine Art von Anordnung , die aufweist Länge Eigenschaft. Das folgende Beispiel erklärt es sehr gut -

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

Das Argumentobjekt verfügt auch über eine Eigenschaft callee , die sich auf die Funktion bezieht, in der Sie sich befinden. Zum Beispiel -

function func() {
   return arguments.callee; 
}

func();                // ==> func

Kontext

JavaScript berühmtes Schlüsselwort thisbezieht sich immer auf den aktuellen Kontext. Innerhalb einer Funktionthis Der Kontext kann sich ändern, je nachdem, wie die Funktion aufgerufen wird.

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Sie können den Kontext für einen Funktionsaufruf mithilfe der in die Funktion integrierten Methoden angeben call() und apply() Methoden.

Der Unterschied zwischen ihnen besteht darin, wie sie Argumente übergeben. Call übergibt alle Argumente als Argumente an die Funktion, während apply ein Array als Argumente akzeptiert.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Umfang

Der Bereich einer Variablen ist der Bereich Ihres Programms, in dem sie definiert ist. Die JavaScript-Variable hat nur zwei Bereiche.

• Global Variables - Eine globale Variable hat einen globalen Gültigkeitsbereich, dh sie wird überall in Ihrem JavaScript-Code definiert.

• Local Variables- Eine lokale Variable ist nur innerhalb einer Funktion sichtbar, in der sie definiert ist. Funktionsparameter sind für diese Funktion immer lokal.

Innerhalb eines Funktionskörpers hat eine lokale Variable Vorrang vor einer gleichnamigen globalen Variablen -

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Zurückrufen

Ein Rückruf ist eine einfache JavaScript-Funktion, die als Argument oder Option an eine Methode übergeben wird. Einige Rückrufe sind nur Ereignisse, die aufgerufen werden, um dem Benutzer die Möglichkeit zu geben, zu reagieren, wenn ein bestimmter Status ausgelöst wird.

Das Ereignissystem von jQuery verwendet solche Rückrufe beispielsweise überall -

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

Die meisten Rückrufe liefern Argumente und einen Kontext. Im Event-Handler-Beispiel wird der Rückruf mit einem Argument aufgerufen, einem Ereignis.

Einige Rückrufe sind erforderlich, um etwas zurückzugeben, andere machen diesen Rückgabewert optional. Um eine Formularübermittlung zu verhindern, kann ein Übermittlungsereignishandler wie folgt false zurückgeben:

$("#myform").submit(function() {
   return false;
});

Verschlüsse

Abschlüsse werden immer dann erstellt, wenn auf eine Variable, die außerhalb des aktuellen Bereichs definiert ist, aus einem inneren Bereich heraus zugegriffen wird.

Das folgende Beispiel zeigt, wie die Variable counter ist innerhalb der Funktionen zum Erstellen, Inkrementieren und Drucken sichtbar, jedoch nicht außerhalb von -

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Mit diesem Muster können Sie Objekte mit Methoden erstellen, die mit Daten arbeiten, die für die Außenwelt nicht sichtbar sind. Es sollte angemerkt werden, dassdata hiding ist die Basis der objektorientierten Programmierung.

Proxy-Muster

Ein Proxy ist ein Objekt, mit dem der Zugriff auf ein anderes Objekt gesteuert werden kann. Es implementiert dieselbe Schnittstelle wie dieses andere Objekt und leitet alle Methodenaufrufe an dieses weiter. Dieses andere Objekt wird oft als reales Subjekt bezeichnet.

Ein Proxy kann anstelle dieses realen Subjekts instanziiert werden und den Remotezugriff darauf ermöglichen. Wir können die setArray-Methode von jQuery in einem Closure speichern und wie folgt überschreiben:

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

Das Obige umschließt seinen Code mit einer Funktion zum Ausblenden der Proxy- Variablen. Der Proxy protokolliert dann alle Aufrufe an die Methode und delegiert den Aufruf an die ursprüngliche Methode. Die Verwendung von apply (dies, Argumente) garantiert, dass der Aufrufer den Unterschied zwischen der ursprünglichen und der Proxy-Methode nicht bemerken kann.

Eingebaute Funktionen

JavaScript enthält eine Reihe nützlicher integrierter Funktionen. Diese Methoden können verwendet werden, um Zeichenfolgen, Zahlen und Daten zu bearbeiten.

Im Folgenden finden Sie wichtige JavaScript-Funktionen:

Sr.Nr.	Methode & Beschreibung
1	charAt() Gibt das Zeichen am angegebenen Index zurück.
2	concat() Kombiniert den Text zweier Zeichenfolgen und gibt eine neue Zeichenfolge zurück.
3	forEach() Ruft eine Funktion für jedes Element im Array auf.
4	indexOf() Gibt den Index innerhalb des aufrufenden String-Objekts des ersten Auftretens des angegebenen Werts zurück oder -1, wenn er nicht gefunden wird.
5	length() Gibt die Länge der Zeichenfolge zurück.
6	pop() Entfernt das letzte Element aus einem Array und gibt dieses Element zurück.
7	push() Fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue Länge des Arrays zurück.
8	reverse() Kehrt die Reihenfolge der Elemente eines Arrays um - das erste wird das letzte und das letzte wird das erste.
9	sort() Sortiert die Elemente eines Arrays.
10	substr() Gibt die Zeichen in einer Zeichenfolge zurück, die an der angegebenen Stelle durch die angegebene Anzahl von Zeichen beginnt.
11	toLowerCase() Gibt den aufrufenden Zeichenfolgenwert zurück, der in Kleinbuchstaben konvertiert wurde.
12	toString() Gibt die Zeichenfolgendarstellung des Zahlenwerts zurück.
13	toUpperCase() Gibt den aufrufenden Zeichenfolgenwert zurück, der in Großbuchstaben konvertiert wurde.

Das Dokumentobjektmodell

Das Dokumentobjektmodell ist eine Baumstruktur verschiedener HTML-Elemente wie folgt:

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Im Folgenden sind die wichtigen Punkte zur obigen Baumstruktur aufgeführt:

• Das <html> ist der Vorfahr aller anderen Elemente. Mit anderen Worten, alle anderen Elemente sind Nachkommen von <html>.

• Die Elemente <head> und <body> sind nicht nur Nachkommen, sondern auch untergeordnete Elemente von <html>.

• Ebenso ist <html> nicht nur der Vorfahr von <head> und <body>, sondern auch deren Eltern.

• Die <p> -Elemente sind untergeordnete Elemente (und Nachkommen) von <div>, Nachkommen von <body> und <html> und Geschwister der anderen <p> -Elemente.

Wenn Sie jQuery-Konzepte lernen, ist es hilfreich, sich mit DOM vertraut zu machen. Wenn Sie DOM nicht kennen, würde ich empfehlen, unser einfaches Tutorial zu DOM-Tutorial durchzuarbeiten .