jQuery zadania id 228844 Nieznany

background image

TIN - Zadanie 4

jQuery

Na początek

Ze strony

http://jquery.com/

pobierz biblioteke jQuery oraz dołącz ją do pliku html.

Pomocne linki:

•

Pobieranie biblioteki jQuery:

http://blog.themeforest.net/tutorials/jquery-for-absolute-

beginners-video-series/

•

Jak działa jQuery ?

http://docs.jquery.com/Tutorials:How_jQuery_Works

•

Pierwsze kroki z jQuery:

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

background image

Ć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

>

background image

<

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:

background image

Ć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/

background image

Ć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

•

http://docs.jquery.com/Events

Ćwiczenie 5

Ze strony

http://docs.jquery.com/Plugins

lub

http://plugins.jquery.com/

wybierz dwa pluginy

oraz zademonstruj ich działanie na stronie internetowej.

background image

Linki

• Strona główna jQuery:

http://jquery.com/

• Dokumentacja jQuery:

http://docs.jquery.com/Main_Page

• Pluginy

◦ Oficjalne pluginy do jQuery:

http://docs.jquery.com/Plugins

◦ Nieoficjalne pluginy do jQuery:

http://plugins.jquery.com/

• Tutoriale

◦ Video tutoriale:

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-

video-series/

◦ Zbiór tutoriali do jQuery:

http://docs.jquery.com/Tutorials

Document Outline


Wyszukiwarka

Podobne podstrony:
chemia zadania 2 id 113035 Nieznany
me zadanie 2 id 290295 Nieznany
plyta zadanie id 363191 Nieznany
Dodatkowe zadania id 138777 Nieznany
formularze zadania id 179681 Nieznany
(budzet zadaniowy)id 1238 Nieznany (2)
CO zadania id 118396 Nieznany
blok 7 zadania id 90420 Nieznany (2)
111 ZADANIA2 1 id 601077 Nieznany (2)
Algorytmy zadania id 51150 Nieznany (2)
elektrotechnika zadanie id 1593 Nieznany
IT zadania1 id 220832 Nieznany
granica ciagu zadania id 195350 Nieznany
arkusz 1 zadania id 68486 Nieznany (2)
Magnucka zadania id 276836 Nieznany
Miary opisowe zadania id 298386 Nieznany
mata zadania zadania id 765851 Nieznany

więcej podobnych podstron