Pierwszy odcinek pokazał nam filozofię pisania w jQuery. Ponadto nauczyliśmy się kilku funkcji frameworka, które, jak się okazało, są bardzo przydatne. W dzisiejszym odcinku poznamy kolejne przyjazne funkcje na podstawie praktycznych przykładów.
Manipulacja DOM
Siłą jQuery jest pobieranie elementów za pomocą funkcji $().
Dzięki niej możemy pobrać konkretne tagi i na nich manipulować. Powiedzmy, że dysponujemy poniższą strukturą:
<ul id="lista">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>Plus kawałek arkusza stylów:
.background1
{
background: #E8E8E8;
}
.background2
{
background: #D4D4D4;
}Często w podobnych wypadkach borykamy się z problemem, jak ustawić dane tło dla co drugiego elementu – listy, diva w kontenerze czy też wiersza w tabeli. Najczęściej podobny efekt uzyskujemy jeszcze podczas generowania strony. Wtedy specjalny skrypt rozpoznaje w pętli co drugi element i wstawia jakąś klasę, identyfikator bądź zwykłe style=”background:…. Dla przykładu, w PHP wyglądałoby to tak, jak poniżej:
<?php
foreach ($elements as $key => $value)
{
$class = "background2";
$x = $key%2;
if (empty ($x))
{
$class = "background1";
}
echo '<tr class="'.$class.'">...</tr>';
}
?>W ten sposób powstałoby coś podobnego:
<tr class="background1">...</tr>
<tr class="background2">...</tr>
<tr class="background1">...</tr>
<tr class="background2">...</tr>Gdyby nie brak wsparcia dla CSS3 większości przeglądarek, problem ten można by rozwiązać stosując odpowiednie selektory:
tr:odd
{
background: #D4D4D4;
}
tr:even
{
background: #E8E8E8;
}Jeśli nic nie mówią Ci selektory odd i even, wiedz, że ten pierwszy działa na co drugich elementach (tutaj wiersze tr), których kolejność jest nieparzysta. Even robi to samo, tyle że w stosunku do elementów parzystych. Kolejność elementów liczymy od zera!
Jako że CSS 3 to dopiero nuta przyszłości, jQuery oferuje uniwersalne, działające na każdej przeglądarce wsparcie dla tego typu selektorów. Jeśli więc chcemy pobrać co drugi element z naszej listy, możemy użyć poniższego kodu:
$("ul li:odd")Coś takiego wyszuka nam tylko takie elementy:
<li>b</li>
<li>d</li>Z kolei
$("ul li:even")Pobierze podobnie, jak ul li:odd, co drugie elementy listy ul, których liczba porządkowa jest parzysta bądź równa zero:
<li>a</li>
<li>c</li>Jak widać, magiczne działanie funkcji $() robi wszystko. Dzięki niej możemy wyszukać elementy z drzewa tagów stosując selektory CSS. Jako że wiemy już, jak pobrać stosowne elementy z listy, nadajmy im odpowiednie klasy. Autorzy zadbali również o łatwe ich dodawanie, a wszystko za sprawą funkcji addClass(), która jako argument przyjmuje nazwę klasy, którą chcemy dodać. I tak, jeśli chcielibyśmy, aby wszystkie tagi <li> miały klasę background1, użylibyśmy poniższej konstrukcji:
$("li").addClass("background1");Jak widać, wszystko działa należycie.
W powyższym przykładzie, w zasadzie podobnie, jak to zapisujemy w CSS, pobraliśmy wszystkie odnośniki do elementów listy – <li>. Niezależnie od tego, gdzie te tagi by się mieściły (czy to w liście uporządkowanej czy nieuporządkowanej), skrypt wyszuka je wszystkie ($(„li”)) i doda im atrybut class równy background1 (.addClass(„background1″)).
Pora teraz na nas. Chcemy, by po załadowaniu drzewa dokumentu HTML, parzyste tagi miały klasę background2, a nieparzyste background1. Zrobi to dla nas jQuery, którego funkcje poznane wyżej z łatwością wykorzystamy. Najpierw wypada zacząć od zdeklarowania, że chcemy wykonać dany kod po załadowaniu się strony, tak by użytkownik nie zaobserwował ani chwili niepokolorowanych elementów listy:
$(document).ready(
function()
{Pora teraz pobrać parzyste i nieparzyste elementy listy ul i nadać im stosowne klasy:
$(document).ready(
function()
{
$("ul li:odd").addClass("background1");
$("ul li:even").addClass("background2");
});Przykład nie pozostawia nam złudzeń, to działa!
W tak łatwy sposób powstał poniższy dokument:
<!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 nieuporządkowaną listą</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
.background1
{
background: #E8E8E8;
}
.background2
{
background: #D4D4D4;
}
</style>
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod Javascript: -->
<script type="text/javascript">
$(document).ready(
function()
{
$("ul li:odd").addClass("background1");
$("ul li:even").addClass("background2");
});
</script>
</head>
<body>
<ul id="lista">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</body>
</html>Mimo wszystko, dałoby się to trochę ulepszyć. Gdybyśmy jakimś cudem mieli w swoim dokumencie więcej nieuporządkowanych list <ul>, skrypt pobrałby ich elementy i także ustawił odpowiednie klasy. Potwierdza to sposób, w jaki zapisaliśmy, które elementy chcemy pobrać i na nich manipulować:
$("ul li:odd")$("ul li:even").Znając CSSa, nie mamy wątpliwości, że taki zapis działa na wszystkich elementach dowolnych list nieuporządkowanych. Uściślijmy więc w skrypcie, że chodzi nam tylko o listę z identyfikatorem lista:
$(document).ready(
function()
{
$("ul#lista li:odd").addClass("background1");
$("ul#lista li:even").addClass("background2");
});Podobnie jak w kaskadowych arkuszach stylów, by zaznaczyć, że działać chcemy na dzieciach elementu o danym id, używamy zapisu element#id. W tym wypadku będzie toul#lista.
Powróćmy teraz do początkowego stanu naszego dokumentu, dysponując prostą strukturą, na której nie działa żaden skrypt:
<ul id="lista">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>Jako że standardem jest już wykonywanie menu w formie listy, skoncetrujmy się na tym, co mogłoby ją uatrakcyjnić, gdyby rzeczywiście pełniła funkcję menu. Na myśl przychodzi mi podświetlanie się elementu po najechaniu kursorem myszy. Ten efekt można by także osiągnąć stosując czysty CSS i selektor :hover, ale jak wiadomo, 60% użytkowników Internetu to właściciele Internet Explorera, który niestety :hover obsługuje tylko w połączeniu z linkami <a>. Niemożliwe jest, aby w tej przeglądarce zadziałało coś na wzór li:hover. Na szczęście jest jQuery i jego funkcja hover().
Funkcję tę wykonujemy w poniższy sposób:
$("jakis element/elementy").hover(funkcja1(){}, funkcja2(){})Przy czym funkcja1 wykonuje się po najechaniu kursorem na element, a funkcja2 po zwolnieniu kursora z tego elementu. Powiedzmy więc, że po najechaniu myszy na danym elemencie, jQuery powinien dodać mu klasę highlight, a po zwolnieniu ją usunąć. W CSS wyglądałoby to tak i obyłoby się bez klas:
ul#lista li:hover
{
background: #000;
color: #fff;
}My musimy sobie poradzić bez tego, uzupełniając dokument definicją nowej klasy CSS:
li.highlight
{
background: #000;
color: #fff;
}Pora na zbawcze działanie jQuery. Zaczynamy oczywiście od ustalenia, że dany kod ma się wykonać po załadowaniu dokumentu. Następnie pobieramy stosowne elementy listy:
<script type="text/javascript">
$(document).ready(
function()
{
$("ul#lista li").hover();
});
</script>Jak widać powyżej, po załadowaniu się dokumentu, pobieramy wszystkie elementy listy o id=”lista”. Po kropce jest zaś nieuzupełniona funkcja hover, która będzie wykonywała się dla wszystkich znalezionych elementów. W dokumencie mamy 4 elementy li, mieszczące się w liście „lista”, tak więc jQuery je znajdzie i dla każdego doda właściwość hover.
Niestety, wszystko na nic, ponieważ nie uzupełniliśmy funkcji hover o dwa wymagane argumenty, w postaci omawianych wyżej funkcji. Po najechaniu myszką na każdy element, musi się zmienić jego klasa, tak więc w pierwszej funkcji użyjemy addClass. W drugiej natomiast dobrze byłoby usunąć tę klasę, tak, by element powrócił do poprzedniego wyglądu. Tutaj przyda się nam funkcja removeClass, która usunie klasę podaną w argumencie.
$(document).ready(
function()
{
$("ul#lista li").hover(function() { $(this).addClass("highlight"); }, function() { $(this).removeClass("highlight"); });
});Rozbierzmy teraz na czynniki pierwsze funkcję hover, przy okazji pogrubiając newralgiczne punkty:
hover(function() { $(this).addClass("highlight"); }, function() { $(this).removeClass("highlight"); })Jako że hover przyjmuje jako argumenty funkcje, stosujemy w ich zapisie function () { kod działania } . Następnie, w pierwszej funkcji, która uruchamia się po najechaniu myszką na element, dodajemy mu klasę highlight. Warto zwrócić uwagę na $(this). Dlaczego this? Ponieważ działamy na pobranych elementach z lewej strony ($(„ul#lista li)) i funkcja hover, oddzielona kropką od nich, odnosi się właśnie do tego, co pobraliśmy w $(). A że zmienna this odnosi się do każdego elementu pobranego przez tą funkcję po kolei, mamy przyczynę tego działania. Poza tym trudno byłoby się odwołać do elementów li za pomocą klasy czy identyfikatora, skoro są one niezdefiniowane. Na koniec, w drugiej funkcji, która powoduje wygasanie elementu, usuwamy mu klasę highlight stosując funkcję removeClass. Wszystko działa bez zarzutu, co w jQuery często ma miejsce.
Korzystając z faktu, że funkcja hover uruchamia jakąś funkcję podczas najechania myszką na element, możemy w niej uruchomić również swoje, inne zdeklarowane funkcje. Przecież JavaScript umożliwia wywoływanie funkcji wewnątrz innych:
function a()
{
b();
c();
}Powiedzmy, że napisaliśmy swoją uniwersalną funkcję do podświetlania elementów na czarno o nazwie HighLight:
function HighLight(el)
{
$(el).addClass("highlight");
}Przykładowe wywołanie:
Highlight("#element");Spowodowałoby, że jQuery przy pomocy funkcji $() pobrałoby odnośnik do elementu o id=”element” i dodało mu klasę highlight. Jak już sobie powiedzieliśmy, możliwe to jest też w funkcji podanej jako argument, skorzystajmy z tego. Teraz skrypt wygląda tak:
<script type="text/javascript">
$(document).ready(
function()
{
$("ul#lista li").hover(function() { HighLight(this); }, function() { $(this).removeClass("highlight"); });
});
function HighLight(el)
{
$(el).addClass("highlight");
}
</script>A podglądając jego działanie stwierdzamy, że nic się nie zmieniło.
Idąc dalej, a cały czas posługując się przykładem listy nieuporządkowanej, fajnie byłoby, gdyby każda lista zawierała jakiś paragraf, który defaultowo byłby ukryty. Po kliknięciu w nagłówek listy takowy by się rozwinął. W jQuery to nic trudnego. Uzupełnijmy więc na początek nasz dokument stosownymi paragrafami i stylami, które ukryją każdy paragraf wewnątrz elementu listy nieuporządkowanej.
HTML:
<ul id="lista">
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
</ul>CSS:
<style type="text/css">
ul
{
list-style-type: none;
}
li.highlight
{
background: #000;
color: #fff;
}
ul#lista li p
{
display: none;
}
</style>Naszym zadaniem jest, aby po każdym kliknięciu w <h2> pojawił się, bądź zniknął paragraf sąsiadujący z tym nagłówkiem. Zrobić to możemy na dwa sposoby, dzięki czemu przekonamy się o sile jQuery.
Skrypt powinien działać następująco:
- Pobieramy po załadowaniu się dokumentu elementy <li>. – to już mamy!:
$("ul#lista li") - Pobieramy nagłówek drugiego stopnia h2 z każdego elementu listy, dzięki funkcji jQuery, która pobiera wszystkie bądź konkretne tagi, należące do danego rodzica. Dla nagłówków rodzicem jest oczywiście lista li.
- Każdemu nagłówkowi nadajemy zdarzenie click
- W zdarzeniu tym próbujemy dostać się do sąsiadującego z nagłówkiem h2 tagu <p>
- Na odnalezionym akapicie uruchamiamy wbudowaną w jQuery funkcję toggle, która zwija bądź rozwija dany element – to już znamy z pierwszej części!
Do dzieła!
Pierwszy krok to wklejenie tego, co uzyskaliśmy wcześniej – pobieramy elementy listy.
$(document).ready(
function()
{
$("ul#lista li");
});Następnie szukamy wśród ich dzieci tagów h2. Służy do tego funkcja children. Możemy jej podać w argumencie, na jakiej podstawie chcemy wyszukać dzieci. Jeśli mają to być elementy o określonej klasie, np. .jakas_klasa, użyjemy:
$("ul#lista li").children(".jakas_klasa");Jeśli to mają być dzieci tylko spod wybranego tagu, np. <p>, użyjemy:
$("ul#lista li").children("p");My chcemy wyciągnąć nagówki h2, więc napiszemy:
$("ul#lista li").children("h2");Możemy teraz bez problemu odnieść się do każdego nagłówka z każdego z elementów. Pora nadać zdarzenie click, czyli to, co będzie się działo po kliknięciu w nagłówek.
$("ul#lista li").children("h2").click( function() { });Powiedzieliśmy sobie, że chcemy, aby po kliknięciu nagłówka pokazał się sąsiedni z nim paragraf. Z łatwością osiągniemy to dzięki funkcji next, która poszuka dla elementu sąsiedni, następny element. Możemy spersonalizować, czy ma to być element o jakieś klasie, czy typie, tak jak w funkcji children. Jeśli już znaleźlibyśmy element sąsiadujący, będący akapitem, możemy spokojnie na nim uruchomić funkcję toggle:
$("ul#lista li").children("h2").click( function() { $(this).next("p").toggle(); });Spójrzmy, jaki jest związek przyczynowo-skutkowy zapis tego kodu:
1. Znajdź elementy li należące do listy ul o id=”lista”.
2. Poszukaj wśród ich dzieci tagów h2.
3. Każdemu poszukanemu w ten sposób tagowi nadaj możliwość wykonywania kodu po kliknięciu na niego.
4. Niech ten kod poszuka następnego elementu, będącego tagiem p, sąsiadującego z h2.
5. Uruchom zwijanie i rozwijanie się tego elementu (akapitu p).
Oto gotowy przykład.
A to cały dokument HTML:
<!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 nieuporządkowaną listą</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
ul
{
list-style-type: none;
}
li.highlight
{
background: #000;
color: #fff;
}
ul#lista li p
{
display: none;
}
</style>
<!-- dodanie jQuery do dokumentu -->
<script type="text/javascript" src="jQuery.js"></script>
<!-- Nasz kod Javascript: -->
<script type="text/javascript">
$(document).ready(
function()
{
$("ul#lista li").children("h2").click( function() { $(this).next("p").toggle(); });
});
</script>
</head>
<body>
<ul id="lista">
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
<li><h2>Klik</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.</p></li>
</ul>
</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.
addClass(„nazwa_klasy”)
Funkcja użyta w kontekście danego elementu bądź elementów dodaje każdemu atrybut class równy nazwa_klasy.
Kod:
$("p").addClass("hide");Przed:
<p>Paragraf</p><p>Paragraf</p>Po:
<p class="hide">Paragraf</p><p class="hide">Paragraf</p>removeClass(„nazwa_klasy”)
Funkcja użyta w kontekście danego elementu bądź elementów usuwa każdemu atrybut class równy nazwa_klasy.
Kod:
$("p").removeClass("hide");Przed:
<p class="hide">Paragraf</p><p class="hide">Paragraf</p>Po:
<p>Paragraf</p><p>Paragraf</p>hover(funkcja1, funkcja2)
Funkcja użyta w kontekście danego elementu bądź elementów dodaje do każdego kod symulujący działanie selektora CSS :hover. funkcja1 wykonywana jest, kiedy zachodzi zdarzenie najechania myszką na element, funkcja2, kiedy ustępuje.
Kod:
$("#element").hover(function() { alert('Brawo, to jest hover!'); }, function() { alert('Brawo, to jest koniec hover!'); });Pokaże okienko Brawo, to jest hover po najechaniu myszką na element o id=”element”. Po zwolnieniu kursora pokaże się okienko Brawo, to jest koniec hover!.
children(filtr)
Funkcja użyta w kontekście danego elementu bądź elementów pobiera ich tagi-dzieci.
Kod:
<p><h1>Nagłówek</h1></p>$("p").children("h1");Zwróci:
<h1>Nagłówek</h1>Kod:
<p><h1>Nagłówek</h1><h1 class="h">Nagłówek</h1></p>$("p").children(".h");Zwróci:
<h1 class="h">Nagłówek</h1>Funkcja bez podania argumentu zwraca wszystkie dzieci rodzica.
next(filtr)
Funkcja użyta w kontekście danego elementu bądź elementów pobiera ich tagi sąsiadujące z nimi.
Kod:
<p></p><div></div><small></small>$("p").next("div");Zwróci:
<div></div>Kod:
<p></p><div></div><small></small>$("p").next("small");Zwróci:
<small></small>Funkcja bez podania argumentu zwraca wszystkie sąsiadujące tagi.
Komentarze
Jak zawsze – świetna robota. ;)
A kurs jQuery i Praktycznego wprowadzenia do JS będą jakoś przeplatane ze sobą (np. dwa kursy jQuery, dwa JS), czy różnie to będzie? :>
To jQuery jest świetne :D Na etapie ze „pojawianiem” paragrafu w jedenj linijce zmieściłeś coś co ja w pewnym etapie kursu js napisałem w 50 a na dodatek nie działało w ie ;)
Pobieram jQuery i poprawiam mój skrypcik :]
Raczej to zalezne od mojego „widzimisie”, ale na poczatek planuje publikowac kurs jQuery mniej wiecej w stosunku 3:1 z kursem JS :).
No i już mam 11 linijek :] dzięki za ten kurs, z niecierpliwością czekam na następną część :D
Fajnie, czekam na 3 część :)
Acha, gdzieś w kodzie (tzn, blokach w których jest pokazany kod) są pewne błędy (chociażby slash nie na właściwym miejscu) :)
Tak, byly male literowki, wszystko poprawione, niestety mialem male problemy techniczne z tym. Dzieki :)
A ja mam takie pytanie: czy jest jakiś łatwy sposób, żeby dodatkowo po najechaniu kursorem na elementy (li albo h2) kursor zmieniał się na taki, jaki pokazuje się nad linkami, czyli na łapkę?
Dzięki z góry za odpowiedź, a no i za fajny kurs :)
Dodaj do łancucha, na koncu, po kropce, tak by odnosilo sie to do elementow h2:
.css('cursor', 'pointer');a czy to dziala pod ie7? bo mam z tym klopoty
Mały błąd:
chyba nie „pozostawia” :P
:>
P.S. świetny kurs, dzięki
Boże jakie to proste! :) Rozglądałem się już za innymi frameworkami JS, ale żaden nie trafił do mnie tak jak jQuery. Po 2 częściach Twojego kursu i wprowadzeniu u Riddle’a, jestem tym frameworkiem zachwycony. Zaraz zabieram się za 3. część tutaj a potem za dokumentację na jquery.com bo chyba nie wytrzymam do kolejnych odcinków na waszych blogach ;D
Dzięki!
Co do tego hover i EI to się mylisz:
„Niemożliwe jest, aby w tej przeglądarce zadziałało coś na wzór li:hover.”
Wystarczy zastosować plik htc i w IE hover otrzymują wszystkie selektory ;)
Mowimy o czystym, standardowym podejsciu do kodowania bez hackow i kombinowania na lewo. W tym kontekscie wcale sie nie myle ;-). Pozdr.
Bardzo dobry art, ale czy dobrym rozwiązaniem jest dodawanie klas za pomocą javascriptu? Wszak można go wylaczyc i wtedy lipa. Wedlug mnie nie mozna opierac na js strony, owszem dodawanie zdarzen jak najbardziej ale takich kluczowych elementow strony jak klasy w css to nie bardzo :)
Swoją drogą ciekawe ile procent userow wyłącza javascript w przegladarkach
pozdro
co do tła nie zgodze sie, że w php musi sie robic to tak obszernym kodem
wystarczy
foreach ($elements as $key => $value){
$bg=(($key%2) ? „background2″ : „background1″);
echo „…”;
}
Serio?! Kto by pomyslal… :)
„Znajać CSSa, nie mamy wątpliwości” => „Znając”
bardzo fajny post tutorial:)
pozwolę sobie zadać pytanie:)
załóżmy, że mamy stronę www, na tejże stronie jest kalendarz, a pod nim krótka lista zdarzeń z danego miesiąca; JS służy do generowania kalendarza; jest też wykorzystywany tylko do tego, żeby po najechaniu na jakieś zdarzenie podświetlał na kalendarzu dzień, kiedy ono nastąpiło na inny kolor; a także jeżeli klikniemy na link to za przebudowę kalendarza na inny miesiąc (poprzedni lub kolejny) i ściągnięcie (ajax) wydarzeń z innego miesiąca;
Czy Twoim zdaniem, warto w takim wypadku używać JQuery; czy lepiej swoje autorskie rozwiązanie JS?
nie widze tutaj jakis wielkich problemow wydajnosciowych, takze jQuery moze byc idealne :-)
Odpowiedź dla Iron’a – sądząc po statystyce odwiedzin pewnego serwisu na przestrzeni kilku lat i około miliona wejść to javascript miało włączonych 99.09% odwiedzających…Więc poniżej 1% ma javascript wyłączony. Ale uwaga do css’a wydaje się jednak słuszna.
Czy jest jakaś różnica między zapisem:
$(„ul#lista li h2″).click…
a
$(„ul#lista li”).children(„h2″).click…
?
Nie
nie znam za bardzo javascripta i ucze sie dopiero jquery ale jestem ciekaw zapisu tak jak johnson. Jezeli one sa rownoznaczne to nie ma mozliwosci sciagniecia identyfikatorow tylko bezposrednich potomkow?? bo rozumiem, ze to dziala jak css i zapis #lista li h2 odnosi sie do wszystkich h2 po li w identyfikatorze lista?
witam,
Mam pytanko jak zrobić kilku poziomowe listy rozwijalne, np:
Klik 1-> Rodzaj 1-> Model 1 -> nazwa 1
nazwa 2
Model 2 -> nazwa 1
nazwa 2
Rodzaj 2 -> Model 1 -> nazwa 1
itd.
Wszystko ok kursy świetne ale brakuję mi wyjaśnienia składni jQuery strasznie się gubię w tych wszystkich nawiasach odstępach, kropkach itp nie wiem na jakiej zasadzie to działa Niby rozumiem funkcje ale sam w życiu bym nic nie napisał O CO W TYM CHODZI PROSZĘ O POMOC
To jest świetne! Patrzcie co zamotałem dokładnie czytając te 2 pierwsze lekcje! :D http://lukaszr.ugu.pl/jquery/zasady.html
[...] jQuery – to łatwe! #2 jQuery – to łatwe! #3 jQuery – to łatwe! #4 jQuery – to łatwe! #5: Załkadki jQuery – to łatwe #6: Piszemy prostą grę! [...]
Witam. Świetny kurs jQuery, jednak ciekawi mnie jak mogę pobrać dziecko dziecka – nie chcę gotowego rozwiązania, bo chcę to sam odkryć, ale przydałaby się jakaś drobna wskazówka. Na początku próbowałem to zrobić taką metodą:
$(this).children("p", function () { $(this).children("span").toggle(); });Ale to nie działa, bo chyba metoda children nie pozwala na dodatkowe właściwości poza nazwą „dziecka”.
Będę wdzięczny za wskazówkę : )
Mack, pomyśl. Znasz się coś na selektorach CSS? W jaki sposób ustawiasz selektory, w jakiej kolejności jak chcesz mieć dziecko? Jeśli to Ci nie pomogło przeczytaj też ten post:
http://ferrante.pl/frontend/javascript/jquery-to-latwe-2/#comment-8437
Innymi słowy nie używaj w ogóle tego obiektu „children”, bo w większości wypadków wydaje mi się to bez sensu. Po prostu ustaw w odpowiedniej kolejności divy, p i inne znaczniki wewnątrz $(„…”)
Od 2 lat uczę się JS bardzo intensywnie,
a tu ktoś mi pokazuje że nie trzeba.
Człowiek się uczy by dostrzec że to co już umie można zrobić łatwiej i szybciej.
Dzięki.
P.S. Z lekcji pierwszej do drugiej jest link, a z drugiej do trzeciej już nie…
niedopatrzenie ?
Witam, tak AD jQuery – to łatwe! #1 (bo tam nie ma już chyba dodawania komentarzy) więc mam pytanie
mamy zmieniający się link (pokaż/schowaj)
Dalej mam jakąś treść pokazywaną i chowaną,
ale jest ona długa zatem można na końcu dodać
ten sam link
mamy zmieniający się ten sam link na końcu (pokaż/schowaj)
Efekt jest jak klikniemy w pierwszy zmieni się wyraz ale drugi
zostaje w pierwszej postaci. :/ i ciekawi mnie rozwiązanie tego problemu :)
Pozdrawiam