2008.03_jQuery_[Biblioteka Miesiaca].pdf

Biblioteka

miesiąca

Piotr Gawle

jQuery

W nowoczesnych aplikacjach warstwa pre-

zentacji składa się z trzech elementów:

(X)HTML odpowiada za strukturę doku-

mentu, CSS za wygląd, a Javascript za zachowa-

nie strony. Jednak implementując i dodając zda-

rzenia do elementów strony, programiści natrafiają

na duże problemy i różnice w zachowaniu swoich

skryptów na różnych przeglądarkach. Oczywiście

po części, tak jak w przypadku stylów CSS, są win-

ne przeglądarki i ich interpretery, ale też sam język

Javascript nie jest pozbawiony błędów. Potrzeba

dużej wiedzy, czasu i doświadczenia, aby wszyst-

ko działało zgodnie z naszymi oczekiwaniami. Dla-

tego, aby ograniczyć frustrację programistów stwo-

rzono szereg bibliotek Javascript, które mają ukryć

przed koderem problemy z przenośnością i ułatwić

pracę. W tym momencie pojawia się jednak pyta-

nie, którą z nich wybrać do projektu? Aby to zro-

bić należy wiedzieć, czym poszczególne z nich się

charakteryzują.

W tym artykule przedstawię bibliotekę jQu-

ery. Stworzona przez Johna Resiga miała premie-

rę stabilnej wersji 26 czerwca 2006 roku. Od tam-

tego czasu zdobyła wielką popularność i wywalczy-

ła sobie miejsce na rynku. Na stronie głównej pro-

