2009-11-10 04:55:58

Co mogę zrobić z jQuery?

Framework (biblioteka?) jQuery zyskuje sobie coraz większą popularność. Nadal jednak wiele osób nie do końca wie, co to jest i jak tego używać. JQuery jest lekką biblioteką JavaScript często nazywaną frameworkiem. W rzeczywistości jest to jeden plik, który można pobrać z adresu http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js. Zapisujemy go w katalogu głównym strony i włączamy go umieszczając w sekcji nagłówkowej strony linijkę:

Tworzymy kolejny plik z rozszerzeniem „js” np. test.js i dołączamy go do strony w podobny sposób jak bibliotekę:

Ważne jest, by biblioteka była włączona jako pierwsza, w przeciwnym razie nie będzie widoczna w pliku test.js

Pisząc ten artykuł zakładam, że dysponujesz wiedzą i umiejętnościami przynajmniej na poziomie szkolenia wideo „Twoja własna prywatna strona wizytówka”, które jest umieszczone na tej stronie w dziale „Sekrety Webmasterów”.

Na początku wstawimy na stronę cztery bloki div i w każdym z nich umieszczamy krótki tekst np. div1, div2, itd. Na stronie te teksty powinny ułożyć się jeden pod drugim. Pod blokami div umieścimy listę nieuporządkowaną. Kompletny kod xhtml powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Serwan. Co mogę zrobić z jQuery?</title>
	<script type ="text/javascript" src="jquery-1.3.2.js"></script>
	<script type ="text/javascript" src="test.js"></script>
</head>
<body>
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	<div>div4</div>
 
	<ul style="clear: left;">
		<li>Moduł 1: Twoja własna strona WWW wizytówka.</li>
		<li>Moduł 2: Squeeze page</li>
		<li>Moduł 3: Twoja super oferta</li>
		<li>Moduł 4: Galeria internetowa</li>
		<li>Moduł 5: Katalog Twoich produktów</li>
		<li>Moduł 6: Portal społecznościowy</li>
	</ul>
</body>
</html>

Teraz w pliku test.js piszemy:

$(document).ready(function()
{
	$('div').css({'margin': '12px', 'border': 'solid 2px #006600', 'padding': '10px', 'width': '20%', 'background-color' : '#99ffcc', 'font-weight' : 'bolder'})
});

Początkiem każdego skryptu jQuery jest wywołanie funkcji $(). $() jest tak naprawdę aliasem funkcji głównej frameworka – jQuery(). Wywołanie $() zwraca obiekt, na rzecz którego wywołujemy metodę ready(). Parametrem metody ready() jest funkcja anonimowa, czyli pozbawiona nazwy. Jej definicja występuje w miejscu wywołania. Funkcja, która jest parametrem metody ready() jest wywoływana natychmiast po wczytaniu całej strony html/xhtml. Następnie pobieramy kolejny obiekt lub obiekty posługując się selektorami. W tym przypadku selektorem jest div czyli wszystkie elementy <div></div> na aktywnej stronie. Dla wybranego obiektu/obiektów wywołujemy metodę css(), która ustawia dla tych obiektów style css zdefiniowane w argumencie metody.

Nie jest to nic niezwykłego. Podobny efekt można osiągnąć używając stylów css. Czasem jednak i taka możliwość może się przydać, np. przy uzależnieniu stylów od tego, czy przeglądarka obsługuje JavaScript, czy nie.

Kolejne instrukcje również wpisujemy wewnątrz funkcji będącej argumentem metody ready(), czyli przed końcowymi nawiasami „});”. Tym razem zmienimy położenie bloków div w reakcji na zdarzenie kliknięcia w dowolnym obszarze strony czyli na elemencie body.

$('body').click(function()
{
	$('div').css({'float': 'left'});
});

Po najechaniu kursorem myszy na jeden z bloków div, wywołujemy dla niego animowane przekształcenie do podanych w argumencie metody animate() stylów.

$('div').mouseenter(function()
{
	$(this).animate({padding: '18px', margin: '8px', borderWidth: '4px'}, 300);
});

Podobnie możemy zrobić przy opuszczeniu bloku div.

$('div').mouseleave(function()
{
	$(this).animate({padding: '10px', margin: '20px', borderWidth: '2px'}, 200);
});

Klikając na jeden z bloków możemy ukrywać i pokazywać listę ul z zastosowaniem różnych efektów. Każdy blok div prezentuje inny efekt. Aby bloki były rozróżniane, należy dodać do nich identyfikatory: a, b , c i d. Identyfikator klikniętego właśnie bloku pobieramy przy pomocy metody attr() i wstawiamy do zmiennej atrybut. Zmienną tę sprawdzamy w instrukcji switch i dla odpowiednich wartości wywołujemy odpowiednie części kodu. Instrukcja if($(‘ul’).is(‘:hidden’)) służy do sprawdzenia, czy lista została ukryta, czy też nie.

