JavaScript

Kurs jQuery – cz.3, podstawy

Dziękuję za cierpliwość (tak na wstępie). Od publikacji ostatniego artykułu naszego kursu jQuery minęło trochę więcej niż tydzień, a obiecywaliśmy cotygodniowe publkacje. Niestety życie oderwało mnie od pisania na webroad. Na całe szczęście udało mi się znaleźć na tyle dużo czasu żeby dopisać kolejną część kursu. Teraz (mam nadzieję) będziemy się już trzymać formuły wpisów raz w tygodniu.

W drugiej części kursu zapoznaliśmy Was z fundamentami. Dowiedzieliście się jak dołączyć pliki JavaScript do dokumentu HTML i dowiedzieliście się, że to wbrew pozorom wcale nie tak banalna sprawa. Pokrótce objaśniliśmy też znaczenie atrybutów stosowanych w tagach <script></script>. Dowiedzieliście się też jak dołączyć bibliotekę jQuery do waszej strony. Jak widać wiecie już całkiem sporo, szczególnie że ta wiedza przyda się Wam obojętnie czy będziecie posługiwać się „czystym” JavaScriptem, czy biblioteką taką jak jQuery.

Przypominając czytelnikom o dylemacie uczenia się jQuery vs. JavaScript wszystkich chętnych do zapoznania się z językiem JavaScript odsyłam do źródeł internetowych takich jak Mozilla Developer Network (bardzo fajne miejsce).

Komentarz: Na marginesie ostatnich informacji o dołaczaniu bibiloteki jQuery do dokumentu podamy jeszcze kilka przydatnych zasad:

  1. zawsze używaj skompresowanych wersji biblioteki jQuery (minified). Tzw. wersja deweloperska jQuery nie jest Ci najprawdopodobniej do niczego potrzebna, a różnica w wadze jest bardzo widoczna.
  2. Bibiloteka jQuery musi być zamieszczona przed innymi skryptami js
  3. Arkusze stylów powinny być zamieszczane przed skryptami js (w przypadku samej biblioteki to akurat bez znaczenia)

Zaczynamy pracę – $(document).ready()

<script>
$(document).ready(function(){
//kod
});
</script>

Aby rozpocząć pracę z jQuery musimy po pierwsze dodać bibliotekę do naszej strony (omówione w poprzednim artykule) oraz zamieścić jakiś kod, który ma być wykonywany. Funkcji $(document).ready() używa się aby kod JavaScript został wykonany dopiero po załadowaniu się strony. Warto tutaj przypomnieć sobie materiał z drugiej części kursu, w której omówiliśmy podstawowe aspekty ładowania plików JavaScript. W zestawieniu z wiedzą na temat $(document).ready() zaczyna nam się kształtować całościowy obraz tej problematyki. O tym dlaczego warto poczekać na załadowanie się całego kodu HTML też wspominaliśmy.

Wyjaśnijmy podstawowe elementy tej funkcji.

$ – wbrew pozorom nie chodzi tutaj o jakiś symbol bankowy. Jeśli zagłębimy się w kod biblioteki jQuery, prawie na samym jej końcu, znajdziemy coś takiego:

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

W skrócie $ to po prostu krótsza nazwa dla udostępnianej przez bibliotekę jQuery, funkcji jQuery . Pisząc $(document).ready() tworzymy obiekt jQuery z całego dokumentu naszej strony, a następnie wywołujemy na nim funkcję .ready(). W funkcji .ready() zawarta jest kolejna funkcja, która zawiera już nasz kod.

Alternatywą $(document).ready() jest:

$(function() {
//kod
});

Piszemy mniej i osiągamy ten sam efekt.

Aktualizacja 25.02.2013 – Dzięki komentarzowi jednego z naszych użytkowników uzupełnimy trochę ten wpis.

$(document).ready() pozwala wyegzekwować nasz kod po załadowaniu się całego obiektowego modelu dokumentu (DOM). Natomiast załadowanie całkowite DOM nie musi być tożsame z załadowaniem wszystkich elementów. Głównie możemy tutaj spotkać się z problemem grafiki, która może zrobić nam „psikusa” i nadal być ładowana, mimo iż całość DOM zostało już pobrane przez przeglądarkę. Jak temu zaradzić?

$(window).load(function() {
//kod
});

Do czego to nam potrzebne? Jak już wyżej napisałem – może być tak, że jednak „nie wszystko” załaduje się tak jakbyśmy chcieli i w takim czasie jakbyśmy chcieli ;) Dlatego jeśli operujemy na zdjęciach/grafikach lepiej się zabezpieczyć i stosować powyższe wywołanie.

Krótkie wyjaśnienia: Link 1 i Link 2

Dziękujemy Mariuszowi Kozłowskiemu za komentarz!

Pobieranie elementów stron www

W gruncie rzeczy to czym będziemy się zajmować w ramach nauki jQuery i operacji nią wykonywanych w tzw. warstwie abstrakcji to weryfikowanie Twojej znajomości CSS i DOM. Tak. Jeśli znasz dobrze CSS i sposoby konstruowania selektorów w CSS to jesteśmy w połowie drogi do sukcesu.