jektu ( http://jquery.com/ ) opisywana jako taka, któ-

ra jest w stanie zmienić sposób programowania w

języku Javascript. Przekonajmy się czy jest tak na-

prawdę?

��

�

��

Rysunek 1. Kreator strony WWW w Quanta

cą selektorów CSS 1-3 i podstawowej składni XPath .

Ma wbudowane mechanizmy manipulacji tymi ele-

mentami, ich stylami CSS i przypisywania do nich

zdarzeń. Pozwala na tworzenie aplikacji z wykorzy-

staniem AJAX-a. Dodatkowo posiada metody do wy-

konywania podstawowych animacji.

Przestrzeń nazw

Zgodnie z tym, co pisał Douglas Crockford obiek-

tywną miarą jakości wyprodukowanego kodu Java-

script jest ilość globalnych funkcji i zmiennych. jQu-

ery nie odbiega od standardów nowoczesnych bi-

bliotek i wprowadza jedną funkcję/obiekt jQuery.

Dodatkowo domyślnie możemy korzystać z symbolu

$ , który jest skrótem do wyżej wymienionego obiek-

tu. Tutaj pojawia się kolejne pytanie czy będziemy

skazani tylko na opisywaną bibliotekę skoro przy-

kładowo, Prototype też wykorzystuje ten sam znak.

Na szczęście nie potrzeba żadnych obejść i sztu-

czek wystarczy wykorzystać możliwości udostępnio-

ne przez twórców i skorzystać z metody jQuery.no-

Conflict (Listing 1).

Aby jeszcze bardziej ułatwić sobie pracę można

określić swój własny skrót (Listing 2).

Także w przypadku dołączania fragmentów kodu

wykorzystującego jQuery możemy sobie poradzić w

bardzo prosty sposób.

Cechy

Biblioteka jQuery wydana z licencją MIT i GNU spa-

kowana nie przekracza wielkości 14kb. Umożliwia

całkowite odseparowanie warstwy (X)HTML, CSS i

Javascript. Kompatybilna z przeglądarkami Internet

Explorer 6+, Firefox 1.5+, Opera 9+, Safari 2.0.2+.

Umożliwia odnalezienie elementów DOM za pomo-

Autor jest programistą GUI specjalizującym się w języku

Javascript, użyteczności i dostępności. Obecnie pracuje

na stanowisku programisty w firmie BLStream Sp. z o.o.

w dziale zajmującym się warstwą prezentacji. Jest także

współtwórcą portalu frontend.pl .

BLStream jest międzynarodowym dostawcą i integrato-

rem nowoczesnych systemów informatycznych oraz pro-

ducentem oprogramowania mobilnego dla sektora me-

dialnego, telekomunikacyjnego, finansowego i ubezpie-

czeniowego. Główna siedziba firmy mieści się w Szcze-

cinie, a jej przedstawicielstwa i centra programistycz-

ne ulokowane są we Wrocławiu, Warszawie, Helsinkach

i Lwowie.

Kontakt z autorem: piotr.gawle@frontend.pl

(function($) { /* tutaj możemy korzystać z $ */

})(jQuery)

lub

jQuery(function($) { /* tutaj możemy korzystać z $ */

});

www.sdjournal.org

Software Developer’s Journal 3/2008

jQuery

Listing 1. Zastosowanie metody jQuery.noConflict

< html >

< head >

< script src = "prototype.js" ></ script >

< script src = "jquery.js" ></ script >

< script >

jQuery.noConflict() ;

jQuery(document).ready(function() {

jQuery( 'div' ).hide() ; } ) ;

// Prototype z $(...), itp.

$( 'someid' ).style.display = 'none' ;

</ script >

</ head >

< body ></ body >

</ html >

Listing 5. Odnalezienie elementów div o id równym body

$('div#body')

< div id=”body” >

< h2 > Some Header < /h2 >

< div class=”contents” >

< p > ... < /p >

< p > ... < /p

< /div >

Listing 6. Wyszukanie elementów „p” znajdujących się w

kontenerze „div” o klasie „contents”

Listing 2. Przypisanie obiektowi jQuery innego skrótu

$( 'div.contents p' )

< html >

< head >

< script src = "prototype.js" ></ script >

< script src = "jquery.js" ></ script >

< script >

var $j = jQuery.noConflict() ;

$j(document).ready(function() {

$j( 'div' ).hide() ; } ) ;

// Prototype z $(...), itp.

$( 'someid' ).style.display = 'none' ;

</ script >

</ head >

< body ></ body >

</ html >

< div id = ”body” >

< h2 > Some Header </ h2 >

< div class = ”contents” >

< p > ... </ p >

</ div >

Listing 7. Wyszukanie części dokumentu „div” znajdujących

się w innych elementach „div”

$('div > div')

Listing 3. Przykład wyszukania kolekcji elementów „div”

< div id=”body” >

< h2 > Some Header < /h2 >

$('div')

< div id=”body” >

< h2 > Some Header < /h2 >

< div class=”contents” >

< p > ... < /p >

< /div >

< div class=”contents” >

< p > ... < /p >

< /div >

Listing 8. Przykład zastosowania filtru przy wyszukaniu

kontenerów „div” posiadających w sobie element „p”

Listing 4. Przykład wyszukania elementów div

posiadającego atrybut id

$('div:has(p)')

$('#div')

< div id=”body” >

< h2 > Some Header < /h2 >

< div class=”contents” >

< p > ... < /p >

< /div >

< div id=”body” >

< h2 > Some Header < /h2 >

< div class=”contents” >

< p > ... < /p >

< /div >

Software Developer’s Journal 3/2008

www.sdjournal.org

Biblioteka

miesiąca

Listing 9. Przykłady zastosowania metod manipulacji

elementami DOM

Dodatkowe boxy

$('button:gt(0) ').attr(' disabled ',' disabled') ;

// wstawiamy atrybut disabled do pierwszego elementu button

Przykłady zastosowania selektorów

Podstawowe zapytania:

$( 'p' ).append( '<b>Hello</b>' ) ;

// dodanie treści do elementu p

• $("#wrappingElement") – zwraca element o id wrappingEle-

ment ;

• $(".classOne ") – zwraca kolekcję elementów o klasie clas-

sOne ;

• $("input, span.classTwo ") – zwraca kolekcję elementów in-

put i elementy span o klasie classTwo ;

• $("*") – zwraca kolekcję wszystkich elementów w dokumen-

cie.

$( '#body' ).css( { border: '1px solid green ' ,height: '40px' } ) ;

// ustawienie w stylach obramowania i wysokości

Listing 10. Przykłady zastosowania metod udostępnionych

w jQuery do wydobycia informacji o właściwościach danych

elementów

Zapytania bardziej skomplikowane, z zastosowaniem hierarchii:

• $("#wrappingElement .classTwo") – zwraca kolekcję elemen-

tów znajdujących się w kontenerze o id “wrappingElement” i kla-

sie classTwo ;

• $("label + input") – zwraca kolekcję elementów input , któ-

re występują po elemencie label ;

• $("#main > *") – zwraca wszystkie elementy znajdujące się w

kontenerze main .

$( '#main' ).css( 'color' ) ;

// zwraca wartość stylu color

$('input[name = "content" ]').val() ;

// zwraca wartość jaki ma wpisany element input

Zapytania z wykorzystaniem filtrów:

Należy zwrócić uwagę, że w obu przypadkach w bloku funk-

cji nie można już korzystać z konstrukcji biblioteki np. Pro-

totype.

• $("td:parent") – zwraca kolekcję rodziców elementów td ;

• $("td:first") – zwraca pierwszy występujący w dokumencie

element td ;

• $(":password") – zwraca kolekcję elementów formularza o ty-

pie password ;

• $("select option:selected") – zwraca wszystkie elementy

opcji, które zostały zaznaczone;

• $("div:contains('Jacek')) – zwraca kolekcje elementów div ,

w których znajduje się tekst Jacek ;

• $("input[name='imie') ") – zwraca kolekcję elementów in-

put o atrybucie name równym imie ;

• $("a[ href^='http://') ") – zwraca kolekcję odnośników, w

których atrybut href rozpoczyna się od http:// (jest to łatwy spo-

sób na odnalezienie odnośników zewnętrznych);

• $("input[value$='ska') ") – zwraca kolekcję elementów in-

put , gdzie wartość elementu kończy się literami ska .

Oddzielenie struktury HTML i Javascript

Temat poruszony w tym akapicie może być trywialny, ale jed-

nak z mojego doświadczenia wynika, że część programistów

zapomina o oddzieleniu w odpowiedni sposób struktury do-

kumentu strony od programu w Javascriptcie. Często moż-

na trafić na wywołanie skryptów na końcu strony i włączanie

zdarzeń bezpośrednio w elemencie. Można oczywiście ra-

dzić sobie jak w kodzie poniżej, jednak funkcja zadziała do-

piero wtedy, kiedy zostaną wgrane wszystkie obrazki.

window.onload = function(){ ... }

JQuery udostępnia prostą metodę, dzięki której będziemy

uruchamiać skrypty po załadowaniu wszystkich elementów

DOM, a z drugiej strony nie będziemy zmuszeni czekać na

obrazki.

W tej funkcji możemy umieścić operacje na dokumencie: ma-

nipulacje, podłączenie akcji do zdarzeń i wszystko to, cze-

go potrzebujemy.

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

Listing 11. Przypisanie zdarzenia do akcji wysłania

formularza

$('form').submit(function() {

alert ('submit ');

}

) ;

$( 'a#open' ). click (function() {

$( '#menu' ).show() ;

return false ;

}

) ;

Rysunek 2. Quanta – widok głównego okna

www.sdjournal.org

Software Developer’s Journal 3/2008

jQuery

Listing 12. Przypisanie animacji elementu o id „block”

odpowiednich wartości

Listing 13. Zastosowanie funkcji zwrotnej

$( 'div' ).hide(500, function() {

$( '#go' ). click (function() {

$( '#block' ).animate( {

// $(this) odnosi się do pojedynczego elementu div

$( this ).show(500) ;

}

) ;

width: '70% ',

opacity: 0.4,

marginLeft: '0.6in ',

fontSize : '3em' ,

borderWidth: '10px'

} ,

1500 ) ;

}

) ;

Listing 14. Przykład zastosowania metody “post”

$.post( 'save.cgi' , {

text: 'my string ',

number: 23

} ,

Selektory

Podstawowe zadanie, do którego została stworzona jQuery

można opisać jednym zdaniem: odnaleźć element i wykonać

na nim określoną operację. Wyszukiwanie jest możliwe dzięki

wykorzystywaniu zapytań selektorów CSS. Dzięki temu bar-

dzo łatwo możemy odnaleźć wszystkie interesujące nas ele-

menty. Kiedy potrzebujemy elementów, które posiadają atry-

but id wystarczy parę znaków (Listing 4).

Także odnalezienie elementu o konkretnym id jest ba-

nalnie proste (Listing 5). Aby przyspieszyć działanie skryp-

tów i nie przeszukiwać całego dokumentu wystarczy za-

stosować hierarchię taką jak w stylach CSS (Listing 6, Li-

sting 7).

W poważniejszych przypadkach można skorzystać z filtrów,

które udostępnia biblioteka. Oczywiście wszystkie pokazane

przez mnie przykłady tak na prawdę są podstawowym wykorzy-

staniem tego potężnego narzędzia, ale po chwili poświęconej

zapoznaniu się z dokumentacją można uzyskać wielką oszczęd-

ność w czasie pracy i liniach kodu.

function() {

alert ( 'Your data has been saved.' ) ;

}

) ;

Manipulacja elementami DOM

Kiedy już odnajdziemy wszystkie interesujące nas elementy

możemy nimi manipulować, dodać zdarzenia lub efekty. Twór-

cy jQuery udostępnili szereg metod dla wygody pracy ze stro-

nami (X)HTML (czy też dokumentu XML). Na Listingu 9 znaj-

dują się podstawowe przykłady użycia niektórych z nich. Na-

leży zwrócić uwagę, że w wpisany kod HTML jest zamieniany

w obiekt jQuery/DOM i wtedy dodawany do innego. Wydoby-

cie odpowiednich informacji jest równie trywialne (Listing 10).

Dodatkowo funkcje takie, jak next , prev , parent , children

pozwalają na szybkie przechodzenie po elementach. Łatwo

usuniemy, dodamy, zmienimy atrybuty, a także będziemy ma-

nipulować stworzonymi przez nas komponentami wykorzy-

stując funkcje append , insertAfter , insertBefore , attr .

R E K L A M A

Biblioteka

miesiąca

jQuery UI

JQuery UI – wtyczki wymienione poniżej są dopiero w wersji 1.0, ale

już pozwalają osiągnąć wiele. Niestety część nie jest jeszcze do koń-

ca dopracowana pod wszystkimi przeglądarkami. Wierzę jednak, że

przy takim zaangażowaniu w projekt, jakie prezentują twórcy jQuery,

wtyczki te będą coraz lepszej jakości.

Kontrola za pomocą myszy:

• click – umożliwia przypisanie funkcji dla akcji kliknięcia na

element;

• dbclick – umożliwia przypisanie funkcji dla akcji podwójnego klik-

nięcia na element;

• error – umożliwia przypisanie funkcji dla wystąpienia błędu;

• focus – umożliwia przypisanie funkcji w przypadku aktywowania

elementu;

• keyup – umożliwia przypisanie funkcji dla akcji zwolnienia klawi-

sza;

• keydown – umożliwia przypisanie funkcji dla akcji naciśnięcia kla-

wisza;

• keypress – umożliwia przypisanie funkcji dla akcji kliknięcia kla-

wisza;

• load – umożliwia przypisanie funkcji dla akcji wgrania elementu;

• mousedown – umożliwia przypisanie funkcji dla akcji przyciśnięcia

klawisza myszki;

• mouseup – umożliwia przypisanie funkcji dla akcji zwolnienia klawi-

sza myszy;

• mousemove – umożliwia przypisanie funkcji dla akcji poruszenia

myszą;

• mouseover – umożliwia przypisanie funkcji dla akcji najechanie nad

element myszą;

• resize – umożliwia przypisanie funkcji dla akcji zmiany rozmiaru ele-

mentu;

• scroll – umożliwia przypisanie funkcji dla akcji przewinięcia strony;

• select – umożliwia przypisanie funkcji dla akcji wybrania ele-

mentu;

• submit – umożliwia przypisanie funkcji dla akcji wysłania formu-

larza;

• unload – umożliwia przypisani funkcji dla akcji opuszczenie

strony.

• draggables – pozwalający na przesuwanie dowolnego elementu za

pomocą myszki;

• droppables – razem z wcześniej wymienioną wtyczką realizujący

mechanizm Drag & Drop ;

• sortables – umożliwia sortowanie list za pomocą myszki;

• selectables – umożliwia zaznaczanie za pomocą myszki lub kla-

wiatury wybranych elementów listy;

• resiables – umożliwia zmianę rozmiaru elementu za pomocą

myszki.

Interfejs użytkownika:

• accordion – umożliwia szybkie stworzenie rozsuwanych akapitów;

• datapicker – dynamiczny kalendarz;

• dialog – stosowany do tworzenia okien modalnych;

• slider – umożliwia zastosowanie suwaka;

• tabs – dynamiczne zakładki.

Metody jQuery dla zdarzeń:

• bind – umożliwia przypisanie funkcji do dowolnego zdarzenia;

• blur – umożliwia przypisanie funkcji w przypadku dezaktywowania;

• change – umożliwia przypisanie funkcji dla akcji zmiany ele-

mentu;

Zdarzenia

W przypadku zdarzeń także wszystko możemy zaimplemen-

tować nie ingerując w treść dokumentu (Listing 11). A kiedy

już zbyt dużo zdarzeń zostało przypisanych w prosty sposób

możemy wszystkie usunąć.

Efekty

Wśród różnych funkcji jQuery znajdują się także takie, które

umożliwiają wykonanie prostych animacji takich jak przesu-

nięcie, zmiana przezroczystości, wielkości itp. Jest to stosun-

kowo mała liczba efektów, ale musimy pamiętać, że z założe-

$('p').unbind('click');

Listing 16. Przykład łączenia metod w łańcuch

Listing 15. Przykład zastosowania funkcji ajax z

odpowiednimi parametrami

$( 'div' ).hide() ;

// ukryj elementy div

.ajax( {

url: 'document.xml ',

$( 'div' ).hide().css( 'color' , ' blue ' ) ;

// ukryj elementy div i ustaw ich

kolor na niebieski.

type: 'GET' ,

dataType: 'xml' ,

timeout: 1000,

error: function() {

alert ('Error loading XML document ');

} ,

Listing 17. Przykład wielu operacji połączonych w jeden

łańcuch

$( 'ul.open' ).children( 'li' ).addClass( 'open' ).end().find( 'a' )

. click (function() {

$( this ).next().toggle() ;

success: function(xml) {

// do something with xml

}

) ;

return false ;

}

).end() ;

www.sdjournal.org

Software Developer’s Journal 3/2008

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: