jQuery: co to jest? Jak działa? Jak używać?

Co to jest jQuery? Jak działa biblioteka (framework) JavaScript? Jak w praktyce używać jQuery na stronach WWW i projektach webowych?

Co to jest i na czym opiera się popularność jQuery? Ta biblioteka pomoże Ci tworzyć skrypty JavaScript i wdrażać nowoczesne rozwiązania na stronie WWW. Nie sprawdzi się jednak w każdym przypadku. Trzeba wiedzieć, jak i kiedy z niej korzystać, by była naprawdę przydatna.

Biblioteka programistyczna jQuery jest jedną z alternatyw dla czystego JavaScript. Korzysta z niej wielu programistów i twórców stron internetowych. Warto jednak wiedzieć, kiedy rzeczywiście wybranie tego rozwiązania może przynieść Ci realne korzyści. Jak zawsze bowiem w takich sytuacjach, wszystko zależy od konkretnego przypadku, Twoich potrzeb i oczekiwań.

jQuery zdecydowanie ułatwia korzystanie z JavaScript. Sprawia, że kod wykorzystywany na stronach internetowych ma wyraźnie krótszą formę. Z drugiej strony jednak to potężne narzędzie, którego potencjał może nie zostać w pełni wykorzystany w przypadku każdej witryny. Może okazać się, że z perspektywy wydajności ta biblioteka zwyczajnie nie będzie Ci potrzebna. Właśnie dlatego tak istotne jest poznanie jej specyfiki. Dzięki temu podejmiesz decyzję, czy jest to rozwiązanie dla ciebie.

Co to jest jQuery?

jQuery to biblioteka programistyczna dla języka JavaScript. Jej zadaniem jest „opakowanie” zwykłego, czystego kodu JavaScript w gotowe rozwiązania. Jej składnia została stworzona w taki sposób, aby poruszanie się po dokumencie było łatwiejsze. Sam kod jest też krótszy i bardziej zrozumiały. Wynika to z faktu, że w wielu przypadkach jQuery jest w stanie zamienić wiele linijek kodu na proste wywołanie pożądanej funkcji, mieszczące się w jednej linijce.

Biblioteka jQuery jest darmowym frameworkiem, działającym na licencji Open Source. Oznacza to, że jej kod jest powszechnie dostępny i każdy może dostosowywać go do swoich potrzeb. To sprawiło, że wokół tego rozwiązania zgromadziła się liczna i bardzo pomocna społeczność. Wspólnie rozwiązuje ona problemy związane z obsługą jQuery, jak również rozwija jej możliwości. Na swoją stronę wprowadzić możesz bowiem liczne rozszerzenia, działające na zasadzie wtyczek.

Korzystanie z jQuery jest bezproblemowe i daje dużą swobodę. To rozwiązanie bowiem obsługują praktycznie wszystkie przeglądarki na rynku. Pozwala na korzystanie z gotowych funkcji, przyśpieszających pracę programistów front-endowych.

Jednocześnie jednak jQuery pozostaje bardzo rozbudowaną maszyną, która ma wpływ na wydajność witryny. Każda funkcja ma swoją cenę, która prowadzić może do spowolnienia działania strony internetowej. Właśnie dlatego jest to rozwiązanie stosowane raczej przy większych serwisach. W ich przypadku bowiem często użycie czystego JavaScript bywa problematyczne lub nawet całkowicie niemożliwe. W przypadku prostych miejsc w sieci potencjał tkwiący w jQuery może nie zostać wykorzystany do końca, co nie przełoży się też pozytywnie na ich działanie.

Jak działa biblioteka JavaScript – jQuery? Charakterystyka

jQuery to biblioteka programistyczna. Jest zatem plikiem zawierającym i dostarczającym typy danych, dane i podprogramy, które mogą być wykorzystywane z poziomu kodu źródłowego. W praktyce więc długie kody w JavaScript zastępuje krótkimi wywołaniami określonych funkcji. Skrypty wykorzystywane w tej bibliotece są czytelne i zwięzłe. Zachowują prostą składnię, a sama jQuery może być rozbudowywana przy użyciu dodatkowych rozszerzeń.

Pozwala na sprawne korzystanie z atrybutów i selektorów, a dodatkowo umożliwia obsługę zdarzeń. Przypisuje i zmienia style do elementów DOM, a także pozwala na manipulację jego obiektami. Oferuje dobrze opracowaną dokumentację, opisującą każdą funkcję, wraz z oznaczeniem wersji, w której pojawiła się pierwszy raz.

