jQuery – to łatwe! #1

Dla wszystkich chętnych polepszyć swoje umiejętności w JavaScript zapraszam na cykl szkoleń z samym Kylem Simpsonem, autorem książek You Don't Know JS. Organizuję go od 5 do 9 września. Naprawdę warto, Kyle to TOP5 ekspertów JS na świecie.

jQuery to framework napisany w języku JavaScript. Dzięki niemu możemy łatwo upiększać nasze strony poprzez przeróżne efekty, począwszy od dynamicznego dodawania klas i identyfikatorów dla tagów HTML, aż po ruchome animacje. Większość z nich uzyskujemy przy minimalnym wysiłku, gdyż jest to narzędzie nastawione na jak najmniejszą ilość pracy, a jak największe osiągi. Opinie o jQuery dostępne w Internecie są nacechowane bardzo pozytywnie. Pora się przekonać, co jQuery tak naprawdę potrafi. Załóżmy przy tym, że nasza wiedza o JavaScript jest minimalna: wystarczy, że wiemy, co to funkcje, co to instrukcje warunkowe i zmienne. Tyle nam wystarczy, a więc do dzieła!

Jest to pierwsza część kursu. Oto lista kolejnych odcinków:

jQuery – to łatwe! #2
jQuery – to łatwe! #3
jQuery – to łatwe! #4
jQuery – to łatwe! #5: Zakładki
jQuery – to łatwe #6: Piszemy prostą grę!

Wprowadzenie

Framework

(rama projektowa, szkielet) to w programowaniu struktura wspomagająca tworzenie, rozwój i testowanie powstającej aplikacji. Z reguły na framework składają się programy wspomagające, biblioteki kodu źródłowego i inne podobne narzędzia.

za Wikipedią

jQuery to framework. Definicja Wikipedii mówi, że to pewna struktura, wspomagająca rozwój naszych skryptów i programów. Nie jest to jednak ścisły i jednoznaczny opis, tak więc ułóżmy go od nowa, dostosowując się do posiadanej wiedzy. Otóż framework to po prostu zbiór funkcji, dzięki którym możemy osiągnąć dane efekty bez powtarzania zbędnego kodu. Tak więc framework oferuje nam różne funkcjonalności, do których mamy dostęp używając funkcji, jakie przewidział twórca (bądź twórcy) narzędzia.

Frameworków do JavaScript jest wiele – można tutaj wymienić chociażby takie nazwy jak Prototype, Dojo, czy Moo Tools. Wszystkie oferują unikalne rozwiązania, jak i podstawowe narzędzia, z reguły usprawniające pracę z DOM i umożliwiające wykonywanie różnych efektów animacyjnych. Autorzy tego typu bibliotek prześcigają się w tym, by ich dzieło było jak najszybsze i jak najbardziej przyjazne w użyciu. Biorąc to pod uwagę, a także elastyczność programowania w JavaScript, nauka każdego frameworka wiąże się z opanowaniem składni i funkcji, jakie są niezbędne by go używać. By ukazać, o co chodzi, spójrzmy na poniższe trzy przykłady:

var tekst = 'This is Framework!!';
alert(tekst);
function Warning(tekst)
{
	alert(tekst);
}
Warning('This is Framework!!');
Warning =
{
	Tekst: '',
	Run: function()
	{
		alert(this.Tekst);
	}
}
Warning.Tekst = 'This Framework!!';
Warning.Run();

Każdy z powyższych skryptów robi to samo: pokazuje okienko o treści This is Framework!!. Niemniej jednak sposoby, dzięki którym to uzyskaliśmy są każdorazowo odmienne. To właśnie charakteryzuje frameworki – każdy z nich oferuje swoją konstrukcję, swoje unikalne funkcje, których po prostu musimy się nauczyć. Nie ma więc skutecznego sposobu na natychmiastowe opanowanie dowolnego frameworka. Siłą rzeczy musimy wgłębić się w funkcje, jakie nam oferuje.

Szybkość tej nauki zależy przede wszystkim od dobrych rozwiązań autorów. Jedne z nich są trafne, drugie trochę mniej. jQuery oferuje bardzo, ale to bardzo łatwą konstrukcję. Większość nazw funkcji jest bardzo logiczna w stosunku do wykonywanych zadań. Również sposób ich uruchomienia i zapisu należy do jak najbardziej przyjaznych użytkownikowi. To właśnie cel frameworków – oferując trafne rozwiązania, uprzyjemnić i przyspieszyć pracę użytkownikowi.

Można powiedzieć, że z frameworkiem jest jak z budową domu. Przyjmijmy, że ktoś daje Ci wszystkie narzędzia, pracowników i materiały. To od Ciebie zależy, co z nimi zrobisz i jak je wykorzystasz.

Podobnie jest z jQuery. Ktoś napisał wiele funkcji, które umilają życie webmasterowi. Tylko od nas zależy, którą z nich użyjemy. Wielokrotnie determinować będą to nasze potrzeby. Jeśli będziemy chcieli, aby każdy element formularza był zablokowany, użyjemy w jQuery specjalnej funkcji, która pobierze wszystkie elementy formularza i ustawi im atrybut disabled. Wystarczy, że będziemy dysponowali nazwą formularza. Przenosząc to na przykład budowy, potrzebny będzie nam zaś konkretny adres działki, by móc na niej działać.

