jQuery - jQuery

jQuery

Pierwotny autor (autorzy)	John Resig
Deweloper(zy)	Zespół jQuery
Pierwsze wydanie	26 sierpnia 2006 ; 15 lat temu ( 2006-08-26 )
Wersja stabilna	3.6.0 / (2 marca 2021 ; 7 miesięcy temu ) ( 02.03.2021 )
Magazyn
Napisane w	JavaScript
Platforma	Zobacz § Obsługa przeglądarki
Rozmiar	27–274 KB
Rodzaj	Biblioteka JavaScript
Licencja	MIT
Strona internetowa	jquery .com

jQuery to biblioteka JavaScript zaprojektowana w celu uproszczenia przechodzenia i manipulowania drzewami HTML DOM , a także obsługi zdarzeń , animacji CSS i Ajax . Jest to bezpłatne oprogramowanie o otwartym kodzie źródłowym, korzystające z liberalnej licencji MIT . Według stanu na maj 2019 r. z jQuery korzysta 73% z 10 milionów najpopularniejszych stron internetowych. Analiza internetowa wskazuje, że jest to najszerzej stosowana biblioteka JavaScript z dużym marginesem, mająca co najmniej 3 do 4 razy większe wykorzystanie niż jakakolwiek inna biblioteka JavaScript.

Składnia jQuery została zaprojektowana tak, aby ułatwić nawigację po dokumencie, wybieranie elementów DOM , tworzenie animacji , obsługę zdarzeń i tworzenie aplikacji ajaxowych . jQuery zapewnia również programistom możliwość tworzenia wtyczek na bazie biblioteki JavaScript. Umożliwia to programistom tworzenie abstrakcji dla interakcji i animacji niskiego poziomu, zaawansowanych efektów i wysokopoziomowych widżetów tematycznych. Modułowe podejście do biblioteki jQuery pozwala na tworzenie potężnych dynamicznych stron internetowych i aplikacji webowych.

Zestaw podstawowych funkcji jQuery — wybór elementów DOM, przemierzanie i manipulacja — włączonych przez jego silnik selektorów (o nazwie „Sizzle” od wersji 1.3), stworzył nowy „styl programowania”, łącząc algorytmy i struktury danych DOM. Styl ten wpłynął na architekturę innych frameworków JavaScript, takich jak YUI v3 i Dojo , później stymulując tworzenie standardowego API Selectors . Później ten styl został wzbogacony o głębszą fuzję algorytmu i danych w spadkobiercy jQuery, frameworku D3.js.

Microsoft i Nokia umieszczają jQuery na swoich platformach. Firma Microsoft dołączyła go do programu Visual Studio do użytku w ramach platform Microsoft ASP.NET AJAX i ASP.NET MVC , podczas gdy firma Nokia zintegrowała go z platformą programistyczną Web Run-Time.

Przegląd

jQuery, w swej istocie, jest biblioteką do manipulacji Document Object Model (DOM). DOM jest reprezentacją struktury drzewa wszystkich elementów strony internetowej. jQuery upraszcza składnię wyszukiwania, wybierania i manipulowania tymi elementami DOM. Np. jQuery może służyć do wyszukiwania elementu w dokumencie z określoną właściwością (np. wszystkie elementy ze znacznikiem h1 ), zmiany jednego lub więcej jego atrybutów (np. kolor, widoczność) lub sprawienia, by reagował na zdarzenie ( np. kliknięcie myszą).

jQuery zapewnia również paradygmat obsługi zdarzeń, który wykracza poza podstawowy wybór i manipulację elementami DOM. Przypisanie zdarzenia i definicja funkcji wywołania zwrotnego zdarzenia odbywa się w jednym kroku w jednym miejscu w kodzie. jQuery ma również na celu włączenie innych często używanych funkcjonalności JavaScript (np. zanikanie i zanikanie podczas ukrywania elementów, animacje poprzez manipulowanie właściwościami CSS ).

Zasady programowania z jQuery to:

