jQuery - podstawy

jQuery to framework zbudowany przy użyciu możliwości JavaScript. Możesz więc korzystać ze wszystkich funkcji i innych możliwości dostępnych w JavaScript. Ten rozdział wyjaśnia większość podstawowych pojęć, ale często używanych w jQuery.

Strunowy

Łańcuch w JavaScript to niezmienny obiekt, który nie zawiera żadnego, jednego lub wielu znaków. Poniżej znajdują się prawidłowe przykłady ciągu JavaScript -

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

Liczby

Liczby w JavaScript są wartościami IEEE 754 w 64-bitowym formacie podwójnej precyzji. Są niezmienne, podobnie jak struny. Poniżej znajdują się prawidłowe przykłady numerów JavaScript -

5350
120.27
0.26

Boolean

Wartość logiczna w JavaScript może być albo true lub false. Jeśli liczba jest równa zero, domyślnie przyjmuje wartość fałsz. Jeśli pusty ciąg ma wartość domyślną false.

Poniżej znajdują się prawidłowe przykłady wartości logicznej JavaScript -

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

Obiekty

JavaScript bardzo dobrze obsługuje koncepcję Object. Możesz utworzyć obiekt używając literału obiektu w następujący sposób -

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

Możesz zapisywać i odczytywać właściwości obiektu za pomocą notacji kropkowej w następujący sposób -

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

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

Tablice

Tablice można definiować za pomocą literału tablicowego w następujący sposób -

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

Tablica ma rozszerzenie length właściwość przydatna do iteracji -

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

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

Funkcje

Funkcja w JavaScript może być nazwana lub anonimowa. Nazwaną funkcję można zdefiniować za pomocą słowa kluczowego function w następujący sposób -

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

Funkcja anonimowa może być zdefiniowana w podobny sposób jak normalna funkcja, ale nie miałaby żadnej nazwy.

Anonimową funkcję można przypisać do zmiennej lub przekazać do metody, jak pokazano poniżej.

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

JQuery bardzo często korzysta z funkcji anonimowych w następujący sposób -

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

Argumenty

Argumenty zmiennych JavaScript to rodzaj tablicy, która ma właściwość length . Poniższy przykład wyjaśnia to bardzo dobrze -

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

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

Obiekt arguments ma również właściwość callee , która odnosi się do funkcji, w której się znajdujesz. Na przykład -

function func() {
   return arguments.callee; 
}

func();                // ==> func

Kontekst

Znane słowo kluczowe JavaScript thiszawsze odnosi się do aktualnego kontekstu. W ramach funkcjithis kontekst może się zmienić, w zależności od wywołania funkcji -

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

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

Kontekst wywołania funkcji można określić za pomocą metod wbudowanych w funkcję call() i apply() metody.

Różnica między nimi polega na tym, jak przekazują argumenty. Call przekazuje wszystkie argumenty jako argumenty do funkcji, podczas gdy Apply akceptuje tablicę jako argumenty.

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

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

Zakres

Zakres zmiennej to region twojego programu, w którym jest zdefiniowana. Zmienna JavaScript będzie miała tylko dwa zakresy.

• Global Variables - Zmienna globalna ma zasięg globalny, co oznacza, że ​​jest zdefiniowana wszędzie w kodzie JavaScript.

• Local Variables- Zmienna lokalna będzie widoczna tylko w ramach funkcji, w której została zdefiniowana. Parametry funkcji są zawsze lokalne dla tej funkcji.

W treści funkcji zmienna lokalna ma pierwszeństwo przed zmienną globalną o tej samej nazwie -

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

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

Oddzwonić

Funkcja zwrotna to zwykła funkcja JavaScript przekazana do jakiejś metody jako argument lub opcja. Niektóre wywołania zwrotne są po prostu zdarzeniami wywoływanymi, aby dać użytkownikowi szansę zareagowania, gdy zostanie wyzwolony określony stan.

System zdarzeń jQuery używa takich wywołań zwrotnych wszędzie na przykład -

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

Większość wywołań zwrotnych dostarcza argumentów i kontekstu. W przykładzie obsługi zdarzeń wywołanie zwrotne jest wywoływane z jednym argumentem - Event.

Niektóre wywołania zwrotne są wymagane, aby coś zwrócić, inne sprawiają, że wartość zwracana jest opcjonalna. Aby zapobiec przesłaniu formularza, procedura obsługi zdarzenia przesyłania może zwrócić false w następujący sposób -

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

Domknięcia

Zamknięcia są tworzone za każdym razem, gdy dostęp do zmiennej zdefiniowanej poza bieżącym zakresem jest uzyskiwany z jakiegoś zakresu wewnętrznego.

Poniższy przykład pokazuje, jak zmienna counter jest widoczny w funkcjach tworzenia, inkrementacji i drukowania, ale nie poza nimi -

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

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

Ten wzorzec umożliwia tworzenie obiektów za pomocą metod, które operują na danych niewidocznych dla świata zewnętrznego. Należy zauważyć żedata hiding to podstawa programowania obiektowego.

Wzorzec proxy

Proxy to obiekt, którego można używać do kontrolowania dostępu do innego obiektu. Implementuje ten sam interfejs, co ten inny obiekt i przekazuje do niego wszelkie wywołania metod. Ten inny obiekt jest często nazywany prawdziwym podmiotem.

Zamiast tego rzeczywistego podmiotu można utworzyć instancję proxy i umożliwić zdalny dostęp do niego. Możemy zapisać metodę setArray jQuery w zamknięciu i nadpisać ją w następujący sposób -

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

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

Powyższe zawija swój kod w funkcję, aby ukryć zmienną proxy . Następnie proxy rejestruje wszystkie wywołania metody i deleguje wywołanie do metody oryginalnej. Użycie apply (this, arguments) gwarantuje, że wywołujący nie będzie w stanie zauważyć różnicy między metodą oryginalną a metodą proxy.

Wbudowane funkcje

JavaScript jest dostarczany wraz z przydatnym zestawem wbudowanych funkcji. Te metody mogą być używane do manipulowania ciągami znaków, liczbami i datami.

Poniżej znajdują się ważne funkcje JavaScript -

Sr.No.	Metoda i opis
1	charAt() Zwraca znak o określonym indeksie.
2	concat() Łączy tekst dwóch ciągów i zwraca nowy ciąg.
3	forEach() Wywołuje funkcję dla każdego elementu tablicy.
4	indexOf() Zwraca indeks w wywołującym obiekcie String pierwszego wystąpienia określonej wartości lub -1, jeśli nie zostanie znaleziony.
5	length() Zwraca długość ciągu.
6	pop() Usuwa ostatni element z tablicy i zwraca ten element.
7	push() Dodaje jeden lub więcej elementów na końcu tablicy i zwraca nową długość tablicy.
8	reverse() Odwraca kolejność elementów tablicy - pierwszy staje się ostatnim, a ostatni pierwszym.
9	sort() Sortuje elementy tablicy.
10	substr() Zwraca znaki w ciągu rozpoczynającym się w określonej lokalizacji przez określoną liczbę znaków.
11	toLowerCase() Zwraca wartość ciągu wywołującego przekonwertowaną na małe litery.
12	toString() Zwraca ciąg znaków reprezentujący wartość liczby.
13	toUpperCase() Zwraca wywołującą wartość ciągu zamienioną na wielkie litery.

Model obiektu dokumentu

Model obiektu dokumentu to struktura drzewiasta różnych elementów HTML w następujący sposób -

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

To da następujący wynik -

Poniżej znajdują się ważne punkty dotyczące powyższej struktury drzewa -

• <html> jest przodkiem wszystkich innych elementów; innymi słowy, wszystkie pozostałe elementy są potomkami tagu <html>.

• Elementy <head> i <body> są nie tylko potomkami, ale także elementami podrzędnymi <html>.

• Podobnie, oprócz tego, że jest przodkiem <head> i <body>, <html> jest także ich rodzicem.

• Elementy <p> są dziećmi (i potomkami) elementów <div>, potomkami elementów <body> i <html> oraz rodzeństwem innych elementów <p>.

Podczas nauki pojęć jQuery pomocne będzie zrozumienie DOM. Jeśli nie jesteś świadomy DOM, sugerowałbym zapoznanie się z naszym prostym samouczkiem dotyczącym DOM Tutorial .