jQuery – z czym to się je?

jQuery to jedno z najbardziej udanych przedsięwzięć, jeśli chodzi o frameworki JS – jest, jak już wspomniałem, łatwy w użyciu i bardzo ergonomiczny. Cały framework mieści się w zaledwie 20kb pliku .js. Po ujrzeniu jego kodu źródłowego możesz być trochę zmieszany, ale bez obaw. Jest to podyktowane tym, aby skrypt ważył jak najmniej. Skompresowano więc wszystkie spacje i wolne przestrzenie w skrypcie, tak, by pozbyć się zbędnych bajtów powiększających rozmiar pliku. Oczywiście jest również dostępna wersja większa objętościowo, ale za to przejrzystsza. Obydwie są do ściągnięcia na stronie projektu jQuery.com. Tylko od Ciebie zależy, którą wybierzesz.

Jeśli zdecydowałeś się na ściągniecie pliku o rozszerzeniu .js, w którym mieści się jQuery, kolejnym etapem w drodze do jego używania jest dołączenie go do pliku HTML, w którym będziesz wykonywał swoje skrypty.

Wystarczy, że wstawimy do dokumentu HTML poniższy kod:

<script type="text/javascript" src="sciezka_do_jQuery/nazwa_pliku_z_jQuery.js"></script>

W moim wypadku będzie to zwykłe:

<script type="text/javascript" src="jQuery.js"></script>

Zresztą, czyż to nie od nas zależy, gdzie umieszczamy pliki JS? No właśnie. Tutaj także nie ma wyjątku.

Podpinając stosowny skrypt do dokumentu, możemy zacząć używać jQuery, jak tylko chcemy, w każdym miejscu w naszym dokumencie. Nie ma znaczenia, czy to sekcja <head> czy <body>. Jedynym regulatorem tego jest semantyczność dokumentów.

jQuery – szybki start!

Na początku użyjemy jQuery, aby odsłonić i ukryć rozszerzoną treść newsa z poniższego dokumentu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<!-- dodanie jQuery do dokumentu -->

<script type="text/javascript" src="jQuery.js"></script>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

</script>

</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" id="link">więcej</a></p>

<p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>

Jeśli jesteś czytelnikiem Praktycznego wprowadzenia do JavaScript, zapewne znasz już ten dokument z pierwszych odcinków serii artykułów pod tym tytułem. Wtedy, używając czystego języka JavaScript, aby umożliwić użytkownikowi ukrywanie i pokazywanie rozszerzonej treści newsa, użyliśmy takiego kodu:

function PokazAkapit()
{
	var akapit = document.getElementById('more');
	var odnosnik = document.getElementById('link');

	var view = akapit.style.display;

	if (view == "block")
	{
		odnosnik.innerHTML = "więcej";
		akapit.style.display = "none";
	}

	if (view == "none")
	{
		odnosnik.innerHTML = "schowaj";
		akapit.style.display = "block";
	}

}

Tyle kodu musieliśmy napisać, by osiągnąć nasz cel.

W jQuery sprawa ma się całkiem inaczej. Wystarczą nam, hmm, 3-4 linijki?

Zanim jednak przejdziemy do implementacji tego problemu używając frameworka, omówmy sobie, co skrypt powinien robić po kolei. Pozwoli nam to o niebo łatwiej spojrzeć na zagadnienie.

Wersja łopatologiczna:

Tak przedstawia się symulacja działania. Czas teraz przełożyć każdy z poniższych punktów na kod wykorzystujący funkcje i składnię jQuery.

Gdybyśmy po kolei zapisywali te instrukcje w czystym JavaScript, nasz kod na pewno byłby bardzo rozległy. Tymczasem jQuery, jako zbiór funkcji, dzięki którym unikniemy długich konstrukcji i powtarzającego się kodu, zrobi wiele za nas, począwszy od wykrycia, kiedy okno przeglądarki zostanie załadowane. Co więcej, nie musimy w tym przypadku czekać, aż wszystkie elementy (obrazki, elementy flash itd.) zostaną wczytane. Kiedy tylko szkielet tagów dokumentu (DOM) zostanie przekazany przeglądarce, jQuery to wykryje i od razu zacznie działać!

Pierwsze, co musimy zrobić, to właśnie pobrać odnośnik do dokumentu, by móc później nadać mu zdarzenie podobne do DOMContentLoaded w JavaScript.

W JavaScript całość wyglądałaby tak:

document.DOMContentLoaded = function() { }

A w jQuery? Popatrzmy, kodując małymi kroczkami:

$(document)

Powyżej pobraliśmy odnośnik do dokumentu HTML. Robi to za nas funkcja $(). Jest ona częścią jQuery i jest bardzo uniwersalna. Pozwala pobrać odnośniki do tagów o określonym identyfikatorze:

$("#jakis_id")

czy też klasie:

$(".jakas_klasa")
Zauważ, że przed identyfikatorami podajemy “#”, a przed klasami “.” (kropkę).

Można też pobierać odnośniki do grupy elementów, stosować selektory CSS. O tym wszystkim jednak później.

Jeśli kodowałeś w JS wcześniej, z pewnością uznasz, że to takie uniwersalne document.getElementById().