$('div').click(function()
{
	var atrybut=$(this).attr('id');
	switch(atrybut)
	{
		case 'a':
			if($('ul').is(':hidden'))
			{
				$('ul').show(700);
			}
			else
			{
				$('ul').hide(1600);
			}
			break;
		case 'b':
			if($('ul').is(':hidden'))
			{
				$('ul').slideDown(700);
			}
			else
			{
				$('ul').slideUp(1600);
			}
			break;
		case 'c':
			if($('ul').is(':hidden'))
			{
				$('ul').fadeIn(700);
			}
			else
			{
				$('ul').fadeOut(1600);
			}
			break;
		case 'd':
			$('ul').fadeTo(1700, 0.10).fadeTo(700, 0.90);
			break;
	}
});

Teraz przejdziemy do elementów li listy ul. Zapis ‘li:first’ wybiera pierwszy element li. Po przesunięciu kursorem myszy nad tym elementem wszystkie parzyste elementy listy (elementy są indeksowane od 0) zostaną zformatowane przy pomocy zadeklarowanych stylów (‘li:even’ oznacza elementy parzysta).

$('li:first').mousemove(function()
{
	$('li:even').css({'background-color': '#99ccff'});
});

Zapis ‘li:last’ wybiera ostatni element li. Po przesunięciu kursorem myszy nad tym elementem wszystkie nieparzyste elementy listy zostaną zformatowane przy pomocy zadeklarowanych stylów (‘li:odd’ oznacza elementy nieparzysta).

$('li:last').mousemove(function()
{
	$('li:odd').css({'background-color': '#ffccff'});
});

Zastosowań i możliwości jQuery jest o wiele więcej. Często jQuery wykorzystuje się do efektownej prezentacji grafiki, prezentacji komunikatów, wstępnej validacji formularzy i do prostego posługiwania się technologią AJAX. Do jQuery napisano też wiele interesujących pluginów.

Tagi: JavaScript, jQuery

Ten wpis został opublikowany wtorek, 10 Listopad 2009 o 04:55 i jest zaszufladkowany do kategorii Darmowe artykuły, JavaScript, Sekrety Webmasterów. Możesz śledzić wszystkie odpowiedzi do tego wpisu poprzezkanał RSS 2.0. Możesz dodać odpowiedź lub trackback ze swojej strony.

7 odpowiedzi do “Co mogę zrobić z jQuery?”

Maciek pisze:

2009-11-10 o 13:55

Witam
Bardzo ciekawy przykład przy czym osoby przyzwyczajone do pisania CSS w osobnym pliku mogą czuć delikatny dyskomfort w definiowaniu stylu w funkcjach js.
Chciałbym zapytać jak najwygodniej jest połączyć powyższą funkcję z szablonem .css.

Pozdrawiam,
Maciek
Leszek Sewastianowicz pisze:

2009-11-10 o 15:13

Generalnie w w pliku css powinny być zdefiniowane style, które chcemy nadać stronie na stałe. Poprzez jQuery możemy tymi stylami manipulować, ewentualnie ustawić na starcie określone parametry, które będą wykorzystywane później przez jQuery, a które byłyby zupełnie zbędne w przypadku wyłączonego JavaScriptu.
Maciek pisze:

2009-11-13 o 17:42

Słusznie, ale należę do grona tych ludzi gdzie ‘manipulowanie stylami’ powinno właśnie odbywać się w arkuszu CSS. Eleganckim jest wg. mnie trzymanie osobno formatowania od kodu .
Przemyślałem sobie sprawę dokładniej i fajnym rozwiązaniem było zrobienie tablic ze stylami i trzymanie tego w osobnym pliku – taki kompromis. Zastosowanie mojego pomysłu może być bezsensowne w małych projektach ale przy większych serwisach może być użyteczne.

Pozdrawiam,
M
Leszek Sewastianowicz pisze:

2009-11-13 o 20:43

Jedną z zalet jQuery jest prostota manipulowania stylami. Ustawienie stylów na starcie przez jQuery było jedynie zaprezentowaniem takiej możliwości – czasem występują okoliczności kiedy może się to przydać, ale w żadnym razie nie jest to alternatywa wobec plików css. Co do umieszczania tablicy stylów w odrębnym pliku, to rzeczywiście można tego próbować w projektach z dużą ilością kodu jQuery (albo innego JavaScript)
procek pisze:

2010-04-05 o 08:17

jQuery daje nam spore możliwości, ale jak wspomniał Maciek robi zamieszanie. Ja powiem więcej – robi straszny bałagan, jeśli przy jego pomocy będziemy odblokowywać różne bloki na stronie. Efekt jak zwykle ten sam: póki działa jest ok, ale gdy coś się popsuje to miłego szukania życzę… Sam używam jQuery i wiem jak potrafi czasem nabałaganić
Leszek Sewastianowicz pisze:

2010-04-07 o 11:12

Jeżeli jQuery stosować z umiarem i dbać o czytelność i poprawność kodu, to wielu problemów, w tym bałaganu, da się uniknąć.
Ruch na stronie z jQuery « Serwan pisze:

2013-10-15 o 22:20

[...] Nie będę pisał o tym, jak zwiększyć ruch na stronie w sensie ilości użytkowników odwiedzających serwis, tylko o wprowadzeniu ruchomych elementów reagujących na określone zachowania użytkownika. Skorzystam przy tym z dobrodziejstw JavaScriptu i biblioteki jQuery. Jeżeli nie znasz jQuery, przeczytaj Co mogę zrobić z jQuery?. [...]

Dodaj odpowiedź

Musisz się zalogować aby dodać komentarz.