// pytania i odpowiedzi jQuery
Pytania rekrutacyjne z jQuery — od podstaw i selektorów przez obsługę zdarzeń i AJAX, aż po animacje i integrację z CDN. Kliknij pytanie żeby zobaczyć odpowiedź, oznacz ✓ gdy je znasz.
01Czym jest jQuery?✓▶
jQuery to szybka, lekka i bogata w funkcje biblioteka JavaScript działająca po stronie klienta. Dostarcza prosty, spójny interfejs do manipulacji DOM, obsługi zdarzeń, animacji i komunikacji AJAX — działający w każdej przeglądarce.
Przed jQuery kod JavaScript był znacznie dłuższy i trudniejszy do utrzymania nawet dla prostych zadań. jQuery zrewolucjonizowało front-end development gdy JS brakowało standardowych API.
02Czy jQuery jest językiem programowania?✓▶
Nie. jQuery nie jest językiem programowania — to biblioteka napisana w JavaScript. Dostarcza gotowe funkcje do pracy z DOM, obsługi zdarzeń, komunikacji AJAX i animacji, ale sam JavaScript jest językiem który ją napędza.
03Jaka jest różnica między jQuery a JavaScript?✓▶
JavaScript to język programowania, natomiast jQuery to biblioteka zbudowana na tym języku.
- JavaScript — wbudowany w każdą przeglądarkę, daje pełną kontrolę nad stroną;
- jQuery — upraszcza JavaScript, eliminuje powtarzalny kod, zapewnia kompatybilność między przeglądarkami;
- jQuery nie zastępuje JS — każda operacja jQuery "pod spodem" to JavaScript.
04Czy jQuery zastępuje JavaScript?✓▶
Nie. jQuery jest biblioteką napisaną w JavaScript — nie zastępuje go, tylko go rozszerza i upraszcza. Wszystko co robi jQuery można zrobić w czystym JavaScript. Znajomość JS jest fundamentem do rozumienia jQuery.
05Dlaczego używamy jQuery?✓▶
- Bardzo łatwa w nauce i obsłudze — selektory CSS zamiast rozbudowanego API;
- Kompatybilność z wieloma przeglądarkami (w tym starszymi);
- Mniej kodu = wyższa wydajność programisty;
- Szybka i rozszerzalna — ogromny ekosystem pluginów;
- Upraszcza AJAX, animacje i manipulację DOM;
- Duża społeczność i bogata dokumentacja.
06Czym jest $() w jQuery?✓▶
$() to alias funkcji jQuery() — główna funkcja biblioteki. Opakowuje (wraps) dowolny obiekt w obiekt jQuery, umożliwiając wywołanie metod jQuery na elementach DOM.
// Te dwa zapisy są równoważne:
$('#myButton').click(function() { ... });
jQuery('#myButton').click(function() { ... });
$('p') // wszystkie <p>
$('#id') // element z id
$('.class') // elementy z klasą
07jQuery działa po stronie klienta czy serwera?✓▶
jQuery działa wyłącznie po stronie klienta (client-side). Jest biblioteką JavaScript uruchamianą w przeglądarce użytkownika. Manipuluje DOM, obsługuje zdarzenia i komunikuje się z serwerem przez AJAX — ale sam kod wykonywany jest w przeglądarce, nie na serwerze.
08jQuery spełnia standard W3C?✓▶
Nie — jQuery nie jest standardem W3C. W3C (World Wide Web Consortium) ustanawia standardy web (HTML, CSS, DOM). jQuery to biblioteka open-source tworzona przez jQuery Foundation — działa na bazie standardów W3C, ale sama standardem nie jest.
Ciekawostka: wiele rozwiązań które jQuery popularyzowało (querySelector, classList, fetch) zostało następnie standaryzowane przez W3C jako natywne API przeglądarek.
09Jakie znasz selektory w jQuery i jakie są ich typy?✓▶
Selektory jQuery bazują na selektorach CSS. Trzy główne typy:
- CSS Selectors — 'p', '#id', '.class', 'div > p';
- Custom (jQuery) Selectors — ':first', ':last', ':even', ':odd', ':visible', ':hidden';
- XPath Selectors — ścieżkowe (rzadko używane, starsze wersje).
$('*') // wszystkie elementy
$('p:first') // pierwszy <p>
$('[href]') // elementy z atrybutem href
$('[type=text]') // inputy tekstowe
10Jaka jest różnica między selektorem ID a selektorem klasy?✓▶
- #id — selektuje dokładnie jeden element o podanym ID (ID musi być unikalne na stronie). Szybszy od selektora klasy.
- .class — selektuje wszystkie elementy o podanej klasie CSS. Może zwrócić wiele elementów.
$('#submit-btn') // 1 element
$('.card') // N elementów
11Jaka jest różnica między metodami find() a children()?✓▶
- find() — przeszukuje wszystkie poziomy drzewa DOM wgłąb (potomków, wnuków itd.);
- children() — zwraca tylko bezpośrednich potomków (jeden poziom głębiej).
$('#parent').find('span') // WSZYSTKIE span w #parent
$('#parent').children('span') // tylko BEZPOŚREDNIE span
12Jak dodać i usunąć klasę CSS używając jQuery?✓▶
$('.box').addClass('active'); // dodaj klasę
$('.box').removeClass('active'); // usuń klasę
$('.box').toggleClass('active'); // toggle
$('.box').hasClass('active'); // true/false
$('.box').addClass('active highlight'); // wiele klas
13Jaka jest różnica między attr() a prop()?✓▶
- attr() — pobiera/ustawia atrybuty HTML (wartości zapisane w HTML, z kodu źródłowego).
- prop() — pobiera/ustawia właściwości DOM (aktualny stan elementu w przeglądarce).
// Checkbox:
$('#cb').attr('checked') // "checked" lub undefined (HTML)
$('#cb').prop('checked') // true/false (aktualny stan)
Zasada: dla stanów boolowskich (checked, disabled, selected) używaj prop(). Dla wartości jak href, src, id — attr().
14Czym jest filtr w jQuery i do czego służy?✓▶
Metoda filter() zawęża zestaw dopasowanych elementów do tych spełniających podane kryterium. Filtruje wynik pierwotnego zapytania.
$('li').filter(':even') // parzyste <li>
$('p').filter('.highlight') // <p> z klasą
$('div').filter(function() {
return $(this).text().length > 10;
});
15Czy jQuery HTML może działać dla dokumentów XML?✓▶
Nie. jQuery HTML działa tylko z dokumentami HTML. Metody manipulacji DOM jQuery opierają się na strukturze HTMLDocument — nie obsługują XMLDocument. Do pracy z XML można użyć natywnego DOMParser lub bibliotek dedykowanych XML.
16Czym jest method chaining w jQuery?✓▶
Method chaining pozwala wywoływać wiele metod jQuery jedna po drugiej na tym samym elemencie. Możliwe bo każda metoda jQuery zwraca obiekt jQuery (this).
// Bez chainingu — 3 osobne zapytania do DOM
$('#box').addClass('active');
$('#box').css('color', 'red');
$('#box').slideDown();
// Z chainingiem — jedno zapytanie
$('#box').addClass('active').css('color', 'red').slideDown();
17Gdzie jest punkt startowy wykonania kodu jQuery?✓▶
Punkt startowy to $(document).ready() — wykonuje się gdy DOM jest w pełni załadowany (nie czeka na obrazy). Odpowiednik natywnego DOMContentLoaded.
// Klasyczny zapis
$(document).ready(function() { // kod jQuery tutaj });
// Skrót (zalecany)
$(function() { // kod jQuery tutaj });
18Czy na stronie można użyć document.ready() wielokrotnie?✓▶
Tak. $(document).ready() może być użyta wiele razy. Wszystkie jej callbacki zostaną wykonane po załadowaniu DOM — w kolejności zdefiniowania. Przydatne gdy różne fragmenty kodu (np. z różnych plików) definiują własną inicjalizację.
19Jak dołączyć i usunąć event handler w jQuery?✓▶
// Dołącz event handler
$('#btn').on('click', function() { console.log('Kliknięto!'); });
// Skróty dla popularnych zdarzeń
$('#btn').click(function() { ... });
$('input').change(function() { ... });
$('form').submit(function() { ... });
// Usuń event handler
$('#btn').off('click');
$('#btn').off(); // usuń wszystkie handlery
20Czym jest event delegation w jQuery?✓▶
Event delegation polega na przypisaniu handlera do elementu nadrzędnego zamiast do każdego dziecka osobno. Działa też dla elementów dodanych dynamicznie po załadowaniu strony.
// Bez delegation — nie działa dla nowych .item
$('.item').click(function() { ... });
// Z delegation — działa zawsze
$('ul').on('click', '.item', function() { ... });
Jeden handler zamiast N handlerów — wydajniejsze rozwiązanie.
21Jak zapobiec domyślnemu zachowaniu zdarzenia?✓▶
$('a').click(function(e) {
e.preventDefault(); // zatrzymaj domyślne (np. nawigację)
e.stopPropagation(); // zatrzymaj bubbling do rodzica
return false; // = oba powyższe naraz
});
$('form').submit(function(e) {
e.preventDefault(); // zapobiegaj przeładowaniu strony
});
22Czym jest metoda trigger() w jQuery?✓▶
Metoda trigger() programowo wywołuje zdarzenie na elemencie — jakby użytkownik je wywołał klikając.
$('#btn').trigger('click'); // symuluje kliknięcie
$('#btn').click(); // skrót — to samo
$('input').triggerHandler('focus'); // nie bąbelkuje
23Czym jest AJAX w kontekście jQuery?✓▶
AJAX (Asynchronous JavaScript And XML) pozwala na komunikację z serwerem bez przeładowania strony. jQuery znacznie upraszcza jego obsługę przez metodę $.ajax() i wygodne skróty.
$.ajax({
url: '/api/users',
method: 'GET',
success: function(data) { console.log(data); },
error: function(err) { console.error(err); }
});
24Jakie skróty AJAX udostępnia jQuery?✓▶
// GET
$.get('/api/users', function(data) { ... });
// POST
$.post('/api/save', { name: 'Jan' }, function(res) { ... });
// Pobieranie JSON
$.getJSON('/api/data.json', function(json) { ... });
// Załaduj HTML bezpośrednio do elementu
$('#content').load('/partial.html');
25Czym jest Deferred Object ($.Deferred) w jQuery?✓▶
$.Deferred to implementacja wzorca Promise w jQuery (poprzedza natywne Promise ES6). Pozwala na zarządzanie asynchronicznymi operacjami.
function fetchData() {
var dfd = $.Deferred();
setTimeout(() => dfd.resolve('dane'), 1000);
return dfd.promise();
}
fetchData()
.done(function(data) { console.log(data); })
.fail(function(err) { console.error(err); })
.always(function() { console.log('koniec'); });
26Jak serializować dane formularza do wysłania AJAX?✓▶
// serialize() — zwraca string URL-encoded
var data = $('#myForm').serialize();
// "name=Jan&email=jan%40example.com"
// serializeArray() — zwraca tablicę obiektów
var arr = $('#myForm').serializeArray();
$.post('/save', $('#myForm').serialize(), function(res) {
console.log(res);
});
27Jak obsłużyć błędy i globalne zdarzenia AJAX?✓▶
// Lokalna obsługa błędów
$.ajax({ url: '/api' })
.done(function(data) { /* sukces */ })
.fail(function(xhr, status, err) {
console.error(`Błąd ${xhr.status}: ${err}`);
});
// Globalne zdarzenia AJAX (np. loader)
$(document)
.ajaxStart(function() { $('#loader').show(); })
.ajaxStop(function() { $('#loader').hide(); });
28Jak napisać kod jQuery wybierający wszystkie linki z akapitu?✓▶
// Selektor descendant
$('p a')
// Lub przez find():
$('p').find('a')
// Przykład użycia:
$('p a').each(function() {
console.log($(this).attr('href'));
});
29Jakich metod używamy do zaprezentowania efektów w jQuery?✓▶
$('#el').show(); // pokaż
$('#el').hide(); // ukryj
$('#el').toggle(); // przełącz widoczność
$('#el').fadeIn('slow'); // pojawienie z fade
$('#el').fadeOut(500); // znikanie (500ms)
$('#el').fadeToggle(); // przełącz fade
$('#el').slideDown(); // rozwinięcie w dół
$('#el').slideUp(); // zwinięcie w górę
$('#el').slideToggle(); // przełącz slide
30Jak używać funkcji animate() w jQuery?✓▶
Funkcja animate() stosuje niestandardowe animacje CSS na elementach:
$(selector).animate(
{ properties }, // właściwości CSS
duration, // 'slow'|'fast'|ms
easing, // 'swing' lub 'linear'
callback // funkcja po zakończeniu
);
$('#box').animate({
left: '+=250px',
opacity: 0.5,
height: '200px'
}, 1000, function() { console.log('Gotowe!'); });
31Jak zablokować wykonywanie animacji w jQuery?✓▶
// Globalnie wyłącz wszystkie animacje
jQuery.fx.off = true; // wyłącz
jQuery.fx.off = false; // włącz
// Zatrzymaj bieżącą animację na elemencie
$('#el').stop(); // zatrzymaj
$('#el').stop(true, true); // zatrzymaj i skocz do końca
$('#el').clearQueue(); // opróżnij kolejkę
32Czym jest callback w animacjach jQuery?✓▶
Callback to funkcja przekazana jako ostatni argument metody efektu — wywoływana po zakończeniu animacji. Umożliwia łatwe sekwencjonowanie animacji.
$('#el').fadeOut(400, function() {
$(this).remove(); // usuń element po zniknięciu
});
$('#el').slideUp(300, function() {
$(this).css('color', 'red').slideDown(300);
});
33Jak napisać własny plugin jQuery?✓▶
Plugin jQuery to metoda dodana do $.fn (prototyp jQuery). Powinna zwracać this aby wspierać chaining.
$.fn.highlight = function(color) {
return this.each(function() {
$(this).css('background-color', color || 'yellow');
});
};
// Użycie:
$('p').highlight('#fef08a').fadeIn();
34Czym jest CDN i jakie są jego zalety?✓▶
CDN (Content Delivery Network) to rozproszony system serwerów rozmieszczonych na całym świecie, dostarczający treści z lokalizacji najbliższej użytkownikowi.
- Zmniejsza obciążenie własnego serwera;
- Szybsze ładowanie biblioteki — serwer geograficznie bliski;
- Cache w przeglądarce — jeśli użytkownik odwiedził inną stronę używającą tej samej wersji jQuery z CDN, biblioteka jest już w cache;
- Brak kosztów transferu dla bibliotek zewnętrznych.
35Jakie są dwa popularne CDN dla jQuery?✓▶
<!-- Microsoft Ajax CDN -->
<script src="https://ajax.microsoft.com/ajax/jquery/jquery-3.7.1.min.js"></script>
<!-- Google Hosted Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Oficjalny CDN (cdnjs) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
36Jakie jest podstawowe wymaganie i jak dodać jQuery do projektu?✓▶
Podstawowe wymaganie: dołączenie biblioteki jQuery przed pierwszym jej użyciem — przez CDN lub plik lokalny.
<!-- Przez CDN (zalecane) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Lokalnie -->
<script src="scripts/jquery-3.7.1.min.js"></script>
<!-- Przez npm -->
npm install jquery
import $ from 'jquery';
37Czym jest $.noConflict() i kiedy jej używać?✓▶
Metoda $.noConflict() zwalnia alias $ — przydatna gdy na stronie używana jest inna biblioteka (np. Prototype.js) która też używa symbolu $.
var jQ = $.noConflict();
jQ(function() {
jQ('p').text('jQuery działa!');
});
// $ należy teraz do innej biblioteki
38Czym jest jQuery Slim i kiedy go używać?✓▶
jQuery Slim to okrojona wersja jQuery bez modułów AJAX i efektów animacji. Jest lżejsza (~68 KB vs ~87 KB minified).
<!-- Pełna wersja — z AJAX i animacjami -->
<script src="jquery-3.7.1.min.js"></script>
<!-- Slim — bez $.ajax(), bez .animate() -->
<script src="jquery-3.7.1.slim.min.js"></script>
Użyj Slim gdy potrzebujesz tylko DOM i selektorów — np. z Bootstrap 4/5.