Pobraliśmy już odnośnik do dokumentu, pora zająć się teraz zdarzeniem DOMContentLoaded. W jQuery jest jej odpowiednik – ready(), który stosujemy, oddzielając go kropką od odnośnika do elementu, na którym ma być te zdarzenie użyte. Tym elementem w naszym przypadku jest document, więc łączymy co trzeba:

$(document).ready()
W przeglądarkach bazujących na silniku Geckom, a także w Operze, odpowiednikiem ready() jest zdarzenie

document.DOMContentLoaded.

IE obsługuje tylko window.onload, choć na siłę da się to obejść.

W wyniku prostej zależności stwierdzamy, że DOMContentLoaded w JS = ready w jQuery. Jak pamiętasz, zdarzenie DOMContentLoaded, jak zresztą każde zdarzenie, wykonywało jakąś funkcję. Podobnie jest z ready, które taką funkcję przyjmuje jako argument pomiędzy nawiasami.

Jeśli więc w JS napiszemy:

document.DOMContentLoaded = function() { JakasFunkcja(z_jakims_argumentem); }

to w jQuery wyglądało to będzie następująco:

$(document).ready( function () { JakasFunkcja(z_jakims_argumentem); } );

Dość już tych analogii, przejdźmy teraz do kolejnego punktu. Po załadowaniu dokumentu, musimy pobrać odnośnik do linku id=”link”:

	$(document).ready(
	function()
	{	
		$("#link")

Zupełnie analogicznie do pierwszego punktu – dzięki funkcji $ pobraliśmy odnośnik do elementu o id=”link”. Pamiętajmy o użyciu kotwicy, wskazującej, że chcemy pobrać element o określonym id.

Pora teraz nadać linkowi właściwość, by po kliknięciu uruchomił funkcję odpowiedzialną za zwijanie i rozwijanie akapitu. Zrobimy to znów analogicznie do ready, używając zdarzenia click (w JS było to onclick!):

	$(document).ready(
	function()
	{	
		$("#link").click()

click nie jest wyjątkiem i jak wszystkie zdarzenia w jQuery jako argument przyjmuje kod, który ma wykonać po wychwyceniu kliknięcia:

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			
		});

Jak widać, w argumencie zdarzenia click wstawiliśmy pustą funkcję. Aby wypróbować to, czy przeglądarka rzeczywiście przechwyci kliknięcie w link o id="link", wstawmy jak zwykle powiadomienie alert(). Wcześniej jednak zamknijmy wszystkie klamry i nawiasy, pamiętając, że każdą linijkę kodu, oprócz funkcji, kończymy średnikiem:

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			
		});
	});

Po czym wstawmy to, o czym przed chwilą mówiliśmy:

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			alert('KLIK!');
		});
	});

Jak widać działa!

Pozostaje już tylko zająć się kodem odpowiedzialnym za zwinięcie, bądź rozwinięcie akapitu. W tym momencie po raz kolejny przydaje się nam kolejna magiczna funkcja jQuery. Otóż programiści przewidzieli, że w JS często realizujemy ukrywanie bądź pokazywanie się jakichś elementów. W związku z tym, udostępnili specjalną funkcję, która sama rozpoznaje, czy element jest pokazany, czy ukryty. Nie musimy się martwić wartością display! Funkcja ta nazywa się toggle() i działa wraz z pobranym odnośnikiem do elementów, bądź grupy elementów (na razie pobieramy je tylko do pojedynczych tagów).

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").toggle();
		});
	});

Sprawa jest prosta - pobraliśmy odnośnik do akapitu o id="more" ($("#more")) i nakazaliśmy uruchamiać w stosunku do niego funkcję toggle. Skrypt spisuje się świetnie!.

Analizując po kolei powyższy kod, nie mamy aż tylu wątpliwości, co w przypadku czystego JS. Kod ten prezentuje łańcuchowe działanie. Najpierw przechwytuje moment załadowania się dokumentu, a potem moment kliknięcia w link. Specjalna funkcja toggle(), obsługująca rozwijanie się i chowanie elementów robi za nas dużą robotę.

Cały dokument HTML wygląda następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<!-- dodanie jQuery do dokumentu -->

<script type="text/javascript" src="jQuery.js"></script>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").toggle();
		});
	});
</script>

</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" id="link">więcej</a></p>

<p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>

Podany przykład, dzięki jQuery, możemy rozbudować o skromną animację rozwijającą akapit. Wystarczy uzupełnić funkcję toggle o jeden z czterech argumentów, określających szybkość zwijania i rozwijania się:

Twórcy frameworka, oprócz funkcji toggle, przygotowali również dwie inne: show i hide. show() pokazuje dany element, a hide() chowa. Obie funkcje przyjmują dwa argumenty. Pierwszy to szybkość wyrażana podobnie, jak w toggle - slow, normal, fast i dowolna liczba milisekund. Drugi argument to funkcja, jaka ma się wykonać po wykonywaniu tej głównej (show lub hide).

Popatrzmy na poniższe przykłady, podmieniając tylko kod JavaScript, a strukturę dokumentu zostawiając nienaruszoną:

$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").show("slow",
			function() { alert('Właśnie pokazałeś akapit'); } );
		});
	});

W działaniu prezentuje się to bez zarzutu. Po kliknięciu w link, powinniśmy ujrzeć okienko z tekstem Właśnie pokazałeś akapit. Dzieje się to dlatego, że w drugim argumencie funkcji show umieściliśmy funkcję, jaka ma się wykonać po zakończeniu pokazywania paragrafu:

function() { alert('Właśnie pokazałeś akapit'); }

Analogicznie możemy zrobić w przypadki hide:

$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").hide("slow",
			function() { alert('Właśnie ukryłeś akapit'); } );
		});
	});

Po przejrzeniu dokumentacji jQuery dostrzegłem duże podobieństwo w funkcjach show, hide i toggle. I spełniły się moje przypuszczenia, że również w przypadku toggle możemy użyć drugiego argumentu w postaci funkcji. Wykona się ona, a jakże by inaczej, po zwinięciu się bądź rozwinięciu danego elementu.

Jak widać, jQuery jest bardzo elastyczny i funkcjonalny. Będąc na fali jego możliwości, sprawmy, by po rozwinięciu akapitu, nasz link zmienił wartość na schowaj, a po zwinięciu na więcej.

Jak łatwo można wywnioskować, schowaj pojawiać się będzie po nieparzystym kliknięciu, a więcej po parzystym. Czyli wyglądać to będzie tak:

Żadna nazwa w programowaniu nie jest bez przyczyny. I tak, toggle po angielsku to m.in. przełącznik.

jQuery oferuje funkcję, która działa wraz ze zdarzeniem click i która pozwala wykonać funkcje podczas parzystego kliknięcia w dany element i podczas nieparzystego. Nazywa się... toggle. toggle przyjmuje dwa argumenty - pierwszy z nich to funkcja wykonywana podczas nieparzystego kliknięcia, drugi - funkcja wykonywana podczas parzystego kliknięcia. Jako że jest ona używana wraz ze zdarzeniem click, musimy wpleść nią tak, aby kropka łączyła się z tym właśnie zdarzeniem, czyli:

$("#link").click(-TUTAJ KOD ZDARZENIA-).toggle(PIERWSZA FUNKCJA, DRUGA FUNKCJA);

Uzupełnijmy więc skrypt:

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").toggle();
		}).toggle(function() {  }, function() {  });
	});

Jak widać, funkcja toggle została wzbogacona o dwa argumenty w postaci pustych funkcji. Dla testu przypiszmy każdej z nich odpowiedni alert:

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").toggle();
		}).toggle(function() { alert('RAZ'); }, function() { alert('DWA'); });
	});

Jak na razie wszystko gra, co widać na przykładzie.

Pora teraz w pierwszej funkcji zmienić wartość linka na schowaj. Mój pomysł jest taki, by pobrać doń odnośnik i ustawić innerHTML. Szybko jednak zreflektowałem się, że o ile pierwszy krok jest dobry, to z innerHTML przegiąłbym na całej linii. Twórcy jQuery przewidzieli to i udostępnili funkcję text(), która zmienia w łatwy sposób tekst danego tagu, zgodnie ze standardami. Wystarczy pobrać odnośnik do interesującego nas elementu i użyć .text("jakis nowy tekst"). Do dzieła:

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").toggle();
		}).toggle(function() { $("#link").text('schowaj'); }, function() { alert('DWA'); });
	});

Dla przejrzystości wyłączmy z tego kod, nad którym pracujemy:

.toggle(function() { $("#link").text('schowaj'); }, function() { alert('DWA'); });

Jak widać ($("#link")) pobraliśmy odnośnik do linka, po czym ustawiliśmy mu wartość na schowaj (text('schowaj')). Szybko jednak nachodzi mnie refleksja spod gatunku po co pobierać odnośnik, skoro właśnie na nim pracujemy, że pozwolę sobie przypomnieć to, co napisałem kilka akapitów wyżej:

$("#link").click(-TUTAJ KOD ZDARZENIA-).toggle(PIERWSZA FUNKCJA, DRUGA FUNKCJA);

Z tego wynika, że tak jak i zdarzenie click, tak i toggle działa w kontekście odnośnika pobranego na początku tej linijki! ($("#link")). Jeśli tak, to równie dobrze zamiast wpisywać #link, możemy użyć this:

.toggle(function() { $(this).text('schowaj'); }, function() { alert('DWA'); });

Pora teraz na drugą funkcję:

.toggle(function() { $(this).text('schowaj'); }, function() { $(this).text('więcej'); });

Voila!

Cały dokument wygląda tak:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z newsem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<!-- dodanie jQuery do dokumentu -->

<script type="text/javascript" src="jQuery.js"></script>

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	$(document).ready(
	function()
	{	
		$("#link").click(
		function()
		{
			$("#more").toggle();
		}).toggle(function() { $(this).text('schowaj'); }, function() { $(this).text("więcej"); });
	});
</script>

</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" id="link">więcej</a></p>

<p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>

Wycinek z dokumentacji

W każdym odcinku znajdą się bardzo proste i dużo pokazujące przykłady funkcji z danego odcinka, zaczerpnięte z oficjalnej dokumentacji jQuery. Wielokrotnie, jak znam życie, spojrzysz najpierw tutaj, nim weźmiesz się za tekst całego kursu i jest to dobre podejście. Kod jQuery jest często dość nieczytelny i może wydawać się zagmatwany. Proste, krótkie przykłady to zaś dobry sposób na uzmysłowienie sobie działania funkcji.

$("#id")

Zwraca odnośnik do elementu o atrybucie id równym id

$(".klasa")

Zwraca odnośnik do elementu o atrybucie class równym klasa

$(document)

Zwraca odnośnik do całego dokumentu HTML

Generalnie rzecz biorąc, funkcja $ wyszukuje nam elementy i pozwala na nich działach w stylu: $("#element").jakiesdzialanie().jakies_inne_dzialanie_na_elemencie();

$(document).ready(kod)

Po załadowaniu się DOM dokumentu, wykonuje dany kod.

Kod:

$(document).ready(function() { alert ('Załadowałem się!'); });

Po załadowaniu strony pokaże okienko z napisem Załadowałem się!

click(kod)

Używany z odnośnikiem do danego elementu, wykonuje dany kod po kliknięciu tego elementu.

Kod:

$("#element").click(function() { alert ('Kliknąłeś mnie!'); });

Po kliknięciu w element o id="element" np. <p id="element"> ukaże się okienko o treści Kliknąłeś mnie!

text("jakiś tekst")

Ustawia niesformatowany, czysty tekst dla elementu.

Kod:

$("#element").text("To jest nowy tekst");

Przed:

<p id="element">stary tekst</p>

Po:

<p id="element">To jest nowy tekst</p>

toggle(szybkość_zwijania)

Używany wraz z odnośnikiem do danego elementu, zwija, bądź rozwija go. Argumentem jest szybkość zwinięcia i jest wyrażana w postaci slow, normal, fast bądź w dowolnej liczbie milisekund, np. 2000.

Kod:

$("#element").toggle(2000);

Zwinie i rozwinie element w odstępie 2000 milisekund (2 sekund).

toggle(szybkosc_zwijania, funkcja1)

Używany wraz ze zdarzeniem click, wykonuje funkcję funkcja1 po pokazaniu lub ukryciu elementu.

Kod:

$("#element").click(function() { alert('to jest klik'); }).toggle("slow", function () { alert('boom!') });

Po każdym kliknięciu pojawia się okienko z napisem boom!. I tak dalej.

Komentarze

1

Mała poprawka: onload nie zawsze można porównać do jQuery(document).ready()

W przeglądarkach opartych na silniku Gecko funkcje wywołane przez jQuery(document).ready() są uruchamiane wraz z onDOMContentLoaded, które jest wywołane po załadowaniu drzewa DOM, a nie wszystkich elementów strony (zdarzenie onload).

2

No pięknie, świetnie :). Uważam, że zrobiłeś świetnie zaczynając kurs jQuery.

Kiedy bedziesz wydawał PDF’a może dorzucisz do niego dodatek, kurs jQuery? To byłoby wspaniałe zwieńczenie całości.

3

lato_p: Rzeczywiscie, uprosilem troche. Zaraz dodam stosowna wzmianke. Dzieki za czujnosc!

Walker: Yep, rozsadny pomysl.

Pozdrawiam

4

No ja pierdziula :) nie mogłem się doczekać kursu o jQuery // wynika to z braku czasu badz łatwodostępnych narzedzi opartych na tej biblioteczce. Jednak Dzięki tobie można sie w koncu czegoś nauczyć :)

czekam na kolejne wpisy :)

5

Jak zawsze dobra robota ;)

wzs
6

Dzięki ;)

7

Ja tu tylko, żeby serdecznie podziękować, bo mimo iż PHP i trochę C++ znam, to z JS do tej pory mi nie szło. We wpisach prezentujesz całość bardzo przyjemnie i dzięki temu w końcu coś zaczyna wychodzić. Dzięki raz jeszcze! :)

zx
8

Świetny tutorial dla początkujących (na przykład dla mnie). Dzięki wielkie. :)

9

$(document).ready() nie równa się window.onload, w żadnej z powszechnie używanych przeglądarek (nawet IE). Polecam przyjrzenie się jak to działa. Od linijki 1588 w nieskompresowanej wersji.

blue
10

Ok, macie mnie. Po prostu w Praktycznym wprowadzeniu nie bylo jeszcze o DOMContentLoaded i dlatego chcialem zachowac jakis pomost miedzy tymi dwoma artykulami. Ale w sumie nieslusznie. Za problemy przepraszam i dziekuje za wskazanie roznic. Poprawione :-)

Pozdrawiam

11

Super kurs!
Dziekujemy!

12

Doczekałam się kursu, co prawda, to co przedstawiłeś zdążyłam już ‘przerobić’ on my own, ale zawsze można się dowiedzieć nowych rzeczy, których się nie zauważyło. Czekam na dalszy rozwój :)

function() { $("#more").text('schowaj'); },

Tutaj powinno być chyba $(“#link”) a nie #more
Dłuższą chwilę się zastanwiałam, chciałeś osiągnąć poprzez odniesienie się do akapitu ;)

13

Jaka wtopa, alez oczywiscie ze tak :). Dzieki, teraz wiem, ze czytacie uwaznie :-)

14

Warning.Text = 'This Framework!!';

Nie powinno byc Warning.Tekst ?

Pacio
15

Poprawione :-)

16

Witam, z góry chciałbym podziękować za kursik bo na prawdę dobra robota i już przynajmniej mam jakieś pojęcie o tej ciekawej bibliotece, ale chciałbym nieco podążyć dalej i mam pytanko:
Czy jest możliwość alby treść była rozsuwana w lewą stronę a nie w dół ?

17

Musialbys napisac inny kod HTML, bo, jak mniemam, pewnie chodzi Ci typowe menu? W czystym CSS ukrylbys galezie danego menu, i w jQuery je rozsuwal po najechaniu myszka. Pomysle o tym przy okazji kolejnych odcinkow.

18

mam takie pytanko jak rozwiązać problem gdy masz kilka postów, które chcesz rozwijać linkiem ‘więcej’? chodzi o to że jak kliknę link o klasie ‘więcej’ rozwiną się wszystkie posty o klasie ‘more’. w przypadku uzywania id zamiast class trzeba by powielac kod javascript?!

jlp
19

$("p.more").toggle();

Rozwinie wszystkie akapity o class=”more”.

20

:) wlasnie chodzi mi o to zeby tak NIE bylo. chce zeby link rozwijal odpowiedni akapit. nie wszystkie

jlp
21

Normalnie miodzio :) Tego właśnie szukałem :) Dobra robota. Będę tu częściej zaglądał

Krzysztofem
22

zapowiada sie ciekawie, juz czytam nastepne odcinki :D pozdrawiam

keep up the good work

23

Mam pytanko dotyczące tego tutoriala. Po zastosowaniu obojętnie jakiej animacji (slow, fast …) w funkcji toggle() tekst który się pokazuje po naciśnięciu przycisku “więcej” jest wyświetlony czcionką arial, chociaż w stylach w sekcji body mam ustawioną czcionkę Verdena. Użycie stylu na tagu też nic nie daje.
Mam pytanie czemu w ukrytych tagach zmienia mi się czcinka z Verdena na Arial. Sytuacja taka nie występuje kiedy funkcji toggle() nie przypisze żadnego argumentu. Proszę o pomoc i gratuluje świetnego tutorialu.

marcinflash
24

Nie ma takiej czcionki jak Verdena, jest Verdana… Moze zle napisales w CSS i dlatego…

25

Przepraszam za błąd faktycznie Verdana, ale w pliku css mam naperwno dobrze napisany kod.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

również jeżeli utworze styl dla tagu ,

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

jest to samo. Mam pytanie, czy mogę wysłać ci plik z tym tutorialem, To sam sam zobaczysz.

marcinflash
26

Wyslij, ale uprzedzam, ze dysponuje mala iloscia czasu :-)

27

Dzięki za tutorial, zazwyczaj wszystkiego uczę się sam, ale wychodzi mi to lepiej, jeśli ktoś mnie lekko pchnie na dzień dobry ;)

28

Witam, świetne wprowadzenie do JQuery – gratuluję ;) Mam małe pytanie… …czy da się za pomocą tego frameworka uzyskać efekt, który udało mi się uzyskać za pomocą frameworka mootools na tej stronie Aby zobaczyć efekt, o który mi chodzi należy kliknąć w layout strony – generalnie rzecz sprowadza się do tego że zawartość warstwy wjeżdża od góry wraz z jej odkrywaniem, co daje dosyć naturalne wrażenie. Próbowałem taki efekt uzyskać w jQuery, ale standardowe animacje tego nie umożliwiają. Może jest jakiś sposób aby uzyskać pożądany przeze mnie efekt…? z góry dziękuję za odpowiedź.

RaRu
29

Witam serdecznie :)
Na wstepie dziekuje za super kursik :)
A mam pytanie odnosnie malego skryptu ktory napisalem na podstawie kursu, mianowicie mam kod:
$(document).ready(
function()
{
// home
$("#home").hover(
function()
{
$("#pod_top_prawa").slideUp("normal",function(){
$("#pod_top_prawa").html('som text')
$("#pod_top_prawa").slideDown("normal");
});
$("#tekst_top").fadeOut("fast",function(){
$("#tekst_top").html('Strona główna')
$("#tekst_top").fadeIn("normal");
});
});
// oferta
$("#offer").hover(
function()
{
$("#pod_top_prawa").slideUp("normal",function(){
$("#pod_top_prawa").html('oferta')
$("#pod_top_prawa").slideDown("normal");
});
$("#tekst_top").fadeOut("fast",function(){
$("#tekst_top").html('Zapozan się z moją ofertą')
$("#tekst_top").fadeIn("normal");
});
});
});

I mam taki problem, ze po najechaniu w pierwszy link #home ladnie mi sie pokazuje zamieniony tekst ale po najechaniu na link #offer nic sie nie dzieje i nie mam pojecia dlaczego. W czym zrobilem blad?

Bartosz
30

Przepraszam za zle wklejony kod.

Bartosz
31

