jQuery - Szybki przewodnik

Co to jest jQuery?

jQuery to szybka i zwięzła biblioteka JavaScript stworzona przez Johna Resiga w 2006 roku z ładnym mottem: Write less, do more. jQuery upraszcza przeglądanie dokumentów HTML, obsługę zdarzeń, animację i interakcje Ajax w celu szybkiego tworzenia stron internetowych. jQuery to zestaw narzędzi JavaScript zaprojektowany w celu uproszczenia różnych zadań poprzez pisanie mniejszej ilości kodu. Oto lista ważnych podstawowych funkcji obsługiwanych przez jQuery -

DOM manipulation - jQuery ułatwiło wybieranie elementów DOM, negocjowanie ich i modyfikowanie ich zawartości za pomocą silnika selektora open source w różnych przeglądarkach o nazwie Sizzle.
Event handling - jQuery oferuje elegancki sposób przechwytywania szerokiej gamy zdarzeń, takich jak kliknięcie linku przez użytkownika, bez konieczności zaśmiecania samego kodu HTML programami obsługi zdarzeń.
AJAX Support - jQuery bardzo pomaga w tworzeniu responsywnej i bogatej w funkcje witryny przy użyciu technologii AJAX.
Animations - jQuery zawiera wiele wbudowanych efektów animacji, których możesz używać w swoich witrynach internetowych.
Lightweight - Biblioteka jQuery jest bardzo lekką biblioteką - około 19 KB (zminimalizowana i spakowana gzipem).
Cross Browser Support - jQuery obsługuje wiele przeglądarek i działa dobrze w IE 6.0+, FF 2.0+, Safari 3.0+, Chrome i Opera 9.0+
Latest Technology - jQuery obsługuje selektory CSS3 i podstawową składnię XPath.

Jak korzystać z jQuery?

Istnieją dwa sposoby korzystania z jQuery.

Local Installation - Możesz pobrać bibliotekę jQuery na swój komputer lokalny i dołączyć ją do kodu HTML.
CDN Based Version - Bibliotekę jQuery można dołączyć do kodu HTML bezpośrednio z sieci Content Delivery Network (CDN).

Instalacja lokalna

Przejdź do https://jquery.com/download/ aby pobrać najnowszą dostępną wersję.
Teraz umieść pobrane jquery-2.1.3.min.js plik w katalogu Twojej witryny, np. / jquery.

Przykład

Teraz możesz dołączyć bibliotekę jquery do swojego pliku HTML w następujący sposób -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

To da następujący wynik -

Wersja oparta na CDN

Bibliotekę jQuery można dołączyć do kodu HTML bezpośrednio z sieci Content Delivery Network (CDN). Google i Microsoft zapewniają dostarczanie treści do najnowszej wersji.

Używamy wersji Google CDN biblioteki w całym tym samouczku.

Przykład

Teraz przepiszmy powyższy przykład, używając biblioteki jQuery z Google CDN.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

To da następujący wynik -

Jak wywołać funkcje biblioteki jQuery?

Jak prawie wszystko, co robimy, gdy jQuery odczytuje lub manipuluje modelem obiektowym dokumentu (DOM), musimy się upewnić, że zaczynamy dodawać zdarzenia itp., Gdy tylko DOM będzie gotowy.

Jeśli chcesz, aby zdarzenie działało na Twojej stronie, powinieneś wywołać je wewnątrz funkcji $ (document) .ready (). Wszystko w nim zostanie załadowane, gdy tylko zostanie załadowany DOM, a przed załadowaniem zawartości strony.

Aby to zrobić, rejestrujemy gotowe zdarzenie dla dokumentu w następujący sposób -

$(document).ready(function() {
   // do stuff when DOM is ready
});

Aby wywołać dowolną funkcję biblioteki jQuery, użyj tagów skryptu HTML, jak pokazano poniżej -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

To da następujący wynik -

Jak korzystać ze skryptów niestandardowych?

Nasz niestandardowy kod lepiej jest napisać w niestandardowym pliku JavaScript: custom.jsw następujący sposób -

/* Filename: custom.js */
$(document).ready(function() { $("div").click(function() {
      alert("Hello, world!");
   });
});

Teraz możemy dołączyć custom.js plik w naszym pliku HTML w następujący sposób -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

To da następujący wynik -

Korzystanie z wielu bibliotek

Możesz używać wielu bibliotek jednocześnie, nie powodując wzajemnych konfliktów. Na przykład można używać razem bibliotek javascript jQuery i MooTool. Więcej szczegółów można znaleźć w metodzie jQuery noConflict .

Co jest następne ?

Nie przejmuj się zbytnio, jeśli nie rozumiesz powyższych przykładów. Wkrótce zrozumiecie je w kolejnych rozdziałach.

W następnym rozdziale spróbujemy omówić kilka podstawowych pojęć pochodzących z konwencjonalnego JavaScript.

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
});

Możesz określić kontekst wywołania funkcji przy użyciu 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ę na reakcję, gdy zostanie uruchomiony 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 czynią tę wartość zwracaną opcjonalną. 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 z metodami operującymi 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 wartość ciągu wywołującego przekonwertowaną 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ęć związanych z jQuery pomocne będzie zrozumienie DOMU, jeśli nie jesteś świadomy DOM, sugerowałbym zapoznanie się z naszym prostym samouczkiem dotyczącym DOM Tutorial .

Biblioteka jQuery wykorzystuje moc selektorów kaskadowych arkuszy stylów (CSS), aby umożliwić nam szybki i łatwy dostęp do elementów lub grup elementów w modelu obiektu dokumentu (DOM).

Selektor jQuery to funkcja, która wykorzystuje wyrażenia, aby znaleźć pasujące elementy z DOM na podstawie podanych kryteriów. Możesz po prostu powiedzieć, że selektory służą do wybierania jednego lub więcej elementów HTML za pomocą jQuery. Po wybraniu elementu możemy na nim wykonać różne operacje.

Funkcja fabryczna $ ()

Selektory jQuery zaczynają się od znaku dolara i nawiasów - $(). Funkcja fabryczna$() korzysta z następujących trzech cegiełek przy wyborze elementów w danym dokumencie -

Sr.No.	Selektor i opis
1	Tag Name Reprezentuje nazwę tagu dostępną w DOM. Na przykład$('p') zaznacza wszystkie akapity <p> w dokumencie.
2	Tag ID Reprezentuje tag dostępny z podanym identyfikatorem w DOM. Na przykład$('#some-id') wybiera pojedynczy element w dokumencie, który ma identyfikator some-id.
3	Tag Class Reprezentuje tag dostępny z daną klasą w DOM. Na przykład$('.some-class') wybiera wszystkie elementy w dokumencie, które mają klasę jakiejś klasy.

Wszystkie powyższe elementy mogą być używane samodzielnie lub w połączeniu z innymi selektorami. Wszystkie selektory jQuery działają na tej samej zasadzie, z wyjątkiem pewnych poprawek.

NOTE - Funkcja fabryczna $() jest synonimem jQuery()funkcjonować. Więc jeśli używasz jakiejkolwiek innej biblioteki JavaScript, gdzie$ znak jest w konflikcie z czymś innym, możesz go zastąpić $ podpisać jQuery name i możesz użyć funkcji jQuery() zamiast $().

Przykład

Poniżej znajduje się prosty przykład wykorzystujący selektor znaczników. Spowoduje to wybranie wszystkich elementów z nazwą znacznikap.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

To da następujący wynik -

Jak korzystać z selektorów?

Selektory są bardzo przydatne i byłyby wymagane na każdym kroku podczas korzystania z jQuery. Otrzymują dokładnie taki element, jaki chcesz, z dokumentu HTML.

Poniższa tabela zawiera listę kilku podstawowych selektorów i objaśnia je przykładami.

Sr.No.	Selektor i opis
1	Nazwa Wybiera wszystkie elementy, które pasują do danego elementu Name.
2	#ID Wybiera pojedynczy element, który pasuje do podanego ID.
3	.Klasa Wybiera wszystkie elementy pasujące do podanego Class.
4	Uniwersalny (*) Wybiera wszystkie elementy dostępne w DOM.
5	Wiele elementów E, F, G. Wybiera połączone wyniki wszystkich określonych selektorów E, F lub G.

Przykłady selektorów

Podobnie jak w powyższej składni i przykładach, poniższe przykłady pozwolą Ci zrozumieć, jak używać innego typu innych przydatnych selektorów -

Tutaj masz inny typ innych przydatnych selektorów -