• Rozdzielenie JavaScript i HTML: Biblioteka jQuery zapewnia prostą składnię do dodawania obsługi zdarzeń do DOM za pomocą JavaScript, zamiast dodawania atrybutów zdarzeń HTML do wywoływania funkcji JavaScript. W ten sposób zachęca programistów do całkowitego oddzielenia kodu JavaScript od znaczników HTML.
• Zwięzłość i przejrzystość: jQuery promuje zwięzłość i przejrzystość dzięki funkcjom takim jak funkcje „łańcuchowe” i skrócone nazwy funkcji.
• Eliminacja niezgodności między przeglądarkami: Silniki JavaScript w różnych przeglądarkach różnią się nieznacznie, więc kod JavaScript działający w jednej przeglądarce może nie działać w innej. Podobnie jak inne zestawy narzędzi JavaScript, jQuery obsługuje wszystkie te niespójności między przeglądarkami i zapewnia spójny interfejs, który działa w różnych przeglądarkach.
• Rozszerzalność: Nowe zdarzenia, elementy i metody można łatwo dodawać, a następnie ponownie wykorzystywać jako wtyczkę.

Historia

jQuery zostało pierwotnie stworzone w styczniu 2006 roku w BarCamp NYC przez Johna Resiga , pod wpływem wcześniejszej biblioteki cssQuery Deana Edwardsa . Obecnie jest utrzymywany przez zespół programistów pod kierownictwem Timmy'ego Willisona (z silnikiem selektora jQuery, Sizzle, kierowany przez Richarda Gibsona).

jQuery pierwotnie pod licencją CC BY-SA 2.5 , a zmiany licencji na licencji MIT w roku 2006. Pod koniec 2006 roku było to dual-licencjonowany pod GPL licencji i MIT. Ponieważ spowodowało to pewne zamieszanie, w 2012 roku GPL została wycofana i jest teraz licencjonowana tylko na podstawie licencji MIT.

Popularność

• W 2015 r. jQuery było używane w 62,7% z 1 miliona najpopularniejszych witryn (wg BuiltWith) oraz w 17% wszystkich witryn internetowych.
• W 2017 r. jQuery było używane w 69,2% z 1 miliona najlepszych stron internetowych (wg Libscore).
• W 2018 r. jQuery było używane w 78% z 1 miliona najpopularniejszych witryn.
• W 2019 r. jQuery było używane w 80% z 1 miliona najlepszych witryn internetowych (według BuiltWith) i 74,1% z 10 milionów najlepszych (według W3Techs).
• Według stanu na kwiecień 2021 r. z jQuery korzysta 77,8% z 10 milionów najlepszych witryn internetowych (według W3Techs) .

Cechy

jQuery zawiera następujące funkcje:

• Wybory elementów DOM za pomocą wieloprzeglądarkowego mechanizmu selektora open source Sizzle , spin-off projektu jQuery
• Manipulacja DOM oparta na selektorach CSS, która wykorzystuje nazwy i atrybuty elementów, takie jak id i klasa, jako kryteria wyboru węzłów w DOM
• Wydarzenia
• Efekty i animacje
• Ajaks
• Obiekty Deferred i Promise do sterowania przetwarzaniem asynchronicznym
• JSON parsowania
• Rozszerzalność dzięki wtyczkom
• Narzędzia, takie jak wykrywanie funkcji
• Metody zgodności, które są natywnie dostępne w nowoczesnych przeglądarkach, ale wymagają rozwiązań zastępczych w przypadku starszych przeglądarek, takich jak jQuery.inArray()i jQuery.each().
• Obsługa wielu przeglądarek

Obsługa przeglądarki

jQuery 3.0 i nowsze obsługują „bieżące wersje 1” (co oznacza bieżącą stabilną wersję przeglądarki i wersję, która ją poprzedzała) Firefox (i ESR), Chrome , Safari i Edge oraz Internet Explorer 9 i nowsze. Na urządzeniach mobilnych obsługuje iOS 7 i nowsze oraz Androida 4.0 i nowsze.

Dystrybucja

Biblioteka jQuery jest zwykle dystrybuowana jako pojedynczy plik JavaScript, który definiuje wszystkie jej interfejsy, w tym funkcje DOM, Events i Ajax. Można go umieścić na stronie internetowej, łącząc się z kopią lokalną lub jedną z wielu kopii dostępnych na serwerach publicznych. jQuery ma sieć dostarczania treści (CDN) hostowaną przez MaxCDN. Google w usłudze Google Hosted Libraries i Microsoft również hostują bibliotekę.

Przykład łączenia kopii biblioteki lokalnie (z tego samego serwera, na którym znajduje się strona internetowa):

<script src="jquery-3.5.1.min.js"></script>

Przykład podłączenia kopii biblioteki z publicznego CDN jQuery:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

Berło

Funkcje