u mnie natomiast jest problem z chowającym sie menu.
$(“#link”).mouseover(
function()
{
$(“#id_od_podketygorii”).show(“slow”);
});

$(“div”).mouseout(
function()
{
$(“#id_od_podketygorii”).hide(“slow”);
});

między divami są podkategorie. Po zjechaniu kursorem z 1szej pozycji menu sie chowa, a nie po zjechaniu z całego menu ?

maciej
32

witam stosuje jquery w polaczeniu z mysqlem taka funkcyjka chce uzyskac efekt jak a zumi.pl czyli autocomplete .
function lookup(inputString) {
if(inputString.length == 0) {
$(‘#suggestions’).hide();
} else {
$.post(“rpc.php”, {queryString: “”+inputString+””}, function(data){
if(data.length >0) {
$(‘#suggestions’).show();
$(‘#autoSuggestionsList’).html(data);
}
});
}}
w rpc.php jest typowe zapytanie select i wyswietlenie rekordow o zadanycm stringu
$query=”select nazwa from miejscowosc where nazwa LIKE ‘”.$_POST[‘queryString’].”%’ LIMIT 15″;

to niby dziala
ale wypisuje mi rekordy bez polskich znakow w dziwnym kodowaniu.jak zrobic bybylo to na 8859-2?

sebe
33

ok, wszystko ładnie wygląda – ale co w przypadku
gdy newsów mamy np 50 na stronie ?
jak podawać ID o który chodzi ?

bm
34

Naprawde świetny kurs. Robisz kawał dobrej roboty. Pozdrawiam :)

Piotrek
35

[…] Tutaj można znaleźć o wiele więcej i podanych w b. przystępny sposób informacji o wykorzystaniu javascript. W opisanym powyżej pliku css opisujemy odpowiednio linki czyli np: […]

36

a co z większą ilością newsów? przy jednym śmiga a pozostałe …… nic?
proszę o odpowiedź.
dziękuję

wertypl
37

Jeśli chcesz zrobić listę news, czy faq to skorzystaj z tego:
rozwijana lista jquery tu jest to opisane i działa.

38

Wielkie dzięki za kurs! Ciągle sam się uczę tworzyć www oraz
programować w php i JS. Nie wiedziałem że są tak profesjonalne
polskie tutoriale, zazwyczaj kiedy czegoś chcę się nauczyć to
zadaję pytanie G. po angielsku. Dobra biorę się za drugą lekcję :)
pozdrawiam!

39

Super, super, super, po prostu genialny kurs. Niestety spotkałem się z pewnym problemem. Gdy stworze rozwijane menu tak, że po rozwinięciu całego nie mieści się na stronie to oczywiście pojawia się pasek przewijania. Gdy zjadę nim w dół i tam rozsunę kolejną kategorie to pasek przewijania szybuje do góry. Wygląda to bardzio brzydko gdy strona sama przeslakuje do góry. Jak temu zaradzić?

40

Witam !

Poszukuję plugina w jquery, który prezentowałby taką funkcjonalność jak na poniższym przykładzie (to akurat flash)

http://www.cinergie.be/cinergie/revue81/fig/index_calvaire.html

paolo1234
41

Super! Od razu jakieś przykłady i zastosowanie. Już dwa dni szukam czegoś takiego i nic nie mogę znaleść, a jak już coś jest to od razu z milionem nie potrzebnych funkcji…
Wielkie dzięki, oby tak dalej! Oczywiście do ulubionych :D

asiajek
42


toggle(funkcja1, funkcja2)
Używany wraz ze zdarzeniem click, wykonuje funkcję funkcja1 po nieparzystym kliknięciu, zaś funkcję funkcja2 po parzystym.

Nie wiem dlaczego napisałeś o tym zdarzeniu click. Bez zdarzenia click działa w identyczny sposób. Poza tym super.

43

Nic z tego kursu nie czaje ;/

Not easy
44

Kapitalnie zrealizowane wprowadzenie do technologii. Pozdrawiam :)

sacheverel
45

Ja za to nie czaję nic z innych kursów, ten jest napisany tak prosto, jak dla dzieci!
Dzięki ojczulku!!!

javascript beginner
46

Kurs bardzo fajny tylko że… długi, autor moco się rozpisuje, jak dla mnie za mocno, szybki kurs z kodem wytłumaczenie co do czego i jak działa to jest to czego szukam. Ale z tego nie rezygnuje :)

Krupek01
47

A mnie się pdoba… :)

48

@jlp:[code]
$.ready(function(){
$(‘a.more’).click(function(){$(this).next().toggle()})
}); [/code]
Mam nadzieję, że nie skaszaniłem kodu. W każdym bądź razie chodzi o to, że znajdujesz wszystkie linki z klasą “more”. Do zdarzenia onclick podpinasz szukanie następnego elementu (np.: div z resztą treści) na którym wywołujesz na nim metodę “toggle”.

@marcinflash firebug / iedevelopertoolbar Twoim przyjacielem. (IE Toolbar jest od IE8 zintegrowany, [F12])

@Bartosz: ten link na 100% ma nazwę: “offer”

@maciej:
przeanalizuj 4 przykład z: http://www.developerfox.com/13-excellent-tutorials-on-creating-jquery-navigation-menu/584

@sebe: Kodowanie znaków. Przy przesyłaniu AJAX jest domyślnie UTF-8. Poszukaj sobie w doku jak to nadpisać.

@bm, @wertypl: O tym pewno będzie w następnej części kursu. Poczytaj sobie o selektorach i sposobach znaleznienia kolejnego elementu itp: http://docs.jquery.com/Traversing

@Elektryk: bez “żywego” przykładu trudno powiedzieć. W ‘prototype’ bywała opcja: autoscroll. Jakby co, to zawsze zostaje praca z window.scrollTo() albo slef.location.hash i #idikami w treści

