Losuj cytat:

Na początku jest to trudne, ale na początku wszystko jest trudne.
- Musashi Miyamoto
 

Dodawanie jQuery do strony

Dodawanie jquery do strony

Dołączanie pliku jQuery z serwera CDN


Zarówno Microsoft, jQuery, jak i Google pozwalają korzystać na własnych witrynach z biblioteki jQuery pobieranej z ich serwerów. Aby na przykład skorzystać z wersji 1.6.3 biblioteki pobieranej z serwera CDN firmy Microsoft, w sekcji nagłówka naszej strony (tuż przed zamykającym znacznikiem </head>) musielibyśmy umieścić znacznik o następującej postaci:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.min.js"></script>

 

Aby na przykład skorzystać z wersji dostępnej na serwerach Google, do sekcji nagłówka strony należy dodać poniższy znacznik <scripts>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

 

Gdybyśmy chcieli skorzystać z serwera CDN jQuery, musielibyśmy użyć następującego kodu:

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

 

Pobieranie pliku jQuery

 

Najnowszą wersję jQuery możesz pobrać ze strony http://docs.jquery.com/Downloading_jQuery.

 

 

Dołączanie pliku jQuery z katalogu

 

Jeśli pobrałeś plik biblioteki i umieściłeś go na własnym komputerze, będziesz go musiał dodać do strony, na której chcesz używać biblioteki. Plik jQuery jest zwyczajnym zewnętrznym plikiem JavaScript, a zatem dodaje się go do strony dokładnie tak samo jak inne pliki tego typu, w sposób opisany na stronie. Załóżmy na przykład, że dysponujesz plikiem jquery.js umieszczonym w katalogu js, w głównym katalogu serwera WWW. Aby go dodać do strony głównej witryny, powinieneś umieścić w jej sekcji nagłówka znacznik w następującej postaci:

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

 

Po dołączeniu pliku jQuery do strony można już dodawać do niej własne skrypty, korzystające z zaawansowanych funkcji tej biblioteki. Następnym krokiem będzie dodanie kolejnej pary znaczników <scripts> zawierających nieco bardziej wymagający kod JavaScript:

<script src="js/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
   // to jest miejsce na nasz kod
});
</script>


Wewnątrz drugiej pary znaczników <scripts> znajduje się cały kod, który chcemy umieścić na danej stronie WWW. Najprawdopodobniej jednak zastanawiasz się, co oznacza zapis $(document).ready(). Jest to wbudowana funkcja jQuery, która spowoduje wykonanie przekazanego do niej kodu po zakończeniu pobierania całej strony WWW.

Dlaczego taki zabieg?

Abyśmy mogli zrobić coś fajnego z zawartością strony, musimy poczekać, aż przeglądarka ją pobierze. I właśnie to zapewnia funkcja $(document). ´ready(): czeka na zakończenie pobierania całej zawartości dokumentu HTML i dopiero potem wykonuje wskazany kod JavaScript. Jeśli to wszystko wydaje się bardzo zagmatwane i trudne, wystarczy, byś zapamiętał, że zawsze powinieneś stosować funkcję ready() i umieszczać swój kod dokładnie pomiędzy $(document).ready ´(function(){ oraz zamykającą sekwencją znaków });.

 

Dodatkowo warto pamiętać także o kilku dodatkowych zagadnieniach:


•  Odwołanie do pliku biblioteki jQuery musi być umieszczone przed jakimkolwiek kodem JavaScript, w którym biblioteka ta jest używana. Innymi słowy, przed znacznikami <scripts> odwołującymi się do jQuery nie należy umieszczać innych znaczników <scripts>.


•  Własny kod JavaScript należy umieszczać za wszystkimi arkuszami stylów (zarówno dołączanymi, zewnętrznymi, jak i definiowanymi wewnątrz strony). Ponieważ kod korzystający z możliwości jQuery bardzo często odwołuje się do definicji stylów z CSS, dlatego też kod JavaScript należy umieszczać za arkuszami stylów, tak by w momencie jego wykonywania przeglądarka zdążyła je pobrać. Dobrą zasadą, do której można się stosować, jest umieszczanie znaczników <scripts> wewnątrz sekcji nagłówka strony, poniżej jakiejkolwiek innej zawartości, lecz — oczywiście — przed zamykającym znacznikiem </head>.


•  Do  własnego  kodu  JavaScript  warto  dodawać  komentarze  —  na  przykład  komentarz // koniec funkcji ready, umieszczony po zamykającej sekwencji znaków });, może oznaczać miejsce, w którym kończy się wywołanie funkcji ready(). Oto kompletny przykład:

$(document).ready(function(){
  // to jest miejsce na nasz kod
}); // koniec funkcji ready

 


Po umieszczeniu komentarza na końcu funkcji bardzo łatwo będzie można później określić, gdzie kończy się jej kod. Jak się przekonasz, korzystanie z biblioteki jQuery wymaga częstego stosowania tych krótkich sekwencji znaków składających się z zamykającego nawiasu klamrowego, okrągłego oraz średnika. Umieszczając za nimi komentarze, można sobie znacznie ułatwić określenie, do jakiego fragmentu kodu odnosi się dana sekwencja.

 


Wskazówka: jQuery udostępnia skrócony zapis wywołania funkcji $(document).ready(function(){}) :


 

$(function() {
    // to jest miejsce na nasz kod
  }); // koniec funkcji ready