Dzisiaj zapraszam do zapoznania się z jedną z najpopularniejszych bibliotek JavaSciriptu czyli jQuery.

Pojęcia które powinniśmy już znać:

JavaScript (JS) jest językiem programowania.najczęściej stosowany przy tworzeniu stron internetowych. Implementacje skryptu pozwalają  na interakcje z użytkownikiem po stronie przeglądarki bez odpowiedzi ze strony serwera. JS może: kontrolować przeglądarkę, komunikować się asynchronicznie, dokonywać zmiany w zawartości dokumentu, który jest wyświetlany.

Podstawy jQuery

Instalacja skryptu

Zaczynamy od implementacji biblioteki na naszej stronie. Poniższy kod umieszczamy w sekcji head naszego dokumentu html/php:

<script src="jquery.js"></script>

Samą bibliotęke możemy ściągnąć z tej strony

Możemy także odwołać się do biblioteki wrzuconej na serwer googla:

<script
 src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Pierwszy skrypt

Skoro mamy już zainstalowaną bibliotekę warto wrzucić na stronę pierwszy skrypt aby sprawdzić czy aby na pewno nasza implementacja przebiegła prawidłowo. Poniższy skrypt wrzucamy pomiędzy tagi <script> </script> w dowolnym (po miejscu zaimplementowania biblioteki) miejscu w naszym dokumencie

alert( "Pierwszy skrypt!");

całość powinna wyglądać tak:

<script> alert( "Pierwszy skrypt!"); </script>

Manipulowanie DOM

Znamy już podstawy implementacji skryptu, zajmijmy się więc tym co w jQuery jest najważniejsze czyli manipulacją dokumentu.

Zacznijmy od prostego skryptu:

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Rozłóżmy powyższy skrypt na czynniki pierwsze.

$(document).ready(function(){ Właściwa część skryptu  });

Powyższa linia sprawdza czy dokument jest w pełni załadowany, a następnie dopiero wtedy uruchamia część skryptu znajdującego się w nawiasach klamrowych. Powyższa konstrukcja gwarantuje że wszelkie elementy na stronie które chcemy używać są już załadowane na stonie.

$("p").click(function(){  Funkcja która zostanie wywołana   });

Od lewej: Deklarujemy element ‚p’ który poprzez kliknięcie (funkcja ‚click’) wywołuję funkcję w nawiasach klamrowych. Kropka jest łącznikiem/dzielnikiem elementów składni.

$(this).hide();

Powyższa funkcja wywołana przez kliknięcie na element ‚p’, chowa dany element. Deklaracja $(this) dotyczy tego samego elementu który był wywoływaczem funkcji. natomiast funkcja ‚hide’ nadaje elementowi atrybut css „display:none;”