Aby pobrać element używamy obiektu jQuery. Przykładowo:

$('#nav');

Trzeba pamiętać, że wybierane są te elementy, które są dostępne w dokumencie kiedy dokonywany jest ich wybór. Jeśli np. masz na stronie link i skrypt, który sprawia, że po kliknięciu linku polecenie JavaScript document.write() wpisuje pod nim paragraf z jakimś tekstem, to jeśli przy ładowaniu dokumentu wybierałeś wszystkie paragrafy, ten konkretny paragraf nie zostanie wybrany ponieważ nie istniał kiedy dokonywano wyboru.

Do najprostszych selektorów jQuery należą te selektory identyfikatorów, elementów html i klas.

$('#nav'); //identyfikator
$('.nav'); //klasa css
$('nav'); //element html

Inne selektory są też podobne do selektorów CSS. Jak już wspominaliśmy znajomość kaskadowych akruszy stylów będzie bardzo przydatna. Pełną listę selektorów jQuery znajdziesz na stronie dokumenacji biblioteki. Nie będziemy ich tutaj powtarzać.

Warto zauważyć, że wśród selektorów są takie przypominające nam pseudo-klasy i pseudo-elementy CSS. Nazywane są one filtrami. Przykładowo:

$("p:first").css("font-weight", "bold");

W ten sposób możemy wybrać pierwszy paragraf na stronie np. po to żeby go pogrubić.

Jak widać filtry są bardzo podobne do pseudo-klas i psuedo-elementów CSS (nie tylko z wyglądu). Jednak jQuery oferuje nam więcej niż CSS. Dzięki selektorom tej biblioteki możemy np. wybrać elementy HTML zawierające określoną treść lub będące w fazie animacji.

$("p:contains('jQuery')");

W ten sposób wybierzemy wszystkie paragrafy zawierające słowo „jQuery” (wielkość liter ma znaczenie).

$("div:animated");

Tak wybieramy wszyskie div’y będące w fazie animacji.

Pobieranie elementów, a więc znajomość selektorów jQuery to podstawy. Co jednak z tego, że „pobierzemy” jakiś element? Operacja ta pozwala wywołać funkcje operujące na tym elemencie.

$('.nav div').width(300);

W powyższy sposób ustawimy szerokość div’ów będących potomkami elementu o klasie .nav na 300px. Jak widać jest to proste i głównie potrzebowaliśmy znajomości CSS, którego selektory w większości pokrywają się z selektorami jQuery.

Co więcej bibiloteka jQuery korzysta z rozwiązania zwanego łańcuchem wywołań dzięki któremu zapiszemy kilka wywołań funkcji jedno za drugim.

$('.nav div').width(300)
.css("font-weight", "bold")
.text('Hello World!')
.fadeIn(500);

Niestety takie rozwiązanie możemy stosować jedynie w przypadku wbudowanych funkcji jQuery.

Na razie to tyle. Pozwolimy Wam spokojnie zapoznać się w listą selektorów jQuery, która znajduje się na podanej wyżej stornie dokumentacji. Jak zapewne rozumiecie podstawą dla dalszych lekcji będzie orientowanie się w tychże selektorach.

Zapraszamy na kolejny wpis już w środę!

Czwarta część kursu

komentarzy 6

  • Awatar
    Mariusz Kozłowski

    25 lutego 2013 21:50

    Dodałbym że czasem zamiast:
    $(document).ready(function(){
    przydaje się:
    $(window).load(function () {

    kod wykona się po załadowaniu całej streści strony, np obrazów.

    Pomocne w przypadku gdy chcemy zsumować szerokości obrazów np w galerii fotografii.

    Odpowiedz
  • Awatar
    Mr.Mr

    27 lutego 2013 11:25

    mała aktualizacja (znowu) postanowiłem w następnym artykule pokryć większą część materiału niż pierwotnie przewidywałem, więc opublikujemy go na przełomie tego i przyszłego tygodnia

    Odpowiedz
  • Awatar
    Guest

    4 marca 2013 00:48

    Jeśli już poświęciłeś tyle miejsca na $(document).ready(), warto dodać, że biblioteka przewiduje shortcut dla tej anonimowej funkcji w postaci: $(function() {} ); Piszę o tym dlatego, że ktoś kto dopiero zaczyna swoją przygodę z jQuery, przy analizowaniu innych skryptów, z dużym prawdopodobieństwem trafi właśnie na ten skrót i nie będzie miał pojęcia co to jest :)

    Odpowiedz
    • Awatar
      Mr.Mr

      4 marca 2013 08:15

      było w artykule :)

      Odpowiedz
  • Awatar
    Daniel

    24 czerwca 2014 19:41

    Rozwalił się tobie moduł od kodu :) Warto poprawić bo straszna lipa :)

    Odpowiedz

Zostaw odpowiedź