@paolo1234: bardzo ciekawe rozwiązanie. Zobacz, czy to Ci wystarczy: http://www.digitalia.be/software/slimbox2#demo
Jeżeli nie, to efekt przesuwania opiera się na onmousemove, gdzie mierzysz pozycję myszy względem kontenera. A zdjęcie można przesuwać np jako tło i background-position

bato3
49

Świetny kurs, nigdy nie lubiłem javascript i jquery, ale dzięki temu blogowi powoli zmieniam zdanie. Dzięki wielkie ;)

Abik
50

Świetny kurs! Słowa uznania.Wykorzystałem ten framework w dużym projekcie i spisuje się świetnie.Dobra dokumentacja na jquery + brak konieczności dołączania dodatkowych bibliotek czyni go idealnym.Zapraszam do zapoznania sie z artykułem, jak zrobić rozwijane akapity w jquery: http://doctor.programuj.com/component/content/article/3/169-rozwijane-akapity-w-jquery

51

Najlepszy podstawowy kurs jQuery jaki znalazłem w sieci. Wcześniej do jQuery mnie nie ciągnęło, ale teraz myślę, że zacznę go używać ;)

XdaniX
52

Kurs jest świetny i bardzo mi rozpocząć pracę z jQuery jednak przy po umieszczeniu tego kodo do projektu wyświetla się błąd javascript-owy.

Błąd: $(“#link”).click(function () {$(“#more”).toggle(“fast”);}).toogle is not a function

i nie wiem co jest tego przyczyną :/
Może ktoś z was wie?

Pozdrawiam

luks
53

ups już wiem napisałem błędną funkcję zamiast toggle napisałem toogle :/ przepraszam teraz wszystko gra.
Pozdrawiam

luks
54

$(document).ready(
function(){
$(“div.dzial”).hide();

$(“div#menu a.main”).hover(
function(){
$(“div.dzial”).fadeOut(“Slow”);
$(this).children(“div.dzial”).fadeIn(“Fast”);
},
function(){
$(this).children(“div.dzial”).fadeOut(“Slow”);

});
});

Tylko jedno pytanie: czemu children nie działa na ff? Ten kod chodzi pod operą ale pod ff i chromem nie chodzi.

Postać

Profil
Cechy
Ekwipunek
Umiejętności

Miejsca

Miasto
Zbrojownia
Klasztor

Walki

Potwory
Magia
Dziennik

To część kody html

Krzysztofik
55

Witam!
Mam pytanie. Czy da się jakoś wrzucić znak specjalny do function() { $(this).text(” “); }); }); ???

Próbowałem już robić function() { $(this).text(” bla bla + ↑ “); }); });
lub
“bla bla” + ‘↑’ i wiele innych ale jakoś mi nie działa :P

Z góry dziękuję..

Sent
56

No rewelacja – idę do kolejnego tutka – kawał dobrej roboty – DZIĘKI Kolego

slawek
57

Bardzo dobry tutorial. W ogóle twoje kursy są świetne, bardzo dobrze można z nich poznać podstawy jakiegoś zagadnienia, a później samemu dalej kombinować :)

Pozdro

Prasoł
58

Również dołączam się do pochwał! Świetny kurs !!

59

super : )

pawl
60

Szczerze powiedziawszy ta część kursu najbardziej mnie wkurza. Za KAŻDYM! razem, gdy chcę uruchomić funkcję toggle nie działa. Przepisuję znak w znak to samo i NIGDY nie idzie. Dopiero po skopiowaniu kodu z tego dokumentu można cokolwiek zrobić… Załamka

Ofkorse
61

Witam, chcę się nauczyć jquery, bo jedną z jego zalet jest to, że jest kompatybilny z większością przeglądarek. Wie ktoś czemu pod nieszczęsną IE6 nie działa? W linijce $(document).ready(
function()
wyskakuje mi komunikat, że oczekiwano obiektu. Pozdro

Kml
62

Kawał dobrej roboty! Dzięki!

63

Moze kurs dobry dla tych co juz umieja JQuery. Ale dla mnie jako np poczatkujacego jest on wogole nie zrozumialy

Jacek
64

Witam. Mam mały problem. Tworze sobie plik .html wrzucam np kod:

Strona z newsem

$(document).ready(
function()
{
$(“#link”).click(
function()
{
$(“#more”).toggle();
});
});

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.więcej

Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.

Plik odpalam z localhosta i nic się nie dzieje po przycisnieciu odnośnika więcej. Probuje odpalać to na FireFoxie i na Chromie. Czy to znaczy ze moja przegladarka nie obsluguje JS? hmm

Peter
65

Jak dla mnie wprowadzenie super. A co do przedpiśców – moze dla Was najpierw w ogóle kurs JavaScritu?

Photoes
66
67

No super:) Od teraz będę korzystał z tego kursu jest naprawdę bardzo czytelny i podoba mi się. Wiele zrozumiałem!
Pozdrawiam:)

68

[…] W poszukiwaniach pomógł mi wujek Google. Po przeryciu całego Internetu ostatecznie znalazłem jQuery – to łatwe!. Kurs podzielony na kilka części w dość ciekawy sposób opisywany (bynajmniej pierwsza […]

69

Świetny kurs. W końcu zaczynam rozumieć Jquery.

Mt!
70

Wielkie dzięki! Trafiłem na kilka stron o tym frameworku i dopiero na tej jestem usatysfakcjonowany z wyjaśnienia, jeszcze raz dziękuje.

Adam
71