základy jquery
DESCRIPTION
Základy jQuery, vytvorenie jednoduchej aplikácie s animáciou. Materiály z workshopu v ŽilineTRANSCRIPT
![Page 1: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/1.jpg)
jQuery
FRI ŽU – ŽilinaMgr. Juraj Michálek
http://georgik.sinusgear.com
15. 4. 2011
![Page 2: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/2.jpg)
Obsah
Čo je to jQuery
Základ HTML/CSS
Základ jQuery
Interaktívne aplikácie
![Page 3: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/3.jpg)
Write less, do more
www.jquery.com
Ohloh: http://www.ohloh.net/p/jQuery
![Page 4: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/4.jpg)
HTML a CSS
<div>Ahoj</div>
CSS:div {
color: red;}
![Page 5: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/5.jpg)
ID – jeden výskyt
<div id=“zilina”>Ahoj Žilina</div>
CSS:#zilina {
color: red;}
![Page 6: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/6.jpg)
Class – viac výskytov
<div class=“zilinaClass”>Hoj hoj</div>
CSS:.zilinaClass {
color: red;}
![Page 7: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/7.jpg)
Začíname s jQuery
<script type="text/javascript"
src="jquery-1.5.2.min.js"></script>
![Page 8: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/8.jpg)
Vlastný JavaScript kód
<script type="text/javascript">.... </script>
![Page 9: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/9.jpg)
Základná syntax jQuery
$(selektor).operácia(param1,param2).operácia...
$(selektor).filter(param).operácia(...
![Page 10: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/10.jpg)
Udalosti
$(document).ready(…);
$(“a”).click(…);
![Page 11: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/11.jpg)
Funkcie - demo-01
$(document).ready(function (){
alert(“Pozor!”);}
);
![Page 12: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/12.jpg)
Zmena CSS – demo-02
$(document).ready(function (){
$("div").css("background","red");}
);
![Page 13: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/13.jpg)
Reakcia na klik – demo-03
function clickHandler(){ $(this).css("background","green");}
$(document).re… $("div").click(clickHandler);
![Page 14: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/14.jpg)
Reťazenie operácií – demo-04
$(this).css("background","green").css("height","150px");
![Page 15: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/15.jpg)
Selektor na ID – demo-05
<div id="zilina">Žilina</div> <div id="povazska">Považská Bystrica</div>
$("#zilina").click(zilinaClickHandler);$("#povazska").click(povazskaClickHandler);
![Page 16: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/16.jpg)
Handler funkcie
function zilinaClickHandler() { $(this).css("background","green").css("height","150px"); }
function povazskaClickHandler() { $(this).css("background","yellow"). css("height","100px"). css("border","solid black 5px"); }
![Page 17: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/17.jpg)
Selektor Class – demo-06
<div id="zilina" class="city">Žilina</div><div id="povazska" class="city">Považská Bystrica</div><div id="vrtizer" class="village">Vrtižer</div>
$(".city").click(cityClickHandler);$(".village").click(villageClickHandler);
![Page 18: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/18.jpg)
toggleClass – demo-07 <style type="text/css"> div { background:red; }
.selected { background:pink; height:150px; border: 5px solid red; } </style>
![Page 19: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/19.jpg)
toggleClass
function divClickHandler() { $(this).toggleClass("selected"); }
$("div").click(divClickHandler);
![Page 20: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/20.jpg)
mouseenter, mouseleave – demo-08
<style type="text/css"> div { background:green; height:150px; width:90%; border: 5px solid green; }
.hovered { border: 5px solid black; width:100%; } </style>
![Page 21: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/21.jpg)
mouseenter, mouseleave function enterHandler() { $(this).toggleClass("hovered", true); }
function leaveHandler() { $(this).toggleClass("hovered", false); }
$("div").mouseenter(enterHandler). mouseleave(leaveHandler);
![Page 22: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/22.jpg)
animate – demo-09 <style type="text/css"> div { background:green; height:150px; width:150px; border: 5px solid green; }
.hovered { border: 5px solid black; } </style>
![Page 23: Základy jQuery](https://reader035.vdocuments.pub/reader035/viewer/2022081421/555a27d7d8b42a900d8b499e/html5/thumbnails/23.jpg)
animate
function enterHandler() { $(this).animate({'width':'300px'}, 2000); }
function leaveHandler() { $(this).animate({'width':'150px'}, 2000); }