KATEGORIA:

Wstęp do jQuery

jquery

CO TO JEST JQUERY?

JQuery to biblioteka JavaScript, czyli języka programowania, który odpowiada m.in. za interaktywność elementów na stronie internetowej. JQuery jest dużo prostszy, a zdziałać można nim naprawdę wiele.

JAK DODAĆ JQUERY NA STRONĘ WWW?

JQuery można dodać na stronę na dwa sposoby:

  • można pobrać bibliotekę jQuery ze strony jQuery.com,
  • zamieścić link na swojej stronie (nie polecam, ale można).

Kiedy już pobierzesz plik z biblioteką jQuery i umieścisz go na swoim serwerze, musisz zamieścić odnośnik do tego pliku. Odnośnik zamieszczamy w znaczniku <head> tak jak poniżej.

<head>
	<script src="sciezka_do_pliku"></script>
</head>

JAK ZACZĄĆ PISAĆ W JQUERY?

Aby zacząć należy utworzyć jeszcze jeden plik, najlepiej w katalogu „js”, w którym umieściliśmy wcześniej plik z biblioteką jQuery. Można go nazwać np. main.js lub app.js lub dowolnie. W tym pliku będziemy pisać odpowiednie komendy.

SKŁADNIA JQUERY

Wszystkie komendy, które będziemy wpisywać w naszym pliku .js, muszą znajdować się między następującym kodem:

$(document).ready(function(){

   // Tutaj pojawia sie komendy
   
});

Ten kod „mówi”, że jQuery będzie działać dopiero wtedy, gdy strona/dokument będzie załadowana w pełni – gotowa. Pomiędzy tym kodem, który po prostu należy zapamiętać, umieszczamy już konkretne polecenia.

Tak wygląda składnia jQuery:
$('selektor').akcja();

Przykład: $('p').hide(); – ukrywa wszystkie znaczniki <p>. Gdyby strona nie była załadowana do końca i np. część elementów p jeszcze by się nie pojawiła – nie można by było ich ukryć. Wtedy część kodu jQuery by się wykonała a część nie. Dlatego niezwykle istotne jest użycie polecenia $(document).ready(function()....

SELEKTORY JQUERY

Elementy np. p, div, section, h1, h2, header itp. są poprzedzone znakiem $ i zawsze znajdują się w nawiasie i w cudzysłowu.

Przykłady:
$('p')
$('div')
$('section')

Nie zawsze chcemy ukryć na stronie wszystkie elementy p. Czasami tylko jeden konkretny, który ma klasę „p_do_ukrycia”. Wtedy używamy selektorów jak w css:

$('.p_do_ukrycia')

Więcej selektorów css możesz poznać tutaj.

Jeżeli chcemy ukryć element o id="main", to wyglądałoby to tak:

$('#main')

Przykład:

$(document).ready(function(){
    $("#main").click(function(){
        $(".p_do_ukrycia").hide();
    });
});

W tym przykładzie, po kliknięciu na element o id="main", element p o class="p_do_ukrycia" zostanie ukryty.

ZDARZENIA JQUERY

Wiesz już jak zaznaczyć/wybrać element html ze strony, aby coś z nim zrobić np. ukryć jak w powyższym przykładzie. Teraz dowiesz się jakie zdarzenia możesz wykorzystać w jQuery. W powyższym przykładzie, element p został usunięty po kliknięciu na inny element o pewnym id. Oprócz kliknięcia możemy użyć również:

  • click – kliknięcie
  • dbclick – podwójne kliknięcie
  • hover – najazd myszką
  • mouseleave – zjazd myszką

Zdarzeń jest więcej, będę je omawiać w osobnych artykułach.

AKCJE JQUERY

Wiesz już, że można ukryć na stronie jakiś element. JQuery daje jednak znacznie więcej możliwości.
Przykłady:

$(document).ready(function(){
    $("div").hover(function(){
        $(this).css("background-color", "#cccccc");
    });
});

W tym przykładzie po najechaniu na element div, zmienia się jego tło na inne niż dotychczas.

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '250px'});
    });
});

W powyższym przykładzie, po kliknięciu na przycisk, przesuwamy element div, o 250 px w prawo.

PODSUMOWANIE

JQuery daje dużo możliwości. Pozwala animować elementy, przesuwać, ukrywać, pokazywać itp. O poszczególnych funkcjach będę pisać w osobnych artykułach. Zapraszam do lektury.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *