• Artykuł

          

Samouczek jQuery - Rozpocznij pracę  Udostępnij na: Facebook

Autor: Michał Ręczkowicz

Opublikowano: 2012-02-15

jQuery to biblioteka ułatwiająca pracę z językiem JavaScript. Nauczymy się, jak dodać ją do naszej strony i wykonać podstawowe operacje.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań:

  • dowiesz się, jak i gdzie umieścić bibliotekę jQuery,
  • dowiesz się, jak wykorzystać przeglądarkę Internet Explorer 9 do nauki jQuery.

Implementacja

Bibliotekę jQuery możemy dodać na naszej stronie na dwa sposoby. Po pierwsze, możemy pobrać ją ze strony http://www.jquery.com. Pamiętaj, aby pobrać wersję produkcyjną (production), a nie programistyczną (development). Różnica w wielkości plików jest ok. dziesięciokrotna.

Po drugie, możesz dodać na swojej stronie referencję do pliku umieszczonego na serwerze CDN (Content Distribution Network). CDN to sieć umożliwiająca szybkie dostarczanie zawartości dziesiątkom milionów klientów na całym świecie. Microsoft wykorzystuje CDN m.in. do publikowania poprawek i aktualizacji sytemu Windows. Użycie serwera CDN do dostarczenia jQuery do naszego użytkownika to nie tylko brak obciążenia naszego serwera, ale również przyspieszenie pobierania. Jeśli użytkownik był na stronie, która również odniosła się do tego adresu, to nie musi ponownie pobierać pliku. Jeżeli nie figuruje on w pamięci przeglądarki, to plik pobierze szybciej, ze względu na ograniczenie w przeglądarce liczby jednoczesnych pobrań pliku z jednego serwera.

Dołącz referencję do biblioteki jQuery z serwera CDN

Celem tego zadania jest dodanie biblioteki jQuery do pliku testowego.

  1. W przeglądarce Internet Explorer 9 wpisz w pasku adresu: http://www.jquery.com.
  2. Kliknij przycisk Download, który znajduje się na stronie w górnym menu.
  3. Na stronie umożliwiającej pobranie jQuery znajdź sekcję CDN Hosted jQuery i skopiuj adres znajdujący się przy punkcie Microsoft CDN (wersja min.).
  4. Pobierz plik JavaScript.zip. Wypakuj jego zawartość do dowolnego katalogu.
  5. Znajdź plik jTest.html. Otwórz go w dowolnym edytorze tekstów.
  6. Przejdź na koniec pliku i przed znacznikiem </body> dodaj następujący kod:
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" ></script>
  1. Zamień wartość przypisaną do atrybutu src na zawartość skopiowaną ze strony jQuery.
Informacja

Nie musisz zmieniać zawartości, ponieważ link prowadzi do jednej z poprzednich wersji jQuery i wszystko to, co będziemy wykonywali, w tym i kolejnych odcinkach, działa również na niej. Warto jednak, abyś korzystał z najnowszej wersji biblioteki, która oferuje najwyższą wydajność i możliwości.

Pamiętaj, aby dodać skrypty na końcu pliku. Jedynie bardzo specyficzne zastosowania wymagają umieszczenia pliku w nagłówku strony.
  1. Zapisz zmiany i otwórz stronę w przeglądarce Internet Explorer.

Korzystanie z edytora Internet Explorer 9

Celem tego zadania jest wprowadzenie w narzędzie programistyczne, dzięki któremu będziesz mógł sprawnie i szybko zapoznawać się z możliwościami, jakie daje jQuery.

  1. W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest.html.
  2. Wciśnij przycisk F12 lub wybierz Tools­‑>F12 developer Tools.

Rys. 1. Narzędzia programistyczne do JavaScript oraz jQuery w Internet Explorer 9.

  1. Kliknij w oknie na zakładkę Script (oznaczoną 1 na Rys.1.), a następnie w prawym dolnym rogu wpisz w wierszu (oznaczonym 2 na Rys. 1.):
jQuery('p').css("border", "2px solid blue");
  1. Wciśnij Enter.
  2. Sprawdź, czy strona w przeglądarce wygląda podobnie jak na Rys. 2.

Rys. 2. Narzędzie programistyczne w praktyce.

Informacja

Pamiętaj, że:

  • Gdy chcesz napisać skrypt za pomocą jQuery w pliku html struktura wygląda następująco:
<html>
 <head>
 <title>Document</title>
 </head>
 <body>
 ...
 <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" > </script>
 <script type="text/javascript">
        $(function() {
               ('p').css("border", "2px solid blue");
        });
 </script>
 </body>
 </html>
  • W jQuery odwołujemy się do elementów jak w CSS:
    —   do znaczników z id za pomocą # np. #pokaz
    —   do klas za pomocą kropki np. .jakasKlasa

Więcej informacji na temat odwoływania się do właściwości id oraz class w CSS znajdziesz w encyklopedii pod hasłem Jak wskazać element w CSS.

  • Jeżeli piszesz kod JS w osobnym pliku to umieszczasz kod:
$(function(){
 //tu umieszczasz kod
 //każdą nową linię, odwołującą się do elementów w drzewie DOM
 //rozpoczynasz znakiem dolara $
 });
  • Na końcu, nie zapomnij dodać pliku js do strony, do której się odnosi, podobnie jak jQuery.

Podsumowanie

W tym artykule nauczyliśmy się dodawać bibliotekę jQuery do strony internetowej. Poznaliśmy też narzędzie programistyczne, które udostępnia nam przeglądarka Internet Explorer 9. Wiemy również jak prawidłowo umieszczać kod JavaScript.

W kolejnym artykule nauczymy się wskazywać na stronie elementy do edycji za pomocą jQuery.