edusi.pl

📘 Teoria

jQuery to biblioteka języka JavaScript ułatwiająca tworzenie dynamicznych stron internetowych. Pozwala szybciej wykonywać operacje na elementach HTML, obsługiwać zdarzenia, animacje i formularze.

Najważniejszą zaletą jQuery jest uproszczona składnia.


JavaScript:
document.getElementById("tekst").innerHTML="Hello";

jQuery:
$("#tekst").html("Hello");

🔹 Jak dołączyć jQuery?

Bibliotekę można pobrać lokalnie lub podłączyć z Internetu (CDN).


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

🔹 Funkcja ready()

Kod jQuery zwykle umieszcza się wewnątrz funkcji:


$(document).ready(function(){

    // kod jQuery

});

Kod zostanie wykonany dopiero po pełnym załadowaniu strony.

🎯 Selektory jQuery

Selektory służą do wybierania elementów HTML.

Selektor	Opis
`$("p")`	wszystkie akapity
`$("#id")`	element o podanym id
`$(".klasa")`	elementy klasy
`$("*")`	wszystkie elementy
`$("p:first")`	pierwszy akapit
`$("div p")`	akapit wewnątrz div

🧪 Przykład 1 – ukrywanie elementu

Metoda hide() ukrywa element strony.


<!DOCTYPE html>
<html lang="pl">

<head>

<meta charset="UTF-8">

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

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").hide();

    });

});

</script>

</head>

<body>

<p>Przykładowy tekst</p>

<button>Ukryj tekst</button>

</body>
</html>

🧪 Przykład 2 – pokazywanie elementu

Metoda show() pokazuje ukryty element.


$("button").click(function(){

    $("p").show();

});

🧪 Przykład 3 – zmiana koloru tekstu


$(document).ready(function(){

    $("button").click(function(){

        $("h1").css("color","red");

    });

});

🧪 Przykład 4 – zmiana treści

Metoda html() pozwala zmienić zawartość elementu.


$("#wynik").html("Nowa treść");

🧪 Przykład 5 – reakcja na kliknięcie


$(document).ready(function(){

    $("button").click(function(){

        alert("Kliknięto przycisk!");

    });

});

✨ Podstawowe animacje

Metoda	Działanie
`hide()`	ukrywa element
`show()`	pokazuje element
`fadeIn()`	płynne pojawianie
`fadeOut()`	płynne znikanie
`slideDown()`	rozwijanie elementu
`slideUp()`	zwijanie elementu

🧪 Przykład 6 – fadeIn()


$(document).ready(function(){

    $("button").click(function(){

        $("div").fadeIn();

    });

});

🧪 Przykład 7 – slideDown()


$(document).ready(function(){

    $("button").click(function(){

        $("p").slideDown();

    });

});

🧠 Ćwiczenia

Ukryj akapit po kliknięciu przycisku.
Zmień kolor tekstu nagłówka na niebieski.
Ukryj obraz po dwukrotnym kliknięciu.
Wyświetl komunikat po najechaniu myszą.
Użyj fadeOut() do ukrycia elementu.
Rozwiń element metodą slideDown().


$("button").click(function(){

    $("p").hide();

});


$("h1").css("color","blue");

📊 Zadania egzaminacyjne

Zadanie 1

Utwórz stronę internetową zawierającą:

nagłówek
3 akapity
2 przyciski

Po kliknięciu pierwszego przycisku akapity mają zostać ukryte. Po kliknięciu drugiego przycisku mają ponownie się pojawić.

Zadanie 2

Wykonaj stronę WWW z galerią obrazów. Po kliknięciu obraz ma się płynnie powiększyć. Po ponownym kliknięciu ma wrócić do normalnego rozmiaru.

Zadanie 3

Utwórz formularz logowania. Po ustawieniu kursora w polu tekstowym jego tło ma zmienić kolor.

📝 Test (10 pytań)

1. jQuery jest:

2. $("p") oznacza:

3. $("#id") wybiera:

4. hide() służy do:

5. show() służy do:

6. fadeIn() powoduje:

7. slideDown() powoduje:

8. css() służy do:

9. ready() oznacza:

10. html() służy do:

Temat 11: Podstawy biblioteki jQuery