Sr.No.	Selektor i opis
1	*$('')** Ten selektor wybiera wszystkie elementy w dokumencie.
2	*$("p > ")** Ten selektor wybiera wszystkie elementy, które są dziećmi elementu akapitu.
3	$("#specialID") Ta funkcja selektora pobiera element z id = "specialID".
4	$(".specialClass") Ten selektor pobiera wszystkie elementy, które mają klasę specialClass .
5	$("li:not(.myclass)") Wybiera wszystkie elementy dopasowane przez <li>, które nie mają class = "myclass".
6	$("a#specialID.specialClass") Ten selektor pasuje powiązania z identyfikatorem specialID i klasy specialClass .
7	$("p a.specialClass") Ten selektor dopasowuje linki z klasą specialClass zadeklarowaną w elementach <p>.
8	$("ul li:first") Ten selektor pobiera tylko pierwszy element <li> z <ul>.
9	$("#container p") Wybiera wszystkie elementy dopasowane przez <p>, które są potomkami elementu, który ma identyfikator kontenera .
10	$("li > ul") Wybiera wszystkie elementy dopasowane przez <ul>, które są dziećmi elementu dopasowanego przez <li>
11	$("strong + em") Wybiera wszystkie elementy dopasowane przez <em>, które bezpośrednio następują po elemencie równorzędnym dopasowanym przez <strong>.
12	$("p ~ ul") Wybiera wszystkie elementy dopasowane przez <ul>, które następują po elemencie równorzędnym dopasowanym przez <p>.
13	$("code, em, strong") Wybiera wszystkie elementy dopasowane przez <code>, <em> lub <strong>.
14	$("p strong, .myclass") Wybiera wszystkie elementy dopasowane przez <strong>, które są potomkami elementu dopasowanego przez <p>, a także wszystkie elementy, które mają klasę myclass .
15	$(":empty") Wybiera wszystkie elementy, które nie mają dzieci.
16	$("p:empty") Wybiera wszystkie elementy dopasowane przez <p>, które nie mają dzieci.
17	$("div[p]") Wybiera wszystkie elementy dopasowane przez <div>, które zawierają element dopasowany przez <p>.
18	$("p[.myclass]") Wybiera wszystkie elementy dopasowane przez <p>, które zawierają element z klasą myclass .
19	$("a[@rel]") Wybiera wszystkie elementy dopasowane przez <a>, które mają atrybut rel.
20	$("input[@name = myname]") Wybiera wszystkie elementy dopasowane przez <input>, które mają wartość nazwy dokładnie równą myname.
21	$("input[@name^=myname]") Wybiera wszystkie elementy dopasowane przez <input>, które mają wartość nazwy zaczynającą się od myname .
22	$("a[@rel$=self]") Wybiera wszystkie elementy dopasowane przez <a>, które mają relwartość atrybutu kończąca się na self .
23	*$("a[@href=domain.com]")** Wybiera wszystkie elementy dopasowane przez <a>, które mają wartość href zawierającą domain.com.
24	$("li:even") Wybiera wszystkie elementy dopasowane przez <li>, które mają parzystą wartość indeksu.
25	$("tr:odd") Wybiera wszystkie elementy dopasowane przez <tr>, które mają nieparzystą wartość indeksu.
26	$("li:first") Wybiera pierwszy element <li>.
27	$("li:last") Wybiera ostatni element <li>.
28	$("li:visible") Wybiera wszystkie elementy dopasowane przez <li>, które są widoczne.
29	$("li:hidden") Wybiera wszystkie elementy dopasowane przez <li>, które są ukryte.
30	$(":radio") Zaznacza wszystkie przyciski opcji w formularzu.
31	$(":checked") Zaznacza wszystkie zaznaczone pola w formularzu.
32	$(":input") Zaznacza tylko elementy formularza (wejście, zaznacz, obszar tekstu, przycisk).
33	$(":text") Zaznacza tylko elementy tekstowe (input [type = text]).
34	$("li:eq(2)") Wybiera trzeci element <li>.
35	$("li:eq(4)") Wybiera piąty element <li>.
36	$("li:lt(2)") Wybiera wszystkie elementy dopasowane przez element <li> przed trzecim; innymi słowy, pierwsze dwa <li> elementy.
37	$("p:lt(3)") wybiera wszystkie elementy dopasowane przez <p> elementy przed czwartym; innymi słowy, pierwsze trzy <p> elementy.
38	$("li:gt(1)") Wybiera wszystkie elementy dopasowane przez <li> po drugim.
39	$("p:gt(2)") Wybiera wszystkie elementy dopasowane przez <p> po trzecim.
40	$("div/p") Wybiera wszystkie elementy dopasowane przez <p>, które są dziećmi elementu dopasowanego przez <div>.
41	$("div//code") Wybiera wszystkie elementy dopasowane przez <code>, które są potomkami elementu dopasowanego przez <div>.
42	$("//p//a") Wybiera wszystkie elementy dopasowane przez <a>, które są potomkami elementu dopasowanego przez <p>
43	$("li:first-child") Wybiera wszystkie elementy dopasowane przez <li>, które są pierwszym dzieckiem ich rodzica.
44	$("li:last-child") Wybiera wszystkie elementy dopasowane przez <li>, które są ostatnim dzieckiem ich rodzica.
45	$(":parent") Wybiera wszystkie elementy, które są rodzicami innego elementu, w tym tekst.
46	$("li:contains(second)") Zaznacza wszystkie elementy dopasowane przez <li>, które zawierają tekst jako sekundę.

Możesz użyć wszystkich powyższych selektorów z dowolnym elementem HTML / XML w ogólny sposób. Na przykład jeśli selector$("li:first") działa wtedy dla elementu <li> $("p:first") działałoby również dla elementu <p>.

Niektóre z najbardziej podstawowych komponentów, którymi możemy manipulować, jeśli chodzi o elementy DOM, to właściwości i atrybuty przypisane do tych elementów.

Większość z tych atrybutów jest dostępna za pośrednictwem JavaScript jako właściwości węzła DOM. Niektóre z bardziej powszechnych właściwości to -

className
tagName
id
href
title
rel
src

Rozważ następujące znaczniki HTML dla elementu obrazu -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

W znaczniku tego elementu nazwa tagu to img, a znaczniki id, src, alt, class i title reprezentują atrybuty elementu, z których każdy składa się z nazwy i wartości.

jQuery daje nam środki do łatwego manipulowania atrybutami elementu i daje nam dostęp do elementu, dzięki czemu możemy również zmieniać jego właściwości.

Uzyskaj wartość atrybutu

Plik attr() metoda może służyć do pobierania wartości atrybutu z pierwszego elementu w dopasowanym zestawie lub ustawiania wartości atrybutów na wszystkie dopasowane elementy.

Przykład

Poniżej znajduje się prosty przykład, który pobiera atrybut tytułu tagu <em> i ustawia wartość <div id = "divid"> na tę samą wartość -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

To da następujący wynik -

Ustaw wartość atrybutu

Plik attr(name, value) można użyć do ustawienia nazwanego atrybutu na wszystkie elementy w opakowanym zestawie przy użyciu przekazanej wartości.

Przykład

Poniżej znajduje się prosty przykład, który set src atrybut tagu obrazu do prawidłowej lokalizacji -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

To da następujący wynik -

Stosowanie stylów

Plik addClass( classes )można zastosować zdefiniowane arkusze stylów do wszystkich dopasowanych elementów. Możesz określić wiele klas oddzielonych spacjami.

Przykład

Poniżej znajduje się prosty przykład, który ustawia class atrybut tagu para <p> -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected"); $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

To da następujący wynik -

Metody atrybutów

Poniższa tabela zawiera listę przydatnych metod, których można użyć do manipulowania atrybutami i właściwościami -

Sr.No.	Metody i opis
1	attr (właściwości) Ustaw obiekt klucz / wartość jako właściwości dla wszystkich dopasowanych elementów.
2	attr (klucz, fn) Ustaw pojedynczą właściwość na obliczoną wartość dla wszystkich dopasowanych elementów.
3	removeAttr (nazwa) Usuń atrybut z każdego z dopasowanych elementów.
4	hasClass (klasa) Zwraca wartość true, jeśli określona klasa występuje w co najmniej jednym zestawie dopasowanych elementów.
5	removeClass (klasa) Usuwa wszystkie lub określone klasy z zestawu dopasowanych elementów.
6	toggleClass (klasa) Dodaje określoną klasę, jeśli nie jest obecna, usuwa określoną klasę, jeśli jest obecna.
7	html () Pobierz zawartość html (innerHTML) pierwszego dopasowanego elementu.
8	html (val) Ustaw zawartość HTML każdego dopasowanego elementu.
9	tekst () Uzyskaj połączoną zawartość tekstową wszystkich dopasowanych elementów.
10	tekst (val) Ustaw zawartość tekstową wszystkich dopasowanych elementów.
11	val () Pobierz wartość wejściową pierwszego dopasowanego elementu.
12	val (val) Ustaw atrybut wartość każdego dopasowanego elementu, jeśli jest wywoływany na <input>, ale jeśli jest wywoływany na <select> z przekazaną wartością <option>, wówczas przekazywana opcja zostanie wybrana, jeśli zostanie wywołana w polu wyboru lub polu radiowym wszystkie pasujące pola wyboru i radiobox zostaną zaznaczone.

