Pytania rekrutacyjne JQuery

Czym jest jQuery i czym różni się od czystego JavaScriptu?

jQuery to lekka biblioteka JavaScript, która upraszcza operacje na DOM (Document Object Model), obsługę zdarzeń oraz wykonywanie zapytań AJAX. W praktyce oznacza to, że wiele typowych zadań w JavaScript (np. selekcja elementów, manipulacja strukturą strony, animacje) można zrealizować w krótszym kodzie, używając prostszego i bardziej czytelnego API. Różnica polega również na tym, że jQuery zapewnia spójny interfejs we wszystkich głównych przeglądarkach, co eliminuje wiele problemów z kompatybilnością.

Linki referencyjne:

• Wprowadzenie do jQuery (pl)
• Dokumentacja jQuery (ang.)

W jaki sposób dołączyć bibliotekę jQuery do strony internetowej?

Można to zrobić na dwa sposoby:

1. Lokalnie – pobierając paczkę jQuery ze strony jquery.com i umieszczając ją w projekcie, a następnie odwołując się do pliku w znaczniku <script> w kodzie HTML.
2. Zdalnie (CDN) – korzystając z sieci dostarczania treści (np. Google Hosted Libraries lub jQuery CDN). Wtedy w <script> podajemy URL do hostowanego pliku.

Przykładowy kod:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Linki referencyjne:

• Oficjalne źródła do pobrania jQuery (ang.)
• Korzystanie z CDN (ang.)

Jaki jest cel funkcji ready() (np. $(document).ready()) i dlaczego jest ona istotna?

Funkcja ready() gwarantuje, że kod jQuery zostanie wykonany dopiero wtedy, gdy struktura HTML (DOM) zostanie załadowana i jest gotowa do manipulacji. Zapobiega to sytuacji, w której próbujemy odwołać się do elementów, które nie zostały jeszcze utworzone przez przeglądarkę.

Linki referencyjne:

• Metoda .ready() w dokumentacji jQuery (ang.)
• Artykuł o użyciu jQuery ready (pl) (częściowo w języku polskim, ale strona zawiera też sekcje po angielsku)

Jak sprawdzić, której wersji jQuery używamy w trakcie działania aplikacji?

Można odwołać się do właściwości jQuery.fn.jquery lub $.fn.jquery:

console.log($.fn.jquery);

Wyświetli to numer wersji, np. 3.6.0.

Linki referencyjne:

• Sprawdzanie wersji jQuery (ang. StackOverflow)

Jaką rolę pełni symbol $ w jQuery?

Symbol $ jest jedynie aliasem dla obiektu jQuery. Pozwala na skrócony zapis, np. zamiast pisać jQuery(document).ready(), możemy użyć $(document).ready(). W przypadku konfliktu z innymi bibliotekami (używającymi $), można skorzystać z trybu tzw. noConflict i używać pełnej nazwy jQuery.

Linki referencyjne:

• noConflict w jQuery (pl)
• Aliasy w jQuery (ang. oficjalna dokumentacja)

Jakie rodzaje selektorów oferuje jQuery (np. selektory według elementu, klasy, ID)?

• Selektory podstawowe:
  • $('p') – wszystkie elementy <p>
  • $('.nazwa-klasy') – elementy o podanej klasie
  • $('#nazwa-id') – konkretny element o danym identyfikatorze
• Selektory atrybutów: np. $('[name="username"]')
• Selektory hierarchiczne (potomkowie, rodzice, sąsiedzi): np. $('div span'), $('div > ul'), $('h2 + p')
• Selektory pseudoklas (np. :first, :last, :odd, :even).

Linki referencyjne:

• Przegląd selektorów w jQuery (pl)
• Dokumentacja jQuery – sekcja o selektorach (ang.)

W jaki sposób można wybrać wiele elementów (np. kilka klas lub ID) równocześnie?

Możemy łączyć selektory, rozdzielając je przecinkiem, np. $('.klasa1, .klasa2, #jakiesId'). Wtedy jQuery zwróci wspólną kolekcję elementów odpowiadających któremukolwiek z podanych warunków.

Linki referencyjne:

• Wielokrotne selektory (ang. MDN) (stosujemy w CSS, ale działa podobnie w jQuery)

Jakie aspekty wydajnościowe należy brać pod uwagę przy stosowaniu złożonych selektorów?

