jQuery 2

In de vorige les heb je geleerd om met (event) functies te werken. Deze les leer je wat variabelen en objecten zijn en hoe je ze kunt gebruiken.

Bekijk eerst onderstaande filmpjes voor een uitleg:
- variabelen
- objecten

Opdracht

1) Zorg dat je de opdracht 2 van de vorige les (jquery 1) hebt afgemaakt.

2) Plak in de html van deze opdracht de volgende html code:

<span id="knopje">knopje</span>

<div class="test1">test1</div>
<div class="test2">test2</div>
<div class="test3">test3</div>
<div class="test4">test4</div>
<div class="test5">test5</div>
<div class="test6">test6</div>

3) Plak in de stylesheets de volgende  css code:

div {
  height: 500px;
}

.test1 { background: red; }
.test2 { background: blue; }
.test3 { background: green; }
.test4 { background: yellow; }
.test5 { background: pink; }
.test6 { background: grey; }

#knopje {
  display: inline-block;
  background-color: #E0645C;
  padding: 10px;
  border-radius: 5px;
  margin: 20px;
  font-family: helvetica;
  box-shadow: 1px 1px 3px;
  cursor: pointer;
}

#knopje:hover {
  color: white;
}

4) Zorg met jquery dat wanneer er op het knopje geklikt wordt, de pagina naar de div "test5" springt.
Gebruik hiervoor de functies offset() en scrollTop().


5) Zorg met jquery dat wanneer er op het knopje geklikt wordt, de pagina naar de div "test5" scrolled met een vertraging. Tip: gebruik hiervoor de jquery functie animate().

Jquery 1

Opdracht 1) Starten met JQuery

- Bekijk eerst deze twee filmpjes:
     - A) Functies
     - B) Event functies
- Maak vervolgens de oefeningen die in de onderstaande CodePen staan. (klik op "edit on CodePen").

See the Pen Oefening jQuery by Nangko (@nangko) on CodePen.

Opdracht 2) Jquery in een eigen site gebruiken

- Download dit html bestand en open hem in je editor.
- Zorg er voor dat je jquery io die pagina kunt gebruiken (zie dit filmpje).
- Zorg er voor dat wanneer je op de titel '.article_box_header_link' klikt, de tekst die in de div daar onder '.article_box_text' staat wordt weergegeven. Dit kan je doen daar die div ook nog de class 'open' te geven.

- Zorg er voor dat wanner je nog een keer op de titel klikt, de tekst weer verborgen wordt.

Emmet installeren in Edge code of Brackets

In de video hieronder wordt uitgelegd hoe je Emmet kan installeren in Edge code en/of Brackets.
Voor de installatie zal je de volgende url moeten kopiëren en plakken:

    https://s3.amazonaws.com/extend.brackets/brackets-emmet/brackets-emmet-1.1.3.zip

Edgecode = Brackets

Edgecode wordt voortgezet als brackets. Dus als je de laatste versie wilt hebben, kun je die hier downloaden.