Što je jQuery?

Biblioteka

jQuery je open-source JavaScript biblioteka koja olakšava razvoj web aplikacija.

Brže Kodiranje

Upisuje se manje koda za istu funkcionalnost kao u čistom JavaScriptu.

Cross-Browser

jQuery osigurava da kod radi na svim preglednicima bez dodatnih problema.

Jednostavno

Jednostavna sintaksa čini jQuery lako razumljiva čak i početnicima.

Prednosti jQuery:

  • Krće i lakše pisati kod
  • Lakše manipulirati DOM-om
  • Jednostavnije rukovanje eventima
  • Ugrađeni AJAX upiti
  • Gotove animacijske funkcije
  • Bogati plug-ini dostupni

jQuery Selektori

Sve vrste selektora koje smo radili na satu

Element Selektor

Opis: Odabira HTML element po njegovoj imenu.

Sintaksa: $("elementName")

Primjer: $("p") - Odabira sve paragraf elemente

Ovo je prvi paragraf

Ovo je drugi paragraf

Ovo je treći paragraf

// Element selektor
$("p").css("color", "blue");
$("p").css("background-color", "#ffe0e0");
$("p").css("padding", "10px");

ID Selektor

Opis: Odabira element po ID atributu. ID mora biti jedinstven.

Sintaksa: $("#idName")

Primjer: $("#header") - Odabira element sa ID="header"

// ID selektor
$("#special-div").show();
$("#special-div").css("color", "darkred");
$("#special-div").css("font-size", "18px");

Class Selektor

Opis: Odabira sve elemente sa određenom CSS klasom.

Sintaksa: $(".className")

Primjer: $(".highlight") - Odabira sve elemente sa class="highlight"

Kutija 1
Kutija 2
Kutija 3
// Class selektor
$(".highlight-box").css("background-color", "#e3f2fd");
$(".highlight-box").css("color", "#1976d2");
$(".highlight-box").css("border-left", "5px solid #1976d2");

Universal (*) Selektor

Opis: Odabira SVE elemente na stranici.

Sintaksa: $("*")

Primjer: $("*") - Odabira sve HTML elemente

Ovo će se promijeniti

Svi elementi će biti zahvaćeni
Čak i div elementi
// Universal selektor - OPREZNO!
$("*").css("border", "1px solid red");

Kombinovani Selektori

Opis: Kombinira više selektora sa zarezom.

Sintaksa: $("sel1, sel2, sel3")

Primjer: $("#id, .class, element")

Paragraf sa ID

Span sa klasom
Div element
// Kombinovani selektor
$("#kombinovani-p, .kombinovani-span, .kombinovani-div")
    .css("background", "#ffebee")
    .css("color", "#c62828")
    .css("padding", "8px");

Descendant Selektor (razmak)

Opis: Odabira elemente koji su djeca drugog elementa.

Sintaksa: $("parent child")

Primjer: $(".container p") - Sve p elemente unutar .container

Paragraf 1 - Unutar kontejnera

Paragraf 2 - Unutar kontejnera

Paragraf 3 - Dublje ugniježđen

Paragraf izvan kontejnera

// Descendant selektor
$(".parent-container p").css("color", "#1e88e5");
$(".parent-container p").css("font-weight", "bold");

Child Selektor (>)

Opis: Odabira samo direktnu djecu elementa, ne dublje.

Sintaksa: $("parent > child")

Primjer: $("div > p") - Samo p elementi direktno u div

Direktni child - bit će promijenjen

Direktni child - bit će promijenjen

Nije direktni child - NEĆE biti promijenjen

// Child selektor - samo direktni children
$(".child-parent > p").css("background", "#c8e6c9");
$(".child-parent > p").css("color", "#2e7d32");

Attribute Selektor

Opis: Odabira elemente po njihovim atributima.

Sintaksa: $("[attribute]")

Primjer: $("[type='text']") - Sve input elemente sa type="text"