Przykłady

Podobnie jak w powyższej składni i przykładach, poniższe przykłady pomogą Ci zrozumieć, jak używać różnych metod atrybutów w różnych sytuacjach -

Oto pełna lista metod atrybutów w różnych sytuacjach -

Sr.No.	Selektor i opis
1	$("#myID").attr("custom") To zwróci wartość atrybutu niestandardowego dla pierwszego elementu pasującego do identyfikatora myID.
2	$("img").attr("alt", "Sample Image") To ustawia alt atrybut wszystkich obrazów na nową wartość „Przykładowy obraz”.
3	$("input").attr({ value: "", title: "Please enter a value" }); Ustawia wartość wszystkich elementów <input> na pusty ciąg, a także ustawia Przykład jQuery na ciąg Wprowadź wartość .
4	$("a[href^=https://]").attr("target","_blank") Wybiera wszystkie linki z atrybutem href zaczynającym się od https: // i ustawia jego atrybut docelowy na _blank .
5	$("a").removeAttr("target") Spowoduje to usunięcie atrybutu docelowego wszystkich linków.
6	$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Spowoduje to zmianę atrybutu disabled na wartość „disabled” podczas klikania przycisku Submit.
7	$("p:last").hasClass("selected") Ta wartość zwraca prawdę, jeśli ostatni znacznik <p> ma wybraną skojarzoną klasę .
8	$("p").text() Zwraca ciąg zawierający połączoną zawartość tekstową wszystkich dopasowanych elementów <p>.
9	$("p").text("<i>Hello World</i>") Spowoduje to ustawienie „<I> Hello World </I>” jako treści tekstowej pasujących elementów <p>.
10	$("p").html() Zwraca zawartość HTML wszystkich pasujących akapitów.
11	$("div").html("Hello World") Spowoduje to ustawienie zawartości HTML wszystkich pasujących elementów <div> na Hello World .
12	$("input:checkbox:checked").val() Pobierz pierwszą wartość z zaznaczonego pola wyboru.
13	$("input:radio[name=bar]:checked").val() Uzyskaj pierwszą wartość z zestawu przycisków opcji.
14	$("button").val("Hello") Ustawia atrybut wartości każdego dopasowanego elementu <button>.
15	$("input").val("on") Spowoduje to zaznaczenie wszystkich przycisków radiowych lub pól wyboru, których wartość to „on”.
16	$("select").val("Orange") Spowoduje to wybranie opcji Orange w menu rozwijanym z opcjami Orange, Mango i Banana.
17	$("select").val("Orange", "Mango") Spowoduje to wybranie opcji Orange i Mango w menu rozwijanym z opcjami Orange, Mango i Banana.

jQuery to bardzo potężne narzędzie, które zapewnia różnorodne metody przechodzenia przez DOM, które pomagają nam wybierać elementy w dokumencie w sposób losowy, a także sekwencyjny. Większość metod DOM Traversal nie modyfikuje obiektu jQuery i służy do odfiltrowywania elementów z dokumentu na podstawie określonych warunków.

Znajdź elementy według indeksu

Rozważ prosty dokument z następującą zawartością HTML -

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

To da następujący wynik -

Powyższa lista ma swój własny indeks i można ją zlokalizować bezpośrednio za pomocą eq(index) Metoda, jak na poniższym przykładzie.
Każdy element potomny zaczyna swój indeks od zera, więc dostęp do elementu listy 2 można uzyskać za pomocą$("li").eq(1) i tak dalej.

Przykład

Poniżej znajduje się prosty przykład, który dodaje kolor do drugiej pozycji listy.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

To da następujący wynik -

Odfiltrowywanie elementów

Plik filter( selector )można użyć do odfiltrowania wszystkich elementów z zestawu dopasowanych elementów, które nie pasują do określonych selektorów. Selektor może być zapisany przy użyciu dowolnej składni selektora.

Przykład

Oto prosty przykład, który stosuje kolor do list związanych z klasą średnią -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

To da następujący wynik -

Lokalizowanie elementów potomnych

Plik find( selector )można użyć do zlokalizowania wszystkich elementów podrzędnych określonego typu elementów. Selektor może być zapisany przy użyciu dowolnej składni selektora.

Przykład

Poniżej znajduje się przykład, który wybiera wszystkie <span> elementy dostępne w różnych <p> elementach -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

To da następujący wynik -

Metody filtrowania JQuery DOM

Poniższa tabela zawiera przydatne metody, których można użyć do odfiltrowania różnych elementów z listy elementów DOM -

Sr.No.	Metoda i opis
1	eq (indeks) Zmniejsz zestaw dopasowanych elementów do pojedynczego elementu.
2	filtr (selektor) Usuwa wszystkie elementy z zestawu dopasowanych elementów, które nie pasują do określonych selektorów.
3	filtr (fn) Usuwa wszystkie elementy z zestawu dopasowanych elementów, które nie pasują do określonej funkcji.
4	jest (selektor) Sprawdza bieżący wybór względem wyrażenia i zwraca prawdę, jeśli przynajmniej jeden element zaznaczenia pasuje do podanego selektora.
5	mapa (oddzwonienie) Przetłumacz zestaw elementów w obiekcie jQuery na inny zestaw wartości w tablicy jQuery (która może zawierać elementy lub nie).
6	nie (selektor) Usuwa elementy pasujące do określonego selektora z zestawu dopasowanych elementów.
7	plasterek (początek, [koniec]) Wybiera podzbiór dopasowanych elementów.

Metody przechodzenia JQuery DOM

Poniższa tabela zawiera inne przydatne metody, których możesz użyć do zlokalizowania różnych elementów w DOM -

Sr.No.	Metody i opis
1	dodaj (selektor) Dodaje więcej elementów dopasowanych przez dany selektor do zestawu dopasowanych elementów.
2	andSelf () Dodaj poprzednią selekcję do aktualnej selekcji.
3	dzieci ([selector]) Uzyskaj zestaw elementów zawierający wszystkie unikalne bezpośrednie dzieci każdego z dopasowanych elementów.
4	najbliższy (selektor) Pobierz zestaw elementów zawierających najbliższy element nadrzędny, który pasuje do określonego selektora, wraz z elementem początkowym.
5	zawartość () Znajdź wszystkie węzły potomne w dopasowanych elementach (w tym węzły tekstowe) lub w dokumencie treści, jeśli element jest ramką iframe.
6	koniec( ) Przywróć ostatnią „destrukcyjną” operację, zmieniając zestaw dopasowanych elementów do poprzedniego stanu.
7	znajdź (selektor) Wyszukuje elementy podrzędne, które pasują do określonych selektorów.
8	next ([selector]) Uzyskaj zestaw elementów zawierający unikalne następne rodzeństwo każdego z podanego zestawu elementów.
9	nextAll ([selector]) Znajdź wszystkie elementy siostrzane po obecnym elemencie.
10	offsetParent () Zwraca kolekcję jQuery z pozycjonowanym elementem nadrzędnym pierwszego dopasowanego elementu.
11	rodzic ([selector]) Pobierz bezpośredniego rodzica elementu. Jeśli zostanie wywołany na zestawie elementów, rodzic zwraca zestaw ich unikalnych bezpośrednich elementów nadrzędnych.
12	rodzice ([selector]) Pobierz zestaw elementów zawierający unikalnych przodków dopasowanego zestawu elementów (z wyjątkiem elementu głównego).
13	prev ([selector]) Uzyskaj zestaw elementów zawierający unikalne poprzednie rodzeństwo każdego z dopasowanego zestawu elementów.
14	prevAll ([selector]) Znajdź wszystkie elementy rodzeństwa przed bieżącym elementem.
15	rodzeństwo ([selector]) Uzyskaj zestaw elementów zawierający wszystkie unikalne rodzeństwo każdego z dopasowanego zestawu elementów.

Biblioteka jQuery obsługuje prawie wszystkie selektory zawarte w specyfikacjach CSS (Cascading Style Sheet) od 1 do 3, zgodnie z opisem w witrynie World Wide Web Consortium.

Korzystając z biblioteki JQuery, programiści mogą ulepszać swoje strony internetowe bez martwienia się o przeglądarki i ich wersje, o ile przeglądarki mają włączoną obsługę JavaScript.

Większość metod JQuery CSS nie modyfikuje zawartości obiektu jQuery i są używane do stosowania właściwości CSS w elementach DOM.

Zastosuj właściwości CSS

Jest to bardzo proste do zastosowania dowolnej właściwości CSS przy użyciu metody JQuery css( PropertyName, PropertyValue ).

Oto składnia metody -

selector.css( PropertyName, PropertyValue );

