See leht sisaldab:
jQuery CDN
jQuery JavaScript teek
jQuery lihtsustab JavaScripti kasutamist
jQuery on lihtne õppida
jQuery CDN
jQuery JavaScript teek
jQuery lihtsustab JavaScripti kasutamist
jQuery on lihtne õppida
Klõpsa pildi
Õpilase info
Veronika Vanitseva
jQuery funktsionaalsus
1. Pealkirja värvimine
Kui hiir liigub pealkirja kohale, muutub selle värv oranžiks. Kui hiir eemaldub, muutub värv tagasi mustaks.
$('h1').mouseenter(function() { $(this).css('color', 'orange'); });
2. Lohistatav pilt
Pilti saab hiirega lohistada lehel ringi. Pildi asukoht kuvatakse allpool.
$('#draggable-image').draggable();
3. Teksti peitmine/näitamine
Nupp "Peida tekst" varjab teksti sujuvalt (fade efektiga). Nupp "Näita teksti" kuvab selle tagasi.
$('#toggle-text-btn').click(function() { $('#moving-text').fadeToggle(); });
4. Põrkav efekt (uus meetod)
Kui klõpsata pildil, hakkab see põrkama - see on jQuery UI efekt.
$('#draggable-image').on('click', function() { $(this).effect('bounce', {times: 3}, 500); });
5. Esiletõstmine (uus meetod)
Nupp "Esile tõsta" muudab teksti tausta kollaseks ajutiselt, et rõhutada olulist infot.
$('#highlight-btn').click(function() { $('#moving-text').effect('highlight', {color: '#ffff00'}, 1500); });