// Attribute selektor
$("input[type='text']").css("background-color", "#fff9c4");
$("input[type='text']").css("border", "2px solid #f57f17");

Pseudo Selektori

Opis: Odabira elemente po specifičnom stanju ili poziciji.

Primjeri:

  • :first - Prvi element
  • :last - Zadnji element
  • :even - Parni elementi (indeks 0, 2, 4...)
  • :odd - Neparni elementi (indeks 1, 3, 5...)
  • :eq(n) - Element na indeksu n
  • Stavka 1
  • Stavka 2
  • Stavka 3
  • Stavka 4
  • Stavka 5
// Pseudo selektori
$(".list-items li:first").css("color", "green").css("font-weight", "bold");
$(".list-items li:last").css("color", "red").css("font-weight", "bold");
$(".list-items li:even").css("background", "#f0f0f0");
$(".list-items li:odd").css("background", "#e0e0e0");

jQuery Metode

Tri ključne metode koje smo radili

.css()

Stilizacija

Opis: Postavlja ili dohvaća CSS svojstva elementa.

Sintaksa:

$("selector").css("property", "value");

Primjeri:

  • $("p").css("color", "red");
  • $("p").css("background", "yellow");
  • $("p").css({"color": "blue", "font-size": "18px"});

.show()

Vidljivost

Opis: Prikazuje skrivene elemente sa display: none.

Sintaksa:

$("selector").show();

Sa brzinom:

$("selector").show("slow/fast/time");

Primjeri:

  • $(".hidden").show();
  • $(".hidden").show("slow");
  • $(".hidden").show(2000);

.hide()

Vidljivost

Opis: Skriva vidljive elemente (display: none).

Sintaksa:

$("selector").hide();

Sa brzinom:

$("selector").hide("slow/fast/time");

Primjeri:

  • $(".visible").hide();
  • $(".visible").hide("fast");
  • $(".visible").hide(1500);
Vidljiv element - Skrivat će se sa .hide()!

.toggle()

Kombinirana

Opis: Prebacuje između .show() i .hide().

Sintaksa:

$("selector").toggle();

Primjer:

$(".element").toggle();
Pritiskom na gumb, ovaj element će biti pokazan/sakriven!

Praktični Primjeri

Primjeri kombiniranja selektora i metoda

Primjer 1: Boja Teksta

Pritisnite gumb za promjenu boje!

$("#text-example").css("color", "purple");

Primjer 2: Pozadina

Kliknite za promjenu pozadine
$("#bg-example").css("background", "#ffd54f");

Primjer 3: Veličina Fonta

Povećaj mi veličinu!

$("#font-example").css("font-size", "24px");

Primjer 4: Show/Hide Kutija

BOX
$("#box-example").hide();

Primjer 5: Više CSS Svojstava

Primijeni više svojstava odjednom

$("#multi-example").css({"color": "white", "background": "#e91e63", "padding": "20px"});

Primjer 6: Class Selektor

Tekst 1

Tekst 2

Tekst 3

$(".styled-text").css("color", "green");

Interaktivna Demonstracija

Klikni na kutije i vidi kako jQuery radi

Kliknite me!
Kliknite me!
Kliknite me!
Kliknite me!

Sažetak - Što smo Naučili

Selektori

  • Element selektor: $("element")
  • ID selektor: $("#id")
  • Class selektor: $(".class")
  • Descendant: $("parent child")
  • Child: $("parent > child")
  • Pseudo: $("element:first")

Metode

  • .css() - Mijenja CSS
  • .show() - Prikazuje element
  • .hide() - Skriva element
  • .toggle() - Prebacuje
  • .text() - Mijenja tekst
  • .html() - Mijenja HTML

Primjena

  • Dinamička stilizacija
  • Animacije i efekti
  • Event hendliranje
  • DOM manipulacija
  • AJAX zahtjevi
  • Interaktivnost