Tutaj możesz przekazać PropertyName jako ciąg javascript i na podstawie jego wartości PropertyValue może być ciągiem lub liczbą całkowitą.

Przykład

Poniżej znajduje się przykład, który dodaje kolor czcionki do drugiej pozycji listy.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

To da następujący wynik -

Zastosuj wiele właściwości CSS

Możesz zastosować wiele właściwości CSS przy użyciu jednej metody JQuery CSS( {key1:val1, key2:val2....). W jednym wywołaniu możesz zastosować dowolną liczbę właściwości.

Oto składnia metody -

selector.css( {key1:val1, key2:val2....keyN:valN})

Tutaj możesz przekazać klucz jako właściwość, a wartość jako wartość, jak opisano powyżej.

Przykład

Poniżej znajduje się przykład, który dodaje kolor czcionki, a także kolor tła do drugiej pozycji listy.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

To da następujący wynik -

Ustawianie szerokości i wysokości elementu

Plik width( val ) i height( val ) można użyć do ustawienia odpowiednio szerokości i wysokości dowolnego elementu.

Przykład

Poniżej znajduje się prosty przykład, który ustawia szerokość pierwszego elementu podziału, gdzie pozostałe elementy mają szerokość ustawioną w arkuszu stylów

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100); $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

To da następujący wynik -

Metody CSS JQuery

Poniższa tabela zawiera listę wszystkich metod, których możesz użyć do zabawy z właściwościami CSS -

Sr.No.	Metoda i opis
1	css (nazwa) Zwraca właściwość stylu dla pierwszego dopasowanego elementu.
2	css (nazwa, wartość) Ustaw pojedynczą właściwość stylu na wartość dla wszystkich dopasowanych elementów.
3	css (właściwości) Ustaw obiekt klucz / wartość jako właściwości stylu dla wszystkich dopasowanych elementów.
4	wysokość (val) Ustaw wysokość CSS każdego dopasowanego elementu.
5	wysokość( ) Pobierz aktualnie obliczoną wysokość pierwszego dopasowanego elementu w pikselach.
6	innerHeight () Pobiera wysokość wewnętrzną (wyklucza obramowanie i zawiera wypełnienie) dla pierwszego dopasowanego elementu.
7	innerWidth () Pobiera szerokość wewnętrzną (wyklucza obramowanie i zawiera wypełnienie) dla pierwszego dopasowanego elementu.
8	offset () Uzyskaj bieżące przesunięcie pierwszego dopasowanego elementu w pikselach względem dokumentu.
9	offsetParent () Zwraca kolekcję jQuery z pozycjonowanym elementem nadrzędnym pierwszego dopasowanego elementu.
10	externalHeight ([margin]) Pobiera wysokość zewnętrzną (domyślnie zawiera obramowanie i wypełnienie) dla pierwszego dopasowanego elementu.
11	externalWidth ([margin]) Uzyskaj szerokość zewnętrzną (domyślnie zawiera obramowanie i dopełnienie) dla pierwszego dopasowanego elementu.
12	pozycja () Pobiera górną i lewą pozycję elementu względem jego przesuniętego elementu nadrzędnego.
13	scrollLeft (val) Gdy wartość jest przekazywana, przesunięcie przewijania w lewo jest ustawiane na tę wartość we wszystkich dopasowanych elementach.
14	scrollLeft () Pobiera przesunięcie przewijania w lewo pierwszego dopasowanego elementu.
15	scrollTop (val) Gdy wartość jest przekazywana, górne przesunięcie przewijania jest ustawiane na tę wartość we wszystkich dopasowanych elementach.
16	scrollTop () Pobiera przesunięcie w górę przewijania pierwszego dopasowanego elementu.
17	szerokość (val) Ustaw szerokość CSS każdego dopasowanego elementu.
18	szerokość () Pobierz aktualnie obliczoną szerokość pierwszego dopasowanego elementu w pikselach.

JQuery dostarcza metody do efektywnego manipulowania DOM. Nie musisz pisać dużego kodu, aby zmodyfikować wartość atrybutu dowolnego elementu lub wyodrębnić kod HTML z akapitu lub podziału.

JQuery dostarcza metody, takie jak .attr (), .html () i .val (), które działają jako metody pobierające, pobierając informacje z elementów DOM do późniejszego wykorzystania.

Manipulacja treścią

Plik html( ) pobiera zawartość html (innerHTML) pierwszego dopasowanego elementu.

Oto składnia metody -

selector.html( )

Przykład

Poniżej znajduje się przykład wykorzystujący metody .html () i .text (val). Tutaj .html () pobiera zawartość HTML z obiektu, a następnie metoda .text (val) ustawia wartość obiektu za pomocą przekazanego parametru -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               var content = $(this).html(); $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

To da następujący wynik -

Wymiana elementu DOM

Możesz zastąpić cały element DOM określonymi elementami HTML lub DOM. PlikreplaceWith( content ) metoda bardzo dobrze służy temu celowi.

Oto składnia metody -

selector.replaceWith( content )

Tutaj treść jest tym, co chcesz mieć zamiast oryginalnego elementu. Może to być HTML lub zwykły tekst.

Przykład

Poniżej znajduje się przykład, który zamieniłby element podziału na „<h1> JQuery is Great </h1>” -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

To da następujący wynik -

Usuwanie elementów DOM

Może zaistnieć sytuacja, w której będziesz chciał usunąć jeden lub więcej elementów DOM z dokumentu. JQuery udostępnia dwie metody radzenia sobie z tą sytuacją.

Plik empty( ) metoda usuwa wszystkie węzły potomne z zestawu dopasowanych elementów, gdzie jako metoda remove( expr ) metoda usuwa wszystkie dopasowane elementy z DOM.

Oto składnia metody -

selector.remove( [ expr ])

or 

selector.empty( )

Możesz przekazać opcjonalny parametr wyrażenia, aby odfiltrować zestaw elementów do usunięcia.

Przykład

Poniżej znajduje się przykład, w którym elementy są usuwane zaraz po kliknięciu -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () { $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

To da następujący wynik -

Wstawianie elementów DOM

Może zaistnieć sytuacja, w której będziesz chciał wstawić nowy jeden lub więcej elementów DOM do istniejącego dokumentu. JQuery udostępnia różne metody wstawiania elementów w różnych lokalizacjach.

Plik after( content ) metoda wstaw zawartość po każdym z dopasowanych elementów, gdzie jako metoda before( content ) metoda wstawia zawartość przed każdym z dopasowanych elementów.

Oto składnia metody -

selector.after( content )

or

selector.before( content )

Tutaj treść jest tym, co chcesz wstawić. Może to być HTML lub zwykły tekst.

Przykład

Poniżej znajduje się przykład, w którym elementy <div> są wstawiane tuż przed klikniętym elementem -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

To da następujący wynik -

Metody manipulacji DOM

Poniższa tabela zawiera listę wszystkich metod, których możesz użyć do manipulowania elementami DOM -

Sr.No.	Metoda i opis
1	po (treść) Wstaw zawartość po każdym z dopasowanych elementów.
2	append (treść) Dołącz zawartość do wnętrza każdego dopasowanego elementu.
3	appendTo (selektor) Dołącz wszystkie dopasowane elementy do innego, określonego zestawu elementów.
4	przed (treść) Wstaw zawartość przed każdym z dopasowanych elementów.
5	klon (bool) Sklonuj dopasowane elementy DOM i wszystkie ich programy obsługi zdarzeń, a następnie wybierz klony.
6	klon () Sklonuj dopasowane elementy DOM i wybierz klony.
7	pusty () Usuń wszystkie węzły potomne z zestawu dopasowanych elementów.
8	html (val) Ustaw zawartość HTML każdego dopasowanego elementu.
9	html () Pobierz zawartość html (innerHTML) pierwszego dopasowanego elementu.
10	insertAfter (selektor) Wstaw wszystkie dopasowane elementy po innym, określonym zestawie elementów.
11	insertBefore (selektor) Wstaw wszystkie dopasowane elementy przed inny, określony zestaw elementów.
12	poprzedzać (treść) Dołącz zawartość do wnętrza każdego dopasowanego elementu.
13	prependTo (selektor) Dołącz wszystkie dopasowane elementy do innego, określonego zestawu elementów.
14	usunąć (wyr) Usuwa wszystkie dopasowane elementy z DOM.
15	replaceAll (selektor) Zastępuje elementy dopasowane przez określony selektor dopasowanymi elementami.
16	replaceWith (treść) Zastępuje wszystkie dopasowane elementy określonymi elementami HTML lub DOM.
17	tekst (val) Ustaw zawartość tekstową wszystkich dopasowanych elementów.
18	tekst () Uzyskaj połączoną zawartość tekstową wszystkich dopasowanych elementów.
19	wrap (elem) Zawiń każdy dopasowany element określonym elementem.
20	wrap (html) Otocz każdy dopasowany element określoną treścią HTML.
21	wrapAll (elem) Zawiń wszystkie elementy w dopasowanym zestawie w jeden element opakowujący.
22	wrapAll (html) Zawiń wszystkie elementy w dopasowanym zestawie w jeden element opakowujący.
23	wrapInner (elem) Zawiń wewnętrzną zawartość podrzędną każdego dopasowanego elementu (w tym węzłów tekstowych) elementem DOM.
24	wrapInner (html) Zawiń wewnętrzną zawartość podrzędną każdego dopasowanego elementu (w tym węzłów tekstowych) strukturą HTML.

Mamy możliwość tworzenia dynamicznych stron internetowych za pomocą zdarzeń. Zdarzenia to akcje, które mogą zostać wykryte przez aplikację internetową.

Oto przykłady wydarzeń -

Kliknięcie myszą
Ładowanie strony internetowej
Najechanie myszą na element
Przesyłanie formularza HTML
Naciśnięcie klawisza na klawiaturze itp.

Po wyzwoleniu tych zdarzeń możesz użyć funkcji niestandardowej, aby zrobić prawie wszystko, co chcesz ze zdarzeniem. Te niestandardowe funkcje wywołują obsługę zdarzeń.

Programy obsługi zdarzeń wiązania

Korzystając z modelu zdarzeń jQuery, możemy ustanowić programy obsługi zdarzeń na elementach DOM z rozszerzeniem bind() metoda w następujący sposób -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Ten kod spowoduje, że element podziału zareaguje na zdarzenie click; gdy użytkownik kliknie później w tym dziale, zostanie wyświetlony alert.

To da następujący wynik -

Pełna składnia polecenia bind () jest następująca -

selector.bind( eventType[, eventData], handler)

Poniżej znajduje się opis parametrów -

eventType- Ciąg zawierający typ zdarzenia JavaScript, taki jak kliknięcie lub przesłanie. Pełną listę typów zdarzeń znajdziesz w następnej sekcji.
eventData - Jest to opcjonalny parametr, czyli mapa danych, które zostaną przekazane do programu obsługi zdarzeń.
handler - Funkcja do wykonania za każdym razem, gdy zostanie wyzwolone zdarzenie.

Usuwanie programów obsługi zdarzeń

Zwykle po ustanowieniu procedury obsługi zdarzeń pozostaje ona aktywna przez pozostałą część życia strony. Może zaistnieć potrzeba usunięcia modułu obsługi zdarzeń.

jQuery udostępnia unbind()polecenie, aby usunąć istniejącą procedurę obsługi zdarzeń. Składnia unbind () jest następująca -

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Poniżej znajduje się opis parametrów -

eventType- Ciąg zawierający typ zdarzenia JavaScript, taki jak kliknięcie lub przesłanie. Pełną listę typów zdarzeń znajdziesz w następnej sekcji.
handler - Jeśli podano, identyfikuje konkretny odbiornik, który ma zostać usunięty.

Typy wydarzeń

Poniżej przedstawiono międzyplatformowe i zalecane typy zdarzeń, które można powiązać za pomocą JQuery -

Sr.No.	Typ i opis wydarzenia
1	blur Występuje, gdy element traci fokus.
2	change Występuje po zmianie elementu.
3	click Występuje po kliknięciu myszą.
4	dblclick Występuje po dwukrotnym kliknięciu myszą.
5	error Występuje, gdy wystąpi błąd podczas ładowania lub rozładowywania itp.
6	focus Występuje, gdy element staje się aktywny.
7	keydown Występuje po naciśnięciu klawisza.
8	keypress Występuje po naciśnięciu i zwolnieniu klawisza.
9	keyup Występuje po wydaniu klucza.
10	load Występuje po załadowaniu dokumentu.
11	mousedown Występuje po naciśnięciu przycisku myszy.
12	mouseenter Występuje, gdy mysz przechodzi do regionu elementu.
13	mouseleave Występuje, gdy mysz opuszcza region elementu.
14	mousemove Występuje, gdy porusza się wskaźnik myszy.
15	mouseout Występuje, gdy wskaźnik myszy przesunie się poza element.
16	mouseover Występuje, gdy wskaźnik myszy przesuwa się nad elementem.
17	mouseup Występuje po zwolnieniu przycisku myszy.
18	resize Występuje po zmianie rozmiaru okna.
19	scroll Występuje, gdy okno jest przewijane.
20	select Występuje po zaznaczeniu tekstu.
21	submit Występuje po przesłaniu formularza.
22	unload Występuje, gdy dokumenty są wyładowywane.

Obiekt zdarzenia

Funkcja zwrotna przyjmuje pojedynczy parametr; gdy moduł obsługi zostanie wywołany, obiekt zdarzenia JavaScript będzie przez niego przepuszczany.

Obiekt zdarzenia jest często niepotrzebny, a parametr jest pomijany, ponieważ wystarczający kontekst jest zwykle dostępny, gdy procedura obsługi jest zobowiązana do dokładnego poznania, co należy zrobić po wyzwoleniu procedury obsługi, jednak istnieją pewne atrybuty, do których trzeba uzyskać dostęp.

Atrybuty zdarzenia

Następujące właściwości / atrybuty zdarzenia są dostępne i bezpieczne w sposób niezależny od platformy -

Sr.No.	Właściwość i opis
1	altKey Ustaw na true, jeśli klawisz Alt został naciśnięty, gdy zdarzenie zostało wyzwolone, false, jeśli nie. Klawisz Alt jest oznaczony jako Opcja na większości klawiatur Mac.
2	ctrlKey Ustaw na true, jeśli klawisz Ctrl został naciśnięty, gdy zdarzenie zostało wyzwolone, false, jeśli nie.
3	data Wartość, jeśli istnieje, przekazana jako drugi parametr do polecenia bind () podczas ustanawiania procedury obsługi.
4	keyCode W przypadku zdarzeń keyup i keydown zwraca to naciśnięty klawisz.
5	metaKey Ustaw na true, jeśli klawisz Meta został naciśnięty, gdy zdarzenie zostało wyzwolone, false, jeśli nie. Klawisz Meta to klawisz Ctrl na komputerach PC i klawisz Command na komputerach Mac.
6	pageX W przypadku zdarzeń myszy określa poziomą współrzędną zdarzenia względem początku strony.
7	pageY W przypadku zdarzeń myszy określa pionową współrzędną zdarzenia względem początku strony.
8	relatedTarget W przypadku niektórych zdarzeń myszy określa element, który kursor pozostawił lub wprowadził, gdy zdarzenie zostało wyzwolone.
9	screenX W przypadku zdarzeń myszy określa poziomą współrzędną zdarzenia względem początku ekranu.
10	screenY W przypadku zdarzeń myszy określa pionową współrzędną zdarzenia względem początku ekranu.
11	shiftKey Ustaw na true, jeśli klawisz Shift został naciśnięty, gdy zdarzenie zostało wyzwolone, false, jeśli nie.
12	target Identyfikuje element, dla którego zostało wyzwolone zdarzenie.
13	timeStamp Sygnatura czasowa (w milisekundach) utworzenia zdarzenia.
14	type W przypadku wszystkich zdarzeń określa typ zdarzenia, które zostało wywołane (np. Kliknięcie).
15	which W przypadku zdarzeń związanych z klawiaturą określa kod numeryczny klawisza, który spowodował zdarzenie, aw przypadku zdarzeń myszy, określa, który przycisk został naciśnięty (1 dla lewego, 2 dla środkowego, 3 dla prawego).

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

To da następujący wynik -

Metody zdarzeń

Istnieje lista metod, które można wywołać w obiekcie zdarzenia -

Sr.No.	Metoda i opis
1	zapobiecDefault () Uniemożliwia przeglądarce wykonanie domyślnej akcji.
2	isDefaultPrevented () Zwraca informację, czy zdarzenie event.preventDefault () zostało kiedykolwiek wywołane w tym obiekcie zdarzenia.
3	stopPropagation () Zatrzymuje propagację zdarzenia do elementów nadrzędnych, zapobiegając powiadamianiu o zdarzeniu przez programy obsługi nadrzędne.
4	isPropagationStopped () Zwraca informację, czy event.stopPropagation () była kiedykolwiek wywołana w tym obiekcie zdarzenia.
5	stopImmediatePropagation () Zatrzymuje wykonanie pozostałych programów obsługi.
6	isImmediatePropagationStopped () Zwraca czy zdarzenie event.stopImmediatePropagation () było kiedykolwiek wywołane w tym obiekcie zdarzenia.

Metody manipulacji zdarzeniami

Poniższa tabela zawiera listę ważnych metod związanych ze zdarzeniami -

Sr.No.	Metoda i opis
1	bind (typ, [dane], fn) Wiąże procedurę obsługi z co najmniej jednym zdarzeniem (takim jak kliknięcie) dla każdego dopasowanego elementu. Może również wiązać zdarzenia niestandardowe.
2	off (events [, selector] [, handler (eventObject)]) Działa odwrotnie niż na żywo, usuwa powiązane wydarzenie na żywo.
3	najechanie (nad, na zewnątrz) Symuluje najechanie na obiekt, na przykład przesuwanie myszy na obiekt.
4	on (zdarzenia [, selektor] [, dane], program obsługi) Wiąże procedurę obsługi ze zdarzeniem (takim jak kliknięcie) dla wszystkich aktualnie - i w przyszłości - dopasowanych elementów. Może również wiązać zdarzenia niestandardowe.
5	one (typ, [dane], fn) Wiąże procedurę obsługi z co najmniej jednym zdarzeniem, które ma zostać wykonane raz dla każdego dopasowanego elementu.
6	gotowy (fn) Wiąże funkcję do wykonania, gdy DOM jest gotowy do przejścia i manipulacji.
7	wyzwalacz (zdarzenie, [dane]) Wywołaj zdarzenie dla każdego dopasowanego elementu.
8	triggerHandler (zdarzenie, [dane]) Uruchamia wszystkie powiązane programy obsługi zdarzeń w elemencie.
9	unbind ([typ], [fn]) Działa odwrotnie niż bind, usuwa powiązane zdarzenia z każdego z dopasowanych elementów.

Metody pomocy zdarzeń

jQuery zapewnia również zestaw funkcji pomocniczych zdarzeń, których można użyć do wyzwolenia zdarzenia w celu powiązania dowolnego typu zdarzenia wymienionego powyżej.

Metody wyzwalania

Poniżej znajduje się przykład, który wywołałby rozmycie we wszystkich akapitach -

$("p").blur();

Metody wiązania

Poniżej znajduje się przykład, który wiązałby plik click wydarzenie na wszystkich <div> -

$("div").click( function () { 
   // do something here
});

Oto pełna lista wszystkich metod wsparcia dostarczanych przez jQuery -

Sr.No.	Metoda i opis
1	blur( ) Uruchamia zdarzenie rozmycia każdego dopasowanego elementu.
2	blur( fn ) Powiąż funkcję ze zdarzeniem rozmycia każdego dopasowanego elementu.
3	change( ) Uruchamia zdarzenie zmiany każdego dopasowanego elementu.
4	change( fn ) Wiąże funkcję ze zdarzeniem zmiany każdego dopasowanego elementu.
5	click( ) Uruchamia zdarzenie kliknięcia każdego dopasowanego elementu.
6	click( fn ) Wiąże funkcję ze zdarzeniem click każdego dopasowanego elementu.
7	dblclick( ) Uruchamia zdarzenie dblclick dla każdego dopasowanego elementu.
8	dblclick( fn ) Wiąże funkcję ze zdarzeniem dblclick każdego dopasowanego elementu.
9	error( ) Uruchamia zdarzenie błędu każdego dopasowanego elementu.
10	error( fn ) Wiąże funkcję ze zdarzeniem błędu każdego dopasowanego elementu.
11	focus( ) Uruchamia zdarzenie skupienia każdego dopasowanego elementu.
12	focus( fn ) Wiąże funkcję ze zdarzeniem fokusu każdego dopasowanego elementu.
13	keydown( ) Uruchamia zdarzenie keydown dla każdego dopasowanego elementu.
14	keydown( fn ) Powiąż funkcję ze zdarzeniem keydown każdego dopasowanego elementu.
15	keypress( ) Uruchamia zdarzenie naciśnięcia klawisza każdego dopasowanego elementu.
16	keypress( fn ) Wiąże funkcję ze zdarzeniem keypress każdego dopasowanego elementu.
17	keyup( ) Uruchamia zdarzenie keyup każdego dopasowanego elementu.
18	keyup( fn ) Powiąż funkcję ze zdarzeniem keyup każdego dopasowanego elementu.
19	load( fn ) Wiąże funkcję ze zdarzeniem load każdego dopasowanego elementu.
20	mousedown( fn ) Wiąże funkcję ze zdarzeniem mousedown każdego dopasowanego elementu.
21	mouseenter( fn ) Powiąż funkcję ze zdarzeniem mouseenter każdego dopasowanego elementu.
22	mouseleave( fn ) Powiąż funkcję ze zdarzeniem mouseleave każdego dopasowanego elementu.
23	mousemove( fn ) Powiąż funkcję ze zdarzeniem mousemove każdego dopasowanego elementu.
24	mouseout( fn ) Powiąż funkcję ze zdarzeniem mouseout każdego dopasowanego elementu.
25	mouseover( fn ) Powiąż funkcję ze zdarzeniem najechania myszą każdego dopasowanego elementu.
26	mouseup( fn ) Powiąż funkcję ze zdarzeniem mouseup każdego dopasowanego elementu.
27	resize( fn ) Powiąż funkcję ze zdarzeniem resize każdego dopasowanego elementu.
28	scroll( fn ) Powiąż funkcję ze zdarzeniem przewijania każdego dopasowanego elementu.
29	select( ) Uruchom zdarzenie select dla każdego dopasowanego elementu.
30	select( fn ) Powiąż funkcję z wybranym zdarzeniem każdego dopasowanego elementu.
31	submit( ) Wywołaj zdarzenie przesyłania każdego dopasowanego elementu.
32	submit( fn ) Powiąż funkcję ze zdarzeniem przesłania każdego dopasowanego elementu.
33	unload( fn ) Wiąże funkcję ze zdarzeniem unload każdego dopasowanego elementu.

AJAX to skrót od Asynchronous JavaScript and XML, a technologia ta pomaga nam ładować dane z serwera bez odświeżania strony przeglądarki.

Jeśli dopiero zaczynasz korzystać z AJAX, zalecamy zapoznanie się z naszym samouczkiem AJAX, zanim przejdziesz dalej.

JQuery to świetne narzędzie, które zapewnia bogaty zestaw metod AJAX do tworzenia aplikacji internetowych nowej generacji.

Ładowanie prostych danych

Ładowanie statycznych lub dynamicznych danych za pomocą JQuery AJAX jest bardzo łatwe. JQuery zapewniaload() metoda wykonania pracy -

Składnia

Oto prosta składnia load() metoda -

[selector].load( URL, [data], [callback] );

Oto opis wszystkich parametrów -

URL- adres URL zasobu po stronie serwera, do którego wysyłane jest żądanie. Może to być skrypt CGI, ASP, JSP lub PHP, który generuje dane dynamicznie lub poza bazą danych.
data- Ten opcjonalny parametr reprezentuje obiekt, którego właściwości są serializowane do odpowiednio zakodowanych parametrów, które mają być przekazane do żądania. Jeśli określono, żądanie jest wykonywane przy użyciuPOSTmetoda. Jeśli zostanie pominięty, rozszerzenieGET metoda jest używana.
callback- Funkcja zwrotna wywoływana po załadowaniu danych odpowiedzi do elementów dopasowanego zestawu. Pierwszym parametrem przekazanym do tej funkcji jest tekst odpowiedzi otrzymany z serwera, a drugim parametrem jest kod stanu.

Przykład

Rozważ następujący plik HTML z małym kodowaniem JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){ $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Tutaj load() inicjuje żądanie Ajax do określonego adresu URL /jquery/result.htmlplik. Po załadowaniu tego pliku cała zawartość zostanie umieszczona w <div> oznaczonym etapem ID . Zakładając, że nasz plik /jquery/result.html ma tylko jedną linię HTML -

<h1>THIS IS RESULT...</h1>

Kliknięcie w dany przycisk powoduje załadowanie pliku result.html.

Pobieranie danych JSON

Zaistniałaby sytuacja, w której serwer zwróciłby ciąg JSON w odpowiedzi na Twoje żądanie. Funkcja narzędziowa JQuerygetJSON() analizuje zwrócony ciąg JSON i udostępnia wynikowy ciąg funkcji wywołania zwrotnego jako pierwszy parametr do podjęcia dalszych działań.

Składnia

Oto prosta składnia getJSON() metoda -

[selector].getJSON( URL, [data], [callback] );

Oto opis wszystkich parametrów -

URL - adres URL zasobu po stronie serwera, z którym nawiązano kontakt za pomocą metody GET.
data - Obiekt, którego właściwości służą jako pary nazwa / wartość używane do konstruowania ciągu zapytania do dołączenia do adresu URL lub wstępnie sformatowanego i zakodowanego ciągu zapytania.
callback- Funkcja wywoływana po zakończeniu żądania. Wartość danych wynikająca z przetworzenia treści odpowiedzi jako ciągu JSON jest przekazywana jako pierwszy parametr do tego wywołania zwrotnego, a stan jako drugi.

Przykład

Rozważ następujący plik HTML z małym kodowaniem JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) { $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>'); $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Tutaj metoda narzędzia JQuery getJSON() inicjuje żądanie Ajax do określonego adresu URL result.jsonplik. Po załadowaniu tego pliku cała zawartość zostanie przekazana do funkcji wywołania zwrotnego, która ostatecznie zostanie umieszczona w <div> oznaczonym etapem ID . Zakładając, że nasz plik result.json zawiera następującą zawartość w formacie JSON -

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

Po kliknięciu na dany przycisk zostanie załadowany plik result.json.

Przekazywanie danych do serwera

Wiele razy zbierasz dane wejściowe od użytkownika i przekazujesz je serwerowi w celu dalszego przetwarzania. JQuery AJAX ułatwiło przekazywanie zebranych danych do serwera za pomocądata parametr dowolnej dostępnej metody Ajax.

Przykład

Ten przykład pokazuje, jak przekazać dane wejściowe użytkownika do skryptu serwera WWW, który odesłałby ten sam wynik z powrotem, a my wydrukowalibyśmy go -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
               var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

Oto kod napisany w result.php skrypt -

<?php
   if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name;
   }
