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

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ą 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.)

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

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

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

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

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

Jak powstrzymać propagowanie (bubbling) zdarzenia do elementów nadrzędnych?

W handlerze zdarzenia można wywołać metodę event.stopPropagation():

$('.przycisk').on('click', function(event) {
  event.stopPropagation();
  // Kod obsługi zdarzenia
});

Dodatkowo, jeśli chcemy całkowicie zablokować jakiekolwiek domyślne akcje przeglądarki, możemy użyć event.preventDefault().

Dodatkowe materiały:

• stopPropagation() vs. preventDefault() (ang.) – Stack Overflow

Jakie wbudowane efekty i animacje udostępnia jQuery?

• Efekty ukrywania/pokazywania: .hide(), .show(), .toggle()
• Efekty płynnego przejścia (fading): .fadeIn(), .fadeOut(), .fadeToggle()
• Efekty przesuwania (sliding): .slideDown(), .slideUp(), .slideToggle()
• Animacja ogólna: .animate() (na dowolnych liczbowych właściwościach CSS)

Dodatkowe materiały:

• Kurs jQuery: Efekty i animacje (pl)
• Dokumentacja jQuery – animacje (ang.)

Jakie znaczenie ma parametr callback w metodach animacji jQuery?

Parametr callback pozwala uruchomić określoną funkcję dopiero po zakończeniu danej animacji. Dzięki temu można zsynchronizować kolejne czynności i zapanować nad sekwencją animacji.

$('.box').fadeOut(400, function() {
  // Kod w callbacku, wykona się po zakończeniu fadeOut
  $(this).text('Nowa treść po zniknięciu');
});

Dodatkowe materiały:

• Dokumentacja fadeOut() (ang.)
• jQuery callback concept (ang.)

Jak wykonać żądanie AJAX w jQuery z użyciem .ajax() lub metod pomocniczych .get() i .post()?

Można wykorzystać uniwersalną metodę .ajax() z różnymi konfiguracjami lub skorzystać z uproszczonych metod .get() i .post().

Przykład – .ajax():

$.ajax({
  url: '/api/dane',
  method: 'GET',
  dataType: 'json',
  success: function(response) {
    console.log('Otrzymana odpowiedź:', response);
  },
  error: function(xhr, status, error) {
    console.error('Błąd żądania:', error);
  }
});

Przykład – .get() / .post():

// .get()
$.get('/api/dane', function(response) {
  console.log('Otrzymana odpowiedź z GET:', response);
});

// .post()
$.post('/api/dodaj', { klucz: 'wartość' }, function(response) {
  console.log('Otrzymana odpowiedź z POST:', response);
});

Dodatkowe materiały:

• Kurs jQuery – AJAX (pl)
• Dokumentacja jQuery – Ajax (ang.)

Czym są metody .done(), .fail() i .always() w jQuery?

Metody te są dostępne, gdy wywołujemy .ajax(), .get(), .post() itp. – zwracają one obiekt typu Deferred/Promise. Umożliwiają rejestrowanie akcji, które mają się wykonać w różnych scenariuszach:

• .done() – wywoływana przy pomyślnym zakończeniu.
• .fail() – wywoływana przy błędzie.
• .always() – wywoływana niezależnie od wyniku (sukces/błąd).

Przykład:

$.get('/api/dane')
  .done(function(data) {
    console.log('Sukces:', data);
  })
  .fail(function(xhr) {
    console.error('Błąd:', xhr.status);
  })
  .always(function() {
    console.log('Żądanie zakończone.');
  });

Dodatkowe materiały:

• Dokumentacja jQuery – Deferred Object (ang.)
• Stack Overflow – .done(), .fail() i .always() (ang.)