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.