jQuery udostępnia dwa rodzaje funkcji , statyczne funkcje użytkowe i metody obiektów jQuery . Każdy ma swój własny styl użytkowania.

Oba są dostępne przez główny identyfikator jQuery: jQuery. Ten identyfikator ma alias o nazwie $. Dostęp do wszystkich funkcji można uzyskać za pomocą jednej z tych dwóch nazw.

jQuery metody

jQueryFunkcja jest fabrycznie do utworzenia obiektu jQuery który stanowi jeden lub więcej węzłów DOM. Obiekty jQuery mają metody manipulowania tymi węzłami. Metody te (czasami nazywane poleceniami) można łączyć w łańcuchy, ponieważ każda metoda zwraca również obiekt jQuery.

Dostęp do wielu węzłów DOM i manipulowanie nimi w jQuery zwykle rozpoczyna się od wywołania $funkcji z ciągiem selektora CSS. Zwraca obiekt jQuery odwołujący się do wszystkich pasujących elementów na stronie HTML . $("div.test")na przykład zwraca obiekt jQuery ze wszystkimi divelementami class test. Ten zestaw węzłów można manipulować, wywołując metody na zwróconym obiekcie jQuery.

Narzędzia statyczne

Są to funkcje narzędziowe i nie działają bezpośrednio na obiekt jQuery. Są one dostępne jako metody statyczne w identyfikatorze jQuery lub $. Na przykład $.ajax()jest metodą statyczną.

Tryb bezkonfliktowy

jQuery udostępnia $.noConflict()funkcję, która rezygnuje z kontroli nad $nazwą. Jest to przydatne, jeśli jQuery jest używane na stronie sieci Web, która łączy również inną bibliotekę, która wymaga $symbolu jako identyfikatora. W trybie bezkonfliktowym programiści mogą używać jQueryjako zamiennika $bez utraty funkcjonalności.

Typowy punkt początkowy

Zazwyczaj jQuery jest używane przez umieszczenie kodu inicjującego i funkcji obsługi zdarzeń w programie . Jest to wywoływane przez jQuery, gdy przeglądarka zakończy konstruowanie DOM dla bieżącej strony internetowej. $(handler)

$(function () {
        // This anonymous function is called when the page has completed loading.
        // Here, one can place code to create jQuery objects, handle events, etc.
});

lub

$(fn); // The function named fn, defined elsewhere, is called when the page has loaded.

Historycznie rzecz biorąc, $(document).ready(callback)był de facto idiomem do uruchamiania kodu po przygotowaniu DOM. Jednak od wersji jQuery 3.0 programiści są zachęcani do używania znacznie krótszej $(handler)sygnatury.

Łączenie

Metody obiektów jQuery zazwyczaj zwracają również obiekt jQuery, który umożliwia wykorzystanie łańcuchów metod :

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

Ten wiersz znajduje wszystkie div elementy z atrybutem class test, a następnie rejestruje obsługę zdarzeń na każdym elemencie dla zdarzenia „click”, a następnie dodaje atrybut class foodo każdego elementu.

Niektóre metody obiektów jQuery pobierają określone wartości (zamiast modyfikowania stanu). Przykładem tego jest val()metoda, która zwraca bieżącą wartość elementu wprowadzania tekstu . W takich przypadkach instrukcja, taka jak $('#user-email').val()nie może być używana do tworzenia łańcuchów, ponieważ wartość zwracana nie odwołuje się do obiektu jQuery.

Tworzenie nowych elementów DOM

Oprócz dostępu do istniejących węzłów DOM poprzez jQuery, możliwe jest również tworzenie nowych węzłów DOM, jeśli ciąg przekazany jako argument do fabryki $() wygląda jak HTML. Na przykład poniższy kod znajduje selectelement HTML i tworzy nowy optionelement o wartości „VAG” i etykiecie „Volkswagen”, który jest następnie dołączany do menu wyboru :

$('select#car-brands')
  .append($('<option>')
    .prop(value,"VAG")
    .text('Volkswagen')
  );

Ajaks

Możliwe jest tworzenie żądań Ajax (z obsługą wielu przeglądarek ) w $.ajax()celu załadowania i manipulowania danymi zdalnymi.

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

Ten przykład publikuje dane name=Johni location=Bostondo /process/submit.phpna serwerze. Po zakończeniu tego żądania funkcja sukcesu jest wywoływana, aby ostrzec użytkownika. Jeśli żądanie się nie powiedzie, poinformuje użytkownika o niepowodzeniu, statusie żądania i konkretnym błędzie.