Można powiedzieć, że jQuery ułatwia tworzenie interaktywnych i atrakcyjnych wizualnie miejsc w sieci. Sprzyja tworzeniu intuicyjnych interfejsów, zgodnych z zasadami User Experience (UX). Poprawia ich kompatybilność z rozmaitymi platformami i przeglądarkami. Dodatkowo dzięki niej nie ma konieczności sprawdzania niezgodności w kodzie i wykrywania błędów w różnego typu przeglądarkach.

jQuery UI i inne rozszerzenia

Jak wspominaliśmy, jQuery jest projektem na otwartej licencji. Zarówno jego dokumentacja, jak i cały kod biblioteki, są dostępne dla każdego użytkownika. Dzięki temu rozwiązanie to bezustannie się rozwija i zyskuje nowe właściwości. Kody są kopiowane i zmieniane, a najprzydatniejsze modyfikacje są publikowane w formie ogólnodostępnych rozszerzeń.

Wtyczki tworzone przez programistów przybierają najróżniejsze formy. Odpowiadają też na bardzo zróżnicowane potrzeby użytkowników. Wśród najpopularniejszych wymienić można m.in.:

• jQuery IU – jedna z najpopularniejszych wtyczek w sieci. wspiera proces tworzenia interfejsu użytkownika,
• mailcheck.js – redukuje liczbę niepowodzeń rejestracji, sugerując właściwą domenę, gdy użytkownik wpisze ją nieprawidłowo w adresie e-mail,
• hammer.js – biblioteka do obsługi gestów,
• Timeline – pozwala szybko stworzyć oś czasu, obsługując wsparcie m.in. dla YouTube, Twittera (obecnie X) czy Google Maps,
• Credit Card Validator – odpowiada za identyfikację numerów kart kredytowych i sprawdzenie ich długości czy liczb kontrolnych.

To tylko niektóre z rozwiązań często wykorzystywanych przez programistów. Więcej znaleźć ich możesz w Rejestrze wtyczek jQuery na stronie https://plugins.jquery.com/. Tam podzielone są na kilka kategorii:

• interfejs,
• formularze,
• animacje,
• obrazy,
• responsywność,
• i inne.

Biblioteka jQuery – zastosowanie

Wiesz już, że jQuery pozwala na tworzenie zwięzłych i prostych skryptów. Jakie jest jednak praktyczne zastosowanie tej technologii i do czego może zostać użyta w trakcie budowy strony internetowej? Przygotowane z jej pomocą rozwiązania umożliwiają m.in.:

• wykorzystywanie animacji,
• edycję stylów dla elementów,
• używanie selektorów,
• wprowadzanie zmian i modyfikacji do modelu DOM,
• tworzenie własnych zdarzeń i korzystanie z ich rozbudowanych wersji,
• korzystanie z operacji ajaxowych,
• tworzenie dynamicznych rozwiązań na stronie,
• i wiele innych.

Dodawanie biblioteki jQuery do strony internetowej krok po kroku

Korzystanie z biblioteki jQuery wymaga dodania jej do strony internetowej. Aby to zrobić, musisz najpierw pobrać kopię jQuery ze strony internetowej: https://jquery.com/download/. Następnie zapisz plik na swoim dysku i przenieś go na swój serwer. Następnie w sekcji <head> umieść kod:

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

Pamiętaj, by x.x.x. zamienić na swoją wersję biblioteki. Kolejnym krokiem jest dodanie funkcji zwrotnej DOM ready:

$(document).ready(function() {
    // Twój kod
});

Dzięki temu kod będzie uruchamiany od razu, gdy tylko dokument będzie gotowy. Ma on też alternatywną, skróconą wersję, z której możesz skorzystać:

$(function() {
    // Twój kod
});

Na części stron może pojawić się w tym momencie problem. Dotyczy to sytuacji, gdy korzystasz również z innej biblioteki, obsługującej znak dolara. Aby uniknąć takiego zdarzenia, rozważ obsługę jQuery w systemie no conflict. Aby go aktywować, wprowadź:

jQuery.noConflict();

jQuery(function($) {
    // Twój kod
});

Dzięki temu masz dostęp do DOM-u witryny i możesz mieć pewność, że strona jest załadowana. Możesz zatem zacząć nią manipulować i wprowadzać w niej zmiany.

Korzystanie z biblioteki jQuery w praktyce

Podstawowym elementem jQuery jest funkcja jQuery lub $. Może ona przyjmować poszczególne funkcje (np. selektor CSS, elementy DOM czy kod HTML). Co się stanie, jeśli pierwszym znakiem argumentu będzie <? W takim przypadku biblioteka stworzy Fragment DOM, możliwy do dodania do strony.

Alternatywnie do funkcji może zostać przypisany poprawny selektor CSS. W takim przypadku pożądany element zostanie wyszukany w witrynie. Wynikiem ostatecznie będzie więc obiekt jQuery (jQuery.fn.init). Będzie zawierał wszystkie elementy, które będą pasować do selektora.

