Web Design Blog / Aplikacje:

jQuery – podstawy i tutorial

Wiem, że w sieci jest wiele mniejszych lub większych tutoriali na temat tej biblioteki. Mimo to postanowiłem w kolejnych wpisach przybliżyć parę technik, dzięki którym będziemy z łatwością posługiwali się tym językiem. Aby tradycji stało się zadość mała definicja na samym początku.

Co to jest jQuery? Jest to biblioteka programistyczna JavaScript, czyli nic innego jak gotowe funkcje, które możemy wykorzystać w swoich aplikacjach. Umożliwia nam tak jak mówi oficjalne logo: „write less, do more”.

Warto zaznaczyć, że jQuery jest bardzo popularną biblioteką. Śmiało można powiedzieć, że to już standard, który warto opanować chcąc pisać funkcjonalne, nowoczesne oraz szeroko kompatybilne strony i aplikacje internetowe. Największe korzyści jakie płyną z korzystania jQuery to przede wszystkim prostota działania i zapewnienie kompatybilności skryptów z różnymi przeglądarkami internetowymi. Dodawanie nowych efektów do strony nie wiąże się z koniecznością zmieniania jej kodu co pozwala na szybkie i szerokie wdrażanie napisanych programów niskim kosztem.

Teoria

jQuery umożliwia  na wybranie dowolnego elementu lub grupy np. wszystkie linki, pierwszy akapit artykułu, drugą kolumnę w tablicy, całe body itd. Kiedy już wybierzemy dany element możemy go czymś podmienić, usunąć, ukryć, nadać mu klasę a nawet dowolny atrybut, powiązać z dowolnym zdarzeniem, zmienić dowolną właściwość CSS a wszystko to bez odświeżania strony i zbędnych linii kodu.

Oprócz takich manipulacji jQuery pozwala tworzyć zaawansowane animacje, co ja mówię nawet gotowe gry! Ułatwia posługiwanie się techniką AJAX, która pozwala na korzystanie z PHP MySQL bez odświeżania strony. Od tej chwili, jeżeli ktoś nas zapyta: „czy można za pomocą JavaScript sprawdzić czy dany plik istnieje na serwerze?” Odpowiadamy: Tak!, korzystając z jQuery to zaledwie parę linii kodu:

  $.ajax({
 url:plik.jpg, type:'HEAD',
 error: function() { /* nie ma pliku */},
 success: function() {/* jest plik */}
 });

Praktyka

Aby korzystać z jQuery wystarczy po prostu dodać bibliotekę do kodu strony. Śćiągnąć można ją z tej strony: http://jquery.com/download/. Najczęstszą praktyką jest dodanie jej w sekcji HEAD, dlatego jeżeli ściągniemy plik do folderu js ze stroną wystarczy dodać taki kod (np. po znacznikach meta):

 <script src="js/jquery-1.11.1.min.js"><script>

Mała uwaga: słowo min w nazwie pliku oznacza, że plik jest zminifikowany (lub jak kto woli zminimalizowany) co znaczy tyle, że usunięto z niego spacje i złamania linii. Jest to tak zwana produkcyjna wersja biblioteki, którą dodaje się do gotowych aplikacji. Praktyka ta ma na celu maksymalne obniżenie objętości pliku.

Jak sprawdzić czy jQuery na pewno działa?  Na standardowej stronie napisanej w HTML napiszmy taki skrypt:

  $('body').append("Witaj!");

Pojawienie się powitania na końcu strony to znak, że wszystko jest w porządku. Jak już jesteśmy przy tej metodzie omówmy dodawanie treści. Otóż, można realizować to na wiele sposobów, jednak najczęściej wykorzystujemy:

  • .text() – podmieniamy tekstem wewnątrz nawiasów wszystko to co znajduje się w wybranym elemencie np. w paragrafie,
  • .html() – tutaj tak jak wyżej, tylko możemy bez obaw stosować HTML,
  • .append() – dodajemy na końcu istniejącej treści dodatkową zawartość
  • .prepend() – a tutaj dodajemy ją na początku.

Przejdź do tutorialu.

Obsługa zdarzeń

Za pomocą jQuery w łatwy sposób możemy obsługiwać podstawowe zdarzenia takie jak:

  • mouseover – najechanie myszką na element,
  • click – kliknięcie,
  • hover – od mouseover różnie się tym, że obsługuje także zjechanie myszki z danego elementu.

Przykład:

 $('#klik').click(function(){
 alert('Właśnie kliknięto przycisk!');

Jak nie trudno się domyślić po dodaniu takiego kodu do strony (pamiętaj, w znacznikach script, bo to cały czas jest JavaScript!) klikając na element z identyfikatorem id=”klik” pokaże nam się alert.

To, co sprawia wiele radochy podczas pierwszych kroków ze wspaniałym jQuery to efekty wizualne. Najłatwiej korzysta się z:

      • .slideUp(), .slideDown()
      • .fadeIn(), .fadeOut()
      • .hide(), .show()

Stwórz przycisk, nadaj mu identyfikator klik, i napisz krótki paragraf dodaj do niego klasę przyklad. Dodając taki kod uzyskamy ładny efekt. Liczba w nawiasie określa prędkość animacji w milisekundach:

 $('.przyklad').hide();
 $('#klik').click(function(){
 $('.przyklad').slideDown(1000);
 });

Podsumowanie

Biblioteka jQuery to cenne narzędzie w projektowaniu stron i prostych aplikacji Web. Nauka efektywnego programowania w języku JavaScript może zająć trochę czasu i zniechęcić tych, którzy nie są mają znacznego doświadczenia w programowaniu. Za pomocą jQuery stworzymy aplikacje przeglądarkowe, animacje oraz różne ciekawe i dynamiczne elementy. Jeżeli znasz podstawy PHP, dzięki jQuery w łatwy sposób nauczysz się wysyłać i odbierać dane na drodze klient-serwer bez przeładowywania strony nie zajmie Ci to więcej jak kilka chwil. „Pisz mniej, rób więcej” – sprawdź jakie techniki oferuje jQuery i zacznij programować już dziś.

jQuery – podstawy i tutorial
3.75 (75%) głosów: 4

Autor: (28 lat)

Pamiętaj, że służę pomocą w razie wykonania lub odnowienia strony lub sklepu internetowego dla twojej firmy. Niech potwierdzeniem moich kompetencji będzie fakt, że jesteś na mojej stronie mimo, że jestem z całkiem innej części Polski ;)

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach płatnej usługi bez pośredniczących nastawionych wyłącznie na własny zysk agencji reklamowych.

Otrzymuj powiadomienie o nowych artykułach

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail