JavaScript jQuery
description
Transcript of JavaScript jQuery
![Page 1: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/1.jpg)
JavaScriptjQuery
![Page 2: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/2.jpg)
Kas yra JavaScript?
Programavimo kalba, skirta interneto aplikacijų kūrimui
Vykdoma vartotojo kompiuteryje (client-side), o ne interneto serveryje.
Leidžia manipuliuoti HTML dokumentu, atlikti įvairius skaičiavimus, gauti papildomų duomenų iš serverio neperkraunant viso puslapio
![Page 3: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/3.jpg)
Problema – naršyklės
Skirtingos naršyklės naudoja skirtingus JavaScript variklius, kurie skiriasi tiek sparta, tiek galimybėmis.
Šiek tiek skiriasi ir sintaksė, todėl sudėtinga rašyti visoms naršyklėms vienodai “suprantamą” kodą.
![Page 4: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/4.jpg)
jQuery
Viena iš JavaScript bibliotekų– Pagerina tarpnaršyklinį suderinamumą– Supaprastina darbą– Prideda papildomo funkcionalumo
![Page 5: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/5.jpg)
JavaScript įterpimas
<script> // javascript kodas</script>
<script src=“kodas.js”></script>
![Page 6: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/6.jpg)
JavaScript pavyzdys
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
![Page 7: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/7.jpg)
JavaScript komentarai
Viena eilutė:// komentaras
Kelios eilutės:/* komentaras prasideda,tesiaisiir baigiasi */
![Page 8: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/8.jpg)
Instrukcijų atskyrimas - ;
<html><body>
<script type="text/javascript">/*The code below will writeone heading and two paragraphs*/document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");</script>
</body></html>
![Page 9: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/9.jpg)
Kintamieji
Vardą turintis objektas, kurio reikšmę galima keisti programos vykdymo metu.
Kintamojo reikšmė gali būti:
– tekstas,– Skaičius– Data/laikas– objektas
![Page 10: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/10.jpg)
Sąlygos : if () {} else {}
Vykdo pirmą arba antrą instrukcijų grupę, priklausomai nuo to, ar tenkinama sąlyga ar ne
![Page 11: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/11.jpg)
jQuery
Iš Google:– https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Arba parsisiųsti:– http://jquery.com/
Įterpiama HTML dokumento pabaigoje, prieš </body>.Visi kiti skriptai, naudojantys jQuery įterpiami po
jQuery įterpimo.
![Page 12: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/12.jpg)
jQuery pavyzdys
![Page 13: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/13.jpg)
Paaiškinimas
$(document).ready( );– Kodas viduje bus vykdomas, kai HTML elementas
bus įkeltas iki galo.
$("p").click( );– Kodas viduje bus vykdomas, kai bus paspausta
pele ant bet kurios pastraipos dokumente.
$(this).hide(); – Elementas, ant kurio paspausta, bus paslėptas
![Page 14: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/14.jpg)
jQuery pavyzdys
![Page 15: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/15.jpg)
Selektorius
$(...) arba jQuery(...)– document - HTML dokumentas– this - elementas, su kuriuo susijęs vykdomas įvykis– kintamasis – CSS:
‘#id’ ‘.class’ ‘p’ ‘a:hover’ ‘#container div.str h1 a:hover’
![Page 16: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/16.jpg)
Įvykiai
.ready( ) .click() .hover(a[,b]) – pelės užvedimas, patraukimas nuo
elemento .change() – reikšmės pasikeitimas .focus() ir .blur() – elementui
suteikiamas/panaikinamas fokusas
![Page 17: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/17.jpg)
Veiksmai
.hide() ir .show() .html(‘<p>dfdf</p>’) – pakeičia HTML
elemento viduje .append(‘ddd’) ir .prepend(‘ddd’) – kaip
ir .html(), tik nepakeičia, o prideda prie esamo turinio – iš galo arba iš priekio
.css(‘color’,’blue’) – pakeičia elemento CSS
![Page 18: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/18.jpg)
Pavyzdys
<script type=“text/javascript”>
$(document).ready();
</script>
![Page 19: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/19.jpg)
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){});
</script>
![Page 20: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/20.jpg)
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
});
</script>
![Page 21: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/21.jpg)
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
$(‘p.aktyvus’).click();
});
</script>
![Page 22: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/22.jpg)
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
$(‘p.aktyvus’).click(function(){ });
});
</script>
![Page 23: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/23.jpg)
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
$(‘p.aktyvus’).click(function(){
});
});
</script>
![Page 24: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/24.jpg)
Pavyzdys
<script type=“text/javascript”>
$(document).ready(function(){
$(‘p.aktyvus’).click(function(){
$(this).css();
});
});
</script>
![Page 25: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/25.jpg)
Pavyzdys
<script type=“text/javascript”> $(document).ready(function(){ $(‘p.aktyvus’).click( function(){ $(this).css(‘color’,’red’); }); });</script>
![Page 26: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/26.jpg)
Užduotis
Parašyti jQuery funkciją, kuri užvedus pelę ant pastraipos jos spalvą pakeistų į raudoną, o patraukus pelę – į juodą.
![Page 27: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/27.jpg)
Užduotis 2
Parašyti jQuery funkciją, kuri, paspaudus ant bet kurios pastraipos, jas visas paslėptų.
![Page 28: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/28.jpg)
Užduotis 3
Parašyti jQuery funkciją, kuri, paspaudus ant vienos pastraipos pakeistų greta esančios pastraipos turinį į paspaustosios pastraipos turinį
.next() .prev()
![Page 29: JavaScript jQuery](https://reader034.fdocuments.net/reader034/viewer/2022042603/568152f3550346895dc10e24/html5/thumbnails/29.jpg)
Praktinė užduotis
jQuery, HTML ir CSS pagalba sukurti veikiantį kalkuliatorių, kuris galėtų būti valdomas pele ir atliktų šiuos veiksmus:– Sudėtį– Atimtį– Daugybą– Dalybą