Powyższy przykład używa metod .then()i .catch()do rejestrowania wywołań zwrotnych, które są uruchamiane po zakończeniu odpowiedzi. Te wywołania zwrotne obietnic muszą być używane ze względu na asynchroniczną naturę żądań Ajax .

Wtyczki jQuery

Architektura jQuery umożliwia programistom tworzenie kodu wtyczek w celu rozszerzenia jego funkcji. W sieci dostępne są tysiące wtyczek jQuery, które obejmują szereg funkcji, takich jak pomocniki Ajax, usługi sieciowe , siatki danych, listy dynamiczne, narzędzia XML i XSLT , przeciąganie i upuszczanie , zdarzenia, obsługa plików cookie i okna modalne .

Ważnym źródłem wtyczek jQuery jest subdomena wtyczek witryny projektu jQuery. Wtyczki w tej subdomenie zostały jednak przypadkowo usunięte w grudniu 2011 r. w celu usunięcia spamu ze strony. Nowa witryna jest repozytorium hostowanym na GitHub , co wymagało od programistów ponownego przesłania wtyczek i spełnienia nowych wymagań dotyczących przesyłania. jQuery udostępnia „Centrum edukacji”, które może pomóc użytkownikom zrozumieć JavaScript i rozpocząć tworzenie wtyczek jQuery.

Aby stworzyć takie wtyczki, programiści mogą albo napisać własny kod od zera, albo zbudować na istniejącej strukturze, takiej jak jQuery Boilerplate .

Historia wydań

Ramy testowe

Qunit to framework automatyzacji testów używany do testowania projektu jQuery. Zespół jQuery opracował ją jako własną bibliotekę do testów jednostkowych. Zespół jQuery używa go do testowania swojego kodu i wtyczek, ale może testować dowolny ogólny kod JavaScript, w tym kod JavaScript po stronie serwera.

Od 2011 roku zespół testowy jQuery używa Qunit z TestSwarm do testowania każdego wydania kodu jQuery.

Alternatywy dla jQuery

Uproszczona zadania, takie jak przechodzenie dokumentów HTML, animacja i obsługa zdarzeń, solidna biblioteka JavaScript jQuery zmieniła oblicze tworzenia stron internetowych. Według eksperta ds. technologii internetowych W3Techs, według stanu na maj 2019 r. jQuery jest nadal używane w 74 procentach znanych stron internetowych. Niemniej jednak, biblioteka jQuery, która zadebiutowała w sierpniu 2006 roku, jest obecnie postrzegana przez niektórych programistów jako starsza technologia, której czas już minął. W ostatnich latach pojawiły się alternatywy dla jQuery, takie jak biblioteka Cash lub nawet nowoczesny, waniliowy JavaScript, teraz, gdy wszystkie przeglądarki internetowe obsługują JavaScript w ten sam sposób, a jQuery nie jest już potrzebne do rozwiązywania problemów ze zgodnością. Argumenty na Reddicie i filmy na YouTube sprawiają, że jQuery stało się przestarzałe, a przynajmniej nie jest tak istotne, jak kiedyś.

—  Paul Krill, InfoWorld (2019)

Ponieważ kompatybilność między przeglądarkami nie jest już tak dużym problemem, większość jQuery można obecnie zastąpić nowoczesnymi standardami internetowymi, bez utraty wygody. Częściowo z tego powodu GitHub usunął jQuery ze swoich stron w 2018 roku.

Biblioteki alternatywne

• Gotówka
• Zepto

Zobacz też

• Porównanie frameworków JavaScript
• jQuery Mobile
• jQuery UI

Bibliografia

Dalsza lektura

• John Resig (mówca) (13 kwietnia 2007). John Resig: Zaawansowanie JavaScript za pomocą bibliotek (film na YouTube) . Teatr YUI . Źródło 9 stycznia 2018 .
• Kryl, Paul (31 sierpnia 2006). "Deweloperzy JavaScript, .Net pomogli w osobnym projekcie" . InfoŚwiat . Źródło 15 kwietnia 2019 .
• Taft, Darryl K. (30 sierpnia 2006). "jQuery ułatwia rozwój JavaScript, AJAX" . eTydzień . Źródło 15 kwietnia 2019 .

Zewnętrzne linki

• Oficjalna strona internetowa