Funkcjonalności biblioteki jQuery

Ostatnia aktualizacja biblioteki jQuery wciąż pozostaje najczęściej używaną biblioteką JavaScript. Jej popularność wynika przede wszystkim z licznych funkcjonalności, dostępnych dla programistów. Poniżej opisaliśmy najważniejsze z nich, którymi pochwalić się może uproszczony skrypt.

Przechodzenie po elementach obiektów

Po wywołaniu funkcji $ może zostać zwrócony obiekt zawierający szereg metod. jQuery umożliwia przechodzenie po elementach danego obiektu w prosty sposób. Wykorzystać do tego możesz:

• .prev() – zwraca poprzedni element,
• .next() – zwraca następny element,
• .children() – zwraca dzieci danego elementu,
• .siblings() – zwraca rodzeństwo elementu,
• .parents() – zwraca rodziców danego elementu (pierwszy element to parent, następny to parent parent itd.),
• .parent() – zwraca rodzica elementu,
• .not(selektor) – zwraca elementy nienależące do konkretnego selektora,
• .find(selektor) – zwraca elementy pasujące do selektora przekazanego jako argument, które są dziećmi poprzedniego elementu,
• .eq(indeks) -zwraca pojedynczy element, którego indeks jest podany jako argument.

Zdarzenia

Jeśli korzystasz z jQuery, to możesz dodawać tzw. handlers zdarzeń. Podstawową metodą, która na to pozwala, jest:

.on ()

Aby usunąć zdarzenie, możesz użyć:

.off ()

Dodatkowo skorzystać możesz również ze skrótów do dodawania zdarzeń. Wykorzystaj delegację zdarzeń, aby dodać zdarzenie do elementów pojawiających się w przyszłości, np.:

$('x1').on('click', 'li', function() {
   alert('kliknąłeś na element li');
});
$('x1').append('<li>Nowy element</li>');

W takim przypadku funkcja zostanie wywołana po kliknięciu w nowy element. Wynika to z faktu dodania uchwytu zdarzenia do elementu x1.

Manipulacje DOM

Jak wspominaliśmy, jQuery może być wykorzystywana do manipulacji drzewem DOM. Jest to metoda prezentacji złożonych dokumentów HTML i XML. Wykorzystasz do tego m.in.:

• .appendTo(selektor) – dodanie obiektu jQuery do elementu z danym sektorem,
• .append(string) – dodanie zawartości przekazanej jako argument do wskazanego elementu,
• .replaceWith(string) – zamienia wskazane elementy na nowe, przekazane w formie argumentów,
• .remove() – usuwa element z dokumentu,
• .data() – pobiera lub ustawia wartość atrybutu data-nazwa,
• .removeAttr() – pozwala na usunięcie atrybutu.

Efekty – animacje

jQuery umożliwia łatwe tworzenie animacji. Jest do tego wykorzystywana funkcja animate. Wdrożenie takiego rozwiązania może wyglądać np. tak:

$('foo').animate({
    width: '250'
});

Wywoływania łańcuchowe

Metody niezwracające wartości zwracają obiekty jQuery. Mogą to być elementy nowe lub poprzednie. Dzięki temu możliwe jest skorzystanie z wywoływania łańcuchowego, np.:

$('div').css('color', 'blue').find('.item:eq(1)').hide().next().show();

AJAX

Biblioteka jQuery pozwala na korzystanie z funkcji statycznych, dodanych do obiektu dolara. Mogą to być m.in. funkcje do wykonywania zapytań HTTP. Na myśl w pierwszej kolejności przychodzi tu AJAX, przybierająca w tym przypadku formę $.ajax. Można wykorzystać go do stworzenia kodu wykonującego zapytanie AJAX-owie, np. typu GET. W takim przypadku może on zamienić zawartość elementu .main na to, co pobierze z serwera:

$.get('strona.html', function(strona) {
   $('.main').replaceWith(strona);
});

Pętle

Iteracja po elementach jest możliwa z wykorzystaniem metody .each(). Przykładem może być:

$('foo').each(function() {
  $(this).find('span').css('color', 'red');
});

Alternatywnie wykorzystać możesz w tym przypadku również metodę .map(), która zwraca obiekt jQuery.

Rozszerzenia biblioteki

Funkcjonalności i możliwości biblioteki jQuery mogą być rozwijane przez użytkowników. W internecie nie brak rozszerzeń pozwalających na wdrażanie nowych rozwiązań w ramach tego oprogramowania. Bez problemu znajdziesz wiele pluginów, dzięki którym łatwiej będzie Ci dostosować ostateczny wygląd witryny do własnych oczekiwań.