• Zbyt skomplikowane selektory (np. mocno zagnieżdżone, używające wielu pseudoklas) mogą spowodować wolniejszą pracę parsera selektorów.
• Zamiast tworzyć jeden bardzo złożony selektor, często lepiej jest stosować krótsze, bardziej oczywiste selektory lub selekcję krokową (np. najpierw wybieramy mniejszy zbiór, a następnie filtrujemy).
• Dobrym pomysłem jest cache’owanie często używanych selektorów w zmiennych (zwłaszcza jeśli odwołujemy się do nich wielokrotnie).

Linki referencyjne:

• Wydajność selektorów jQuery (ang.)

Na czym polegają selektory atrybutów (np. "[type='text']") w jQuery?

Selektory atrybutów umożliwiają wybór elementów na podstawie wartości danego atrybutu HTML. Przykładowo:

• $("[type='text']") zwróci wszystkie elementy, które posiadają atrybut type="text".
• $("[data-role='active']") wybierze elementy z atrybutem data-role o wartości active.

Możliwe są także warianty ze znakiem ^ (zaczyna się od), * (zawiera), ~ (zawiera wyraz) itp.

Linki referencyjne:

• Selektory atrybutów w jQuery (pl)
• Dokumentacja jQuery (ang.)

Czym się różnią metody .find() i .children() podczas nawigacji po DOM?

• .find(selector) – wyszukuje wszystkie elementy (wielopoziomowo) wewnątrz wybranego kontenera, pasujące do danego selektora.
• .children(selector?) – zwraca tylko bezpośrednie dzieci elementu (jeden poziom w dół). Można opcjonalnie przekazać selektor, który zawęzi wyniki.

Linki referencyjne:

• .find() w dokumentacji jQuery (ang.)
• .children() w dokumentacji jQuery (ang.)

Jak dodać lub usunąć element HTML w sposób dynamiczny z użyciem jQuery?

• Dodawanie: Można użyć metod takich jak .append() lub .prepend() w celu wstawiania nowego elementu wewnątrz wybranego kontenera.

// Dodanie nowego akapitu na końcu diva o id="container"
  $('#container').append('<p>Treść nowego akapitu</p>');

• Usuwanie: Do usuwania elementów służy metoda .remove().

// Usunięcie wszystkich elementów <p> wewnątrz diva
  $('#container p').remove();

Dodatkowe materiały:

• Kurs jQuery: Dodawanie i usuwanie elementów (pl)
• W3Schools: jQuery DOM Manipulation (ang.)

W jaki sposób modyfikować tekst bądź zawartość HTML wybranych elementów?

• Zmienianie tekstu: metoda .text() pozwala zamienić istniejący tekst wewnątrz elementu na nowy.

$('.element-klasy').text('Nowa treść tekstowa');

• Zmienianie zawartości HTML: metoda .html() pozwala ustawić lub pobrać kod HTML (wraz z tagami) w danym elemencie.

$('#sekcja').html('<strong>Podkreślona treść</strong>');

Dodatkowe materiały:

• Kurs jQuery: Modyfikacja tekstu i HTML (pl)
• Stack Overflow – różnice między .html() i .text() (ang.)

Na czym polega różnica między metodami .html() a .text()?

• .html(): Zwraca lub ustawia dokładny kod HTML wewnątrz wybranego elementu (łącznie z tagami, atrybutami, itp.).
• .text(): Zwraca lub ustawia tylko tekst (bez znaczników). Wszelkie znaczniki HTML zostaną potraktowane jako zwykły tekst.

Dodatkowe materiały:

• Oficjalna dokumentacja jQuery – .html() (ang.)
• Oficjalna dokumentacja jQuery – .text() (ang.)

W jaki sposób sklonować element w jQuery i kiedy może to być potrzebne?

Można użyć metody .clone(), która zwraca kopię wybranego elementu wraz z jego zawartością. Zastosowanie może być potrzebne np. gdy chcemy powielić istniejący formularz, zestaw pól, czy elementy listy:

let kopiaElementu = $('.sekcja-do-klonowania').clone();
$('#miejsce-na-kopie').append(kopiaElementu);

Można również przekazać argumenty do .clone() (true/false), aby skopiować także zdarzenia i dane (np. .clone(true)).

Dodatkowe materiały:

• Kurs jQuery: clone() (pl)
• Dokumentacja jQuery – .clone() (ang.)

Omów różnice między .append(), .prepend(), .after() i .before().