?>

Teraz możesz wprowadzić dowolny tekst w dane pole wejściowe, a następnie kliknąć przycisk „Pokaż wynik”, aby zobaczyć, co wpisałeś w polu wprowadzania.

Metody JQuery AJAX

Widzieliście już podstawową koncepcję AJAX przy użyciu JQuery. Poniższa tabela zawiera listę wszystkich ważnych metod JQuery AJAX, których możesz użyć w zależności od potrzeb programistycznych -

Sr.No.	Metody i opis
1	jQuery.ajax (opcje) Załaduj zdalną stronę za pomocą żądania HTTP.
2	jQuery.ajaxSetup (opcje) Skonfiguruj ustawienia globalne dla żądań AJAX.
3	jQuery.get (url, [dane], [wywołanie zwrotne], [typ]) Załaduj zdalną stronę za pomocą żądania HTTP GET.
4	jQuery.getJSON (adres URL, [dane], [wywołanie zwrotne]) Załaduj dane JSON za pomocą żądania HTTP GET.
5	jQuery.getScript (url, [wywołanie zwrotne]) Ładuje i wykonuje plik JavaScript przy użyciu żądania HTTP GET.
6	jQuery.post (url, [dane], [wywołanie zwrotne], [typ]) Załaduj zdalną stronę za pomocą żądania HTTP POST.
7	load (url, [data], [callback]) Załaduj HTML ze zdalnego pliku i wstrzyknij go do DOM.
8	serialize () Serializuje zestaw elementów wejściowych do ciągu danych.
9	serializeArray () Serializuje wszystkie formularze i elementy formularzy, takie jak metoda .serialize (), ale zwraca strukturę danych JSON, z którą możesz pracować.