Nic ponadto nie stoi na przeszkodzie, by samodzielnie utworzyć nowe rozszerzenia, przydatne w konkretnej sytuacji. Aby skorzystać z tej możliwości, musisz dodać nową właściwość do obiektu $.fn.

Alternatywnie możesz również skorzystać z customowych selektorów, które są Ci potrzebne. Przykładem jest tu np. len(), dzięki któremu pobierane będą wyłącznie elementy krótsze od wskazanych w kodzie. Zrobisz to przy użyciu przykładowego fragmentu:

$.expr[':'].len = function(obj, index, meta, stack) {
    var self = $(obj);
    var text = self.text();
    var len = parseInt(meta[6]);
    return text.length < len;
};

Wywołać go możesz przy użyciu:

$('div:len(6)').css('color', 'blue');

W tym przypadku kolor niebieski stosowany będzie dla wszystkich elementów składających się z tekstu poniżej 6 znaków.

Pokazywanie i ukrywanie elementów na stronie internetowej

jQuery udostępnia kilka sposobów na ukrywanie i pokazywanie elementów. Za podstawowy uznać można natomiast show() i hide(). Aby pokazać dany zasób, skorzystaj z:

$("#someDiv").show();

Aby schować dany zasób, użyj:

$("#someDiv").hide();

Możesz zastosować również płynne pokazywanie i ukrywanie zasobów. W tym celu skorzystaj z:

• $el.fadeIn(szybkosc*, funkcjaZwrotna*) – do płynnego pokazywania elementów,
• $el.fadeOut(szybkosc*, funkcjaZwrotna*) – do płynnego ukrywania elementów.

Dołączanie elementów do strony internetowej

Jeśli chcesz dołączyć zasoby do witryny WWW, możesz skorzystać z kilku sposobów. Najczęściej wykorzystywane w tym przypadku są:

• $parent.append($el) – do dołączania insertEl na końcu parenta,
• $parent.prepend($el) – do dołączania insertEl na początku parenta,
• $parent.before($el) – do dołączania insertEl przed wskazanym elementem,
• $parent.after($el)– do dołączania instertEl za wskazanym elementem.

Usuwanie elementów ze strony internetowej

W przypadku chęci usunięcia danego elementu z witryny WWW możesz skorzystać z remove(). Wprowadzenie tego rozwiązania może wyglądać następująco:

const $btn = $(".button");
$btn.remove();

Zalety i wady jQuery

Zalety jQuery:

• otwarty kod Open Source na wolnej licencji,
• pełna skalowalność,
• bogata i szczegółowa dokumentacja,
• pomocna i liczna społeczność internetowa,
• ogromna liczba rozszerzeń tworzonych przez sympatyków oprogramowania,
• kompatybilność ze wszystkimi popularnymi przeglądarkami internetowymi,
• łatwość korzystania,
• możliwość wygodnego tworzenia własnych rozszerzeń.

Wady jQuery:

• mnogość dostępnych wtyczek utrudnia znalezienie optymalnego rozwiązania,
• brak weryfikacji rozwiązań dostępnych w internecie,
• potężne narzędzie, zbyt zaawansowane dla podstawowych stron internetowych,
• trudność wykorzystania potencjału w przypadku przeciętnych serwisów,
• większy negatywny wpływ na wydajność serwisu niż czysty JavaScript.

Biblioteka jQuery czy czysty JavaScript – co wybrać?

Jak zapewne już się domyślasz, nie ma jednoznacznej odpowiedzi na pytanie znajdujące się w tym nagłówku. Wszystko bowiem zależy od Twojej konkretnej sytuacji. Musisz więc najpierw zastanowić się, jakie są Twoje potrzeby i oczekiwania. Następnie przemyśl, jak ma wyglądać Twoje miejsce w sieci i do czego będzie w głównej mierze wykorzystywane.

W praktyce natomiast jQuery nie jest niezbędne w przypadku większości małych i średniej wielkości stron internetowych. To naprawdę potężne oprogramowanie, a korzystanie z niego ma swoją cenę. Jest ona spłacana niestety w wydajności witryny internetowej. Rozważ więc, czy swoich rozwiązań nie możesz wdrożyć bez tej biblioteki, stosując czysty kod JavaScript. Może być to opcja mniej obciążająca serwis, a równie skuteczna.

Fakt, że najwięksi gracze na rynku stosują (lub stosowali) ten rodzaj biblioteki. Wymienić tu można Twittera, Amazon, LinkedIN czy PayPal. W przypadku mniej obleganych witryn jednak wydobycie jego prawdziwego potencjału będzie wyzwaniem. W wielu sytuacjach może okazać się zresztą całkowicie niemożliwe. Ostatecznie zatem strat z jego wybrania będzie więcej niż realnych korzyści.