• .append(): Dodaje zawartość na końcu (wewnątrz) wybranego elementu.
• .prepend(): Dodaje zawartość na początku (wewnątrz) wybranego elementu.
• .after(): Dodaje zawartość tuż za (obok) wybranym elementem w drzewie DOM.
• .before(): Dodaje zawartość tuż przed (obok) wybranym elementem w drzewie DOM.

Przykład:

$('#element').append('<p>Dodane na końcu</p>');
$('#element').prepend('<p>Dodane na początku</p>');
$('#element').after('<div>Dodane za elementem</div>');
$('#element').before('<div>Dodane przed elementem</div>');

Dodatkowe materiały:

• Dokumentacja jQuery – .append(), .prepend(), .after(), .before() (ang.)
• Kurs W3Schools (ang.)

Jakie dobre praktyki warto stosować przy masowej modyfikacji DOM, by uniknąć spadku wydajności?

1. Cache’owanie selektorów: Wykorzystuj zmienne, by nie wyszukiwać wielokrotnie tych samych elementów.
2. Zastosowanie fragmentów dokumentu (DocumentFragment) lub tymczasowych kontenerów do budowy złożonych struktur, a następnie jednorazowe wstawienie do DOM.
3. Zmniejsz liczbę reflow/repaint: Unikaj ciągłego dodawania/usuwania elementów w pętli. Lepiej zbudować całą strukturę w pamięci, a potem wstawić do DOM w jednym kroku.
4. Używanie metod kolektywnych (np. .map(), .each()) zamiast wielu osobnych wywołań.

Dodatkowe materiały:

• Dobre praktyki optymalizacji jQuery (ang.)
• Artykuł na temat reflow i repaint w kontekście wydajności (pl) (częściowo w języku polskim lub z polskim komentarzem)

Jak dodać obsługę zdarzenia do elementu za pomocą jQuery?

Używamy metody .on():

$('.button').on('click', function() {
  alert('Kliknięto przycisk!');
});

Można też stosować skrócone metody, np. .click(), .hover(), .keyup(), jednak .on() daje większą kontrolę i jest nowsze.

Dodatkowe materiały:

• Lekcja o zdarzeniach w jQuery (pl)
• Dokumentacja jQuery na temat zdarzeń (ang.)

Czym jest delegacja zdarzeń (event delegation) i jak zaimplementować ją w jQuery?

Delegacja zdarzeń polega na tym, że zamiast rejestrować handler na wielu podobnych elementach (np. w dużej liście), przypisujemy go do rodzica lub przodka tych elementów. Dzięki temu, gdy element powstanie dynamicznie, zdarzenie będzie wciąż obsługiwane.

Przykład:

$('#lista').on('click', 'li', function() {
   alert('Kliknięto element listy: ' + $(this).text());
});

Tutaj event click jest przypisany do #lista, co pozwala obsługiwać kliknięcia na dynamicznie dodanych elementach li.

Dodatkowe materiały:

• Delegacja zdarzeń w jQuery (ang.)
• Stack Overflow – zastosowanie event delegation (ang.)

Czym różni się .on() od starszych metod, takich jak .bind() czy .live()?

• .on() jest nowszym, uniwersalnym sposobem rejestrowania zdarzeń.
• .bind() jest starszą metodą, która rejestruje zdarzenia tylko na istniejących elementach.
• .live() była metodą pozwalającą na delegację zdarzeń, ale została uznana za przestarzałą i usuniętą w nowszych wersjach jQuery.

W praktyce warto używać .on(), ponieważ obsługuje zarówno bezpośrednie wiązanie zdarzeń, jak i delegację w jednym podejściu.

Dodatkowe materiały:

• Różnice między .bind(), .live(), .delegate() i .on() (ang.)
• Dokumentacja jQuery (ang.) – archiwum (dot. przestarzałej metody .live())

Jak obsługiwać zdarzenia (np. click, hover, keyup) w przypadku dynamicznie tworzonych elementów?

Należy stosować delegację zdarzeń (patrz pytanie wyżej). Przy pomocy .on() możemy przypisać zdarzenie do rodzica, który już istnieje, i wskazać selektor elementu docelowego jako drugi parametr:

$('#kontener').on('click', '.element-dynamiczny', function() {
  // Akcja wykonywana przy kliknięciu
});

Dodatkowe materiały:

• Delegacja zdarzeń w dokumentacji jQuery (ang.)