Wydarzenia JQuery AJAX

Możesz wywołać różne metody JQuery podczas cyklu życia postępu wywołania AJAX. W oparciu o różne wydarzenia / etapy dostępne są następujące metody -

Możesz przejść przez wszystkie wydarzenia AJAX .

Sr.No.	Metody i opis
1	ajaxComplete (wywołanie zwrotne) Dołącz funkcję, która ma zostać wykonana po zakończeniu żądania AJAX.
2	ajaxStart (wywołanie zwrotne) Dołącz funkcję do wykonania za każdym razem, gdy rozpocznie się żądanie AJAX i żadna nie jest już aktywna.
3	ajaxError (wywołanie zwrotne) Dołącz funkcję, która ma zostać wykonana, gdy żądanie AJAX nie powiedzie się.
4	ajaxSend (wywołanie zwrotne) Dołącz funkcję, która ma zostać wykonana przed wysłaniem żądania AJAX.
5	ajaxStop (wywołanie zwrotne) Dołącz funkcję, która ma zostać wykonana po zakończeniu wszystkich żądań AJAX.
6	ajaxSuccess (wywołanie zwrotne) Dołącz funkcję do wykonania, gdy żądanie AJAX zakończy się pomyślnie.

jQuery zapewnia banalnie prosty interfejs do robienia różnego rodzaju niesamowitych efektów. Metody jQuery pozwalają nam szybko zastosować powszechnie używane efekty przy minimalnej konfiguracji. Ten samouczek obejmuje wszystkie ważne metody jQuery do tworzenia efektów wizualnych.

Pokazywanie i ukrywanie elementów

Polecenia do pokazywania i ukrywania elementów są prawie takie, jakich byśmy się spodziewali - show() aby pokazać elementy w zapakowanym zestawie i hide() aby je ukryć.

Składnia

Oto prosta składnia show() metoda -

[selector].show( speed, [callback] );

Oto opis wszystkich parametrów -

speed - Ciąg reprezentujący jedną z trzech predefiniowanych prędkości („wolno”, „normalnie” lub „szybko”) lub liczbę milisekund potrzebną do uruchomienia animacji (np. 1000).
callback- Ten opcjonalny parametr reprezentuje funkcję do wykonania po zakończeniu animacji; wykonuje się raz dla każdego elementu animowanego względem.

Poniżej znajduje się prosta składnia hide() metoda -

[selector].hide( speed, [callback] );

Oto opis wszystkich parametrów -

speed - Ciąg reprezentujący jedną z trzech predefiniowanych prędkości („wolno”, „normalnie” lub „szybko”) lub liczbę milisekund potrzebną do uruchomienia animacji (np. 1000).
callback- Ten opcjonalny parametr reprezentuje funkcję do wykonania po zakończeniu animacji; wykonuje się raz dla każdego elementu animowanego względem.

Przykład

Rozważ następujący plik HTML z małym kodowaniem JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#show").click(function () {
               $(".mydiv").show( 1000 ); }); $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

To da następujący wynik -

Przełączanie elementów

jQuery zapewnia metody przełączania stanu wyświetlania elementów między ujawnionymi a ukrytymi. Jeśli element jest początkowo wyświetlany, zostanie ukryty; jeśli jest ukryty, zostanie wyświetlony.

Składnia

Oto prosta składnia jednego z toggle() metody -

[selector]..toggle([speed][, callback]);

Oto opis wszystkich parametrów -

speed - Ciąg reprezentujący jedną z trzech predefiniowanych prędkości („wolno”, „normalnie” lub „szybko”) lub liczbę milisekund potrzebną do uruchomienia animacji (np. 1000).
callback- Ten opcjonalny parametr reprezentuje funkcję do wykonania po zakończeniu animacji; wykonuje się raz dla każdego elementu animowanego względem.

Przykład

Możemy animować dowolny element, taki jak prosty <div> zawierający obraz -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){ $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

To da następujący wynik -

Metody efektu JQuery

Widzieliście już podstawową koncepcję efektów jQuery. Poniższa tabela zawiera listę wszystkich ważnych metod tworzenia różnego rodzaju efektów -

Sr.No.	Metody i opis
1	animuj (parametry, [czas trwania, wygładzanie, wywołanie zwrotne]) Funkcja tworzenia niestandardowych animacji.
2	fadeIn (prędkość, [oddzwonienie]) Zanikaj wszystkie dopasowane elementy, dostosowując ich krycie i uruchamiając opcjonalne wywołanie zwrotne po zakończeniu.
3	fadeOut (prędkość, [oddzwonienie]) Zanikaj wszystkie dopasowane elementy, ustawiając ich krycie na 0, a następnie ustawiając wyświetlanie na „brak” i uruchamiając opcjonalne wywołanie zwrotne po zakończeniu.
4	fadeTo (szybkość, krycie, wywołanie zwrotne) Zmniejsz krycie wszystkich dopasowanych elementów do określonego krycia i wywołanie opcjonalnego wywołania zwrotnego po zakończeniu.
5	ukryć( ) Ukrywa każdy zestaw dopasowanych elementów, jeśli są wyświetlane.
6	ukryj (szybkość, [oddzwonienie]) Ukryj wszystkie dopasowane elementy, używając wdzięcznej animacji i uruchamiając opcjonalne wywołanie zwrotne po zakończeniu.
7	pokazać( ) Wyświetla każdy zestaw dopasowanych elementów, jeśli są one ukryte.
8	show (prędkość, [oddzwonienie]) Pokaż wszystkie dopasowane elementy, używając wdzięcznej animacji i wywołując opcjonalne wywołanie zwrotne po zakończeniu.
9	slideDown (prędkość, [oddzwonienie]) Pokaż wszystkie dopasowane elementy, dostosowując ich wysokość i uruchamiając opcjonalne wywołanie zwrotne po zakończeniu.
10	slideToggle (prędkość, [oddzwonienie]) Przełączaj widoczność wszystkich dopasowanych elementów, dostosowując ich wysokość i uruchamiając opcjonalne wywołanie zwrotne po zakończeniu.
11	slideUp (prędkość, [oddzwonienie]) Ukryj wszystkie dopasowane elementy, dostosowując ich wysokość i uruchamiając opcjonalne wywołanie zwrotne po zakończeniu.
12	stop ([clearQueue, gotoEnd]) Zatrzymuje wszystkie aktualnie uruchomione animacje na wszystkich określonych elementach.
13	przełącznik( ) Przełącz wyświetlanie każdego zestawu dopasowanych elementów.
14	toggle (prędkość, [oddzwonienie]) Przełącz wyświetlanie każdego zestawu dopasowanych elementów za pomocą wdzięcznej animacji i wywołanie opcjonalnego wywołania zwrotnego po zakończeniu.
15	przełącznik ) Przełącz wyświetlanie każdego zestawu dopasowanych elementów na podstawie przełącznika (prawda pokazuje wszystkie elementy, fałsz ukrywa wszystkie elementy).
16	jQuery.fx.off Globalnie wyłącz wszystkie animacje.

