TIN - Zadanie 4
jQuery
Na początek
pobierz biblioteke jQuery oraz dołącz ją do pliku html.
Pomocne linki:
•
http://blog.themeforest.net/tutorials/jquery-for-absolute-
•
http://docs.jquery.com/Tutorials:How_jQuery_Works
•
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Ćwiczenie 1
Nie używając id, class za pomocą jQuery zdefiniuj style dla następujących elementów podanej
niżej strony:
•
pochylenie tekstu dla wszystkich elementów
•
podkreślenie dla h1
•
pierwszą sekcję (div)
•
ostatnią sekcję (div)
•
3-ci element listy
•
link wskazujący na stronę Wirtualnej polski
•
paragraf zawierający słowo tempus
Pomocne mogą być strony:
•
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/
•
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-4/
•
http://docs.jquery.com/Selectors
Struktura strony:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8">
<
title
>
Untitled Document
</
title
>
<
script
type
=
"text/javascript"
src
=
"js/jquery-1.3.2.min.js">
</
script
>
<
script
type
=
"text/javascript"
src
=
"js/script_4_3.js">
</
script
>
</
head
>
<
body
>
<
h1
>
Zadanie 4.3
</
h1
>
<
div
>
<
h2
>
Paragraf 1
</
h2
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent orci.
Curabitur bibendum. Morbi erat. In libero. Aliquam cursus porttitor diam.
Suspendisse ligula dolor, aliquam eu, bibendum quis, vulputate ut, leo. Quisque
ultrices. Nunc varius sodales elit. Nam luctus ipsum ut est. Praesent feugiat
justo in risus. Mauris auctor massa eu ligula. Maecenas leo. Curabitur pharetra
velit sed sem. Cras mauris lacus, iaculis vel, imperdiet quis, aliquet in,
erat. Morbi metus. Etiam quis nulla ac eros ornare molestie. Vestibulum
eleifend semper tortor. Phasellus eget massa et lorem mollis tincidunt. Ut sed
ligula euismod nunc euismod posuere.
</
div
>
<
div
>
<
h2
>
Paragraf 2
</
h2
>
Proin adipiscing eros eget erat tempus porta. Nullam non elit.
Phasellus orci. Etiam iaculis placerat neque. Vestibulum eros. In hac habitasse
platea dictumst. Etiam nulla. Quisque ut purus. Aliquam ac nibh. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</
div
>
<
div
>
<
ul
>
<
li
>
Raz
</
li
>
<
li
>
Dwa
</
li
>
<
li
>
Trzy
</
li
>
<
li
>
Cztery
</
li
>
<
li
>
Pięć
</
li
>
</
ul
>
</
div
>
<
div
>
<
a
href
=
"http://www.wp.pl">
Wirtualna Polska
</
a
><
br
/>
<
a
href
=
"http://www.onet.pl">
ONET.PL
</
a
>
</
div
>
<
div
>
<
h2
>
Paragraf 3
</
h2
>
Nulla varius. Suspendisse id enim sed lacus tempus pretium. Cras
ullamcorper dolor id nulla. Phasellus ut urna. Phasellus massa ante, volutpat
a, interdum eget, elementum sagittis, eros. Quisque auctor nibh ut ligula.
Phasellus nisi enim, volutpat non, laoreet ac, sodales feugiat, leo. Etiam quis
magna ut urna commodo volutpat. Donec tincidunt tellus nec tellus. Suspendisse
aliquam eros et massa. Curabitur ullamcorper sapien eu leo. Nunc odio dolor,
fermentum non, sagittis vitae, vulputate sagittis, urna. In at felis. Maecenas
placerat justo non eros. Integer eget leo sagittis arcu posuere congue.
</
div
>
</
body
>
</
html
>
Przykładowy wynik:
Ćwiczenie 2
Podświetl wszystkie parzyste wiersze w tabeli:
•
W CSS stwórz klasę z wyglądem odpowiadającym wierszowi tabeli po zaznaczeniu
•
Wybierz parzyste wiersze tabeli i dodaj do nich stworzoną wcześniej klasę
Ćwiczenie 3
Zrealizuj ćwiczenie #3 z zadania #3 korzystając z możliwości jQuery:
•
do każdego paragrafu o id odpowiednio: P1_div,P2_div,P3_div,P4_div,P5_div dodaj link
o id odpowiednio: P1, P2, P3, P4, P5
•
po załadowaniu dokumentu wybierz wszystkie linki i dodaj im funkcje uruchamianą po
kliknięciu
•
w zależności od aktualnej wartości właściwości display spowoduj aby dany paragraf
pokazał się lub ukrył (nazwę paragrafu można uzyskać pobierając wartość atrybutu id
linku i dodając do niego końcówkę „_div”)
Pomocna może być strona:
•
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-2/
Ćwiczenie 4
Umieść na stronie dowolny obraz a następnie za pomocą jQuery spowoduj aby po najechaniu
na niego myszką zmienił się na inny.
Pomocna może być strona:
•
http://docs.jquery.com/Attributes
•
Ćwiczenie 5
http://docs.jquery.com/Plugins
oraz zademonstruj ich działanie na stronie internetowej.
Linki
http://docs.jquery.com/Main_Page
• Pluginy
◦ Oficjalne pluginy do jQuery:
http://docs.jquery.com/Plugins
◦ Nieoficjalne pluginy do jQuery:
• Tutoriale
http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-