Samouczek jQuery - Rozpocznij pracę
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ć:
- jak tworzyć strony internetowe,
- jak wskazać element za pomocą parametru id oraz class,
- jak komunikować się w JavaScript.
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.
- W przeglądarce Internet Explorer 9 wpisz w pasku adresu: http://www.jquery.com.
- Kliknij przycisk Download, który znajduje się na stronie w górnym menu.
- Na stronie umożliwiającej pobranie jQuery znajdź sekcję CDN Hosted jQuery i skopiuj adres znajdujący się przy punkcie Microsoft CDN (wersja min.).
- Pobierz plik JavaScript.zip. Wypakuj jego zawartość do dowolnego katalogu.
- Znajdź plik jTest.html. Otwórz go w dowolnym edytorze tekstów.
- 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>
- 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. |
- 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.
- W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest.html.
- Wciśnij przycisk F12 lub wybierz Tools‑>F12 developer Tools.
Rys. 1. Narzędzia programistyczne do JavaScript oraz jQuery w Internet Explorer 9.
- 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");
- Wciśnij Enter.
- Sprawdź, czy strona w przeglądarce wygląda podobnie jak na Rys. 2.
Rys. 2. Narzędzie programistyczne w praktyce.
Informacja |
Pamiętaj, że:
<html>
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.
$(function(){
|
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.