Efekty oparte na bibliotece interfejsu użytkownika

Aby użyć tych efektów, możesz pobrać najnowszą bibliotekę interfejsu użytkownika jQuery jquery-ui-1.11.4.custom.zipz biblioteki interfejsu użytkownika jQuery lub użyj Google CDN, aby używać go w podobny sposób, jak to zrobiliśmy dla jQuery.

Użyliśmy Google CDN dla interfejsu użytkownika jQuery, używając następującego fragmentu kodu na stronie HTML, dzięki czemu możemy używać interfejsu użytkownika jQuery -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>

Sr.No.	Metody i opis
1	Ślepy Oślepia element lub pokazuje go przez oślepienie.
2	Odbić się Odbija element n-krotnie pionowo lub poziomo.
3	Spinacz Włącza lub wyłącza element, pionowo lub poziomo.
4	Upuszczać Upuszcza element lub pokazuje go, upuszczając.
5	Eksplodować Rozbija element na wiele części.
6	Zagięcie Składa element jak kartkę papieru.
7	Atrakcja Podświetla tło określonym kolorem.
8	Ptyś Animacje skalowania i zanikania tworzą efekt zaciągnięcia się.
9	Pulsować Wielokrotnie pulsuje krycie elementu.
10	Skala Zmniejsz lub powiększ element o współczynnik procentowy.
11	Potrząsnąć Potrząsa elementem n-krotnie w pionie lub w poziomie.
12	Rozmiar Zmień rozmiar elementu do określonej szerokości i wysokości.
13	Ślizgać się Wysuwa element z rzutni.
14	Transfer Przenosi zarys elementu na inny.

Do każdego elementu można dodać podstawowe zachowania oparte na myszy. Korzystając z interakcji, możemy tworzyć listy z możliwością sortowania, elementy o zmiennym rozmiarze, zachowania typu „przeciągnij i upuść”. Interakcje są również świetnymi elementami konstrukcyjnymi dla bardziej złożonych widżetów i aplikacji.

Sr.No.	Interakcje i opis
1	Przeciągnij w stanie Włącz funkcję przeciągania dla dowolnego elementu DOM.
2	Upuść w stanie Włącz dowolny element DOM, aby móc upuszczać.
3	Możliwość zmiany rozmiaru Włącz możliwość zmiany rozmiaru dowolnego elementu DOM.
4	Wybierz w stanie Włącz opcję wyboru elementu DOM (lub grupy elementów).
5	Sortuj w stanie Włącz sortowanie grupy elementów DOM.

widget jQuery UI jest wyspecjalizowaną wtyczką jQuery, za pomocą której możemy nałożyć na elementy zachowania. Jednak wtyczkom brakuje niektórych wbudowanych możliwości, takich jak sposób kojarzenia danych z ich elementami, ujawniania metod, łączenia opcji z ustawieniami domyślnymi i kontrolowania czasu życia wtyczki.

Sr.No.	Widżety i opis
1	Akordeon Włącz, aby zwinąć zawartość, która jest podzielona na sekcje logiczne.
2	autouzupełnienie Włącz, aby wyświetlać sugestie podczas pisania w polu.
3	Przycisk Przycisk jest wejściem typu Prześlij i kotwicą.
4	Datepicker To otwarcie interaktywnego kalendarza w małej nakładce.
5	Dialog Okna dialogowe to jeden z fajnych sposobów prezentacji informacji na stronie HTML.
6	Menu Menu pokazuje listę pozycji.
7	Pasek postępu Pokazuje informacje o postępie.
8	Wybierz menu Włącz styl, który może wybierać element / elementy.
9	Suwak Podstawowy suwak jest poziomy i ma pojedynczy uchwyt, który można przesuwać myszą lub za pomocą klawiszy strzałek.
10	Prządka Zapewnia szybki sposób wyboru jednej wartości z zestawu.
11	Zakładki Służy do wymiany treści podzielonych na logiczne sekcje.
12	Etykietka Zawiera wskazówki dla użytkowników.

Jquery ma dwa różne motywy stylizacji, takie jak A i B., każdy z różnymi kolorami przycisków, pasków, bloków zawartości i tak dalej.

Składnia motywów zapytań J, jak pokazano poniżej -

<div data-role = "page" data-theme = "a|b">

Prosty przykład motywu, jak pokazano poniżej -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
			
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "a">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
			
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

Powinno to dać następujący wynik -

Prosty z B motywów, jak pokazano poniżej -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "b">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

Powinno to dać następujący wynik -

Jquery dostarcza narzędzia serwerowe w postaci $ (przestrzeń nazw). Metody te są pomocne przy wykonywaniu zadań programistycznych. Kilka z nich przedstawiono poniżej.

$ .trim ()

$ .trim () służy do usuwania wiodących i końcowych białych znaków

$.trim( "    lots of extra whitespace    " );

$ .each ()

$ .each () służy do iteracji po tablicach i obiektach

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});
 
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

.each () można wywołać na selekcji, aby iterować po elementach zawartych w selekcji. .each (), a nie $ .each (), powinno być używane do iteracji po elementach w zaznaczeniu.

$ .inArray ()

$ .inArray () służy do Zwraca indeks wartości w tablicy lub -1, jeśli wartość nie znajduje się w tablicy.

var myArray = [ 1, 2, 3, 5 ];
 
if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$ .extend ()

$ .extend () służy do zmiany właściwości pierwszego obiektu przy użyciu właściwości kolejnych obiektów.

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
 
var newObject = $.extend( firstObject, secondObject );
 
console.log( firstObject.foo ); 
console.log( newObject.foo );

$ .proxy ()

$ .proxy () służy do Zwraca funkcję, która zawsze będzie działać w podanym zakresie - to znaczy ustawia znaczenie tego wewnątrz przekazanej funkcji na drugi argument

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};
 
myFunction(); // window
 
var myProxyFunction = $.proxy( myFunction, myObject );
 
myProxyFunction();

$ .browser

$ .browser służy do przekazywania informacji o przeglądarkach

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$ .contains ()

$ .contains () służy do zwracania wartości true, jeśli element DOM dostarczony przez drugi argument jest potomkiem elementu DOM dostarczonego przez pierwszy argument, bez względu na to, czy jest to bezpośredni element podrzędny, czy bardziej zagnieżdżony.

$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );

$ .data ()

$ .data () służy do podania informacji o danych

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>
 
      <script>
         var div = $( "div" )[ 0 ]; jQuery.data( div, "test", { first: 25, last: "tutorials" }); $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

Wynik byłby następujący

The values stored were 25 and tutorials

$ .fn.extend ()

$ .fn.extend () służy do rozszerzania prototypu jQuery

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <label><input type = "checkbox" name = "android"> 
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>
 
      <script>
         jQuery.fn.extend({
			
            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });
 
         // Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();
			
      </script>
   </body>
</html>

Zapewnia dane wyjściowe, jak pokazano poniżej -

$ .isWindow ()

$ .isWindow () służy do rozpoznawania okna

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      Is 'window' a window? <b></b>
 
      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

Zapewnia dane wyjściowe, jak pokazano poniżej -

$ .now ()

Zwraca liczbę reprezentującą aktualny czas

(new Date).getTime()

$ .isXMLDoc ()

$ .isXMLDoc () sprawdza, czy plik jest XML, czy nie

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$ .globalEval ()

$ .globalEval () służy do globalnego wykonywania javascript

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$ .dequeue ()

$ .dequeue () służy do wykonania następnej funkcji w kolejce

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>
		
      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>
		
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>
 
      <script>
         $( "button" ).click(function() {
            $( "div" ) .animate({ left: '+ = 400px' }, 2000 ) .animate({ top: '0px' }, 600 ) .queue(function() { $( this ).toggleClass( "red" );
               $.dequeue( this );
            })
				
            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

Zapewnia dane wyjściowe, jak pokazano poniżej -