framework pro javascript jquery + knihovna funkcí usnadňujících práci v javascriptu Možnosti: o manipulace s prvky HTML o změna vlastností objektů o podpora události o práce s CSS, podpora selektorů o efekty, animace o velké množství dostupných knihoven HTML = obsah CSS = vzhled jquery = akce
jquery proč používat jednoduché a rychlé rozšířitelné zjednodušuje práci v javascriptu stačí základní znalosti HTML a CSS (i bez javascriptu) nezávislé na prohlížeči ani jiných technologiích neřešíte rozdílnou podporu JS v prohlížečích hotová řešení dostupná dokumentace podporováno IBM, Google, Microsoft,
jquery jak zprovoznit stáhnout <script type="text/javascript" src="jscripts/jquery.js"> </script> nalinkovat přes CDN (Content Delivery Network) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jq uery.min.js"></script> <script src="http://code.jquery.com/jquery- 1.11.1.min.js"></script> výhody a nevýhody minimalizovaná (15 kb), plná (94 kb)
jquery syntaxe jquery = dynamická změna vzhledu, obsahu nebo chování objektu (HTML elementu) $(selector).action() $("p").hide() $(".test").hide() $("#test").hide() $(this).hide()
jquery jak používat vlastní skripty píšeme do externího souboru, např. <script type="text/javascript" src="js/zkouska.js"></script> javascripty je vhodné provádět až po načtení dokumentu $(document).ready(function(){ // vlastní kód $(function(){ // vlastní kód
jquery selektory specifikují požadované HTML elementy lze využít id, class, type, atribut, hodnotu atd. selektory vždy začínají $ a jsou v () $("p") $("#test") $(".test") $(this) $("[href]") $("a[target='_blank']") $("tr:even"), $("tr:odd") $(document).ready(function(){ $("button").click(function(){ $("p").hide();
jquery události syntaxe událostí $("div").click(function(){ $(this).hide(); $("input").focus(function(){ $(this).css("background-color","#cccccc");
jquery efekty Hide, Show, Toggle, SlideDown, SlideUp, SlideToggle, FadeIn(Out) lze použít i parametr v ms nebo slow, fast $("#hide").click(function(){ $("p").hide("slow"); $("#show").click(function(){ $("p").show(3000);
jquery efekty animace animace vyžadují zadání povinných parametrů CSS vlastností pro pohyb je potřeba nastavit objektu position (relative/absolute) $(selektor).animate({parametry},speed,callback); $("button").click(function(){ $(".box").animate({left:'250px' lze nastavit i více vlastností $("button").click(function(){ $(".box").animate({left:'250px', margintop:'250px height:'+=150px'
jquery efekty animace lze použít předdefinované hodnoty hide, show toggle $("button").click(function(){ $("div").animate({ height:'toggle' řetězení akcí $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:'300px',opacity:'0.4'},"slow"); $("div").animate({width:'300px',opacity:'0.8'},"slow"); $("div").animate({height:'100px',opacity:'0.4'},"slow"); $("div").animate({width:'100px',opacity:'0.8'},"slow");
jquery efekty animace stop() metoda stop() zastaví provádění animace $(selector).stop(); $("#stop").click(function(){ $("#panel").stop();
jquery manipulace s HTML get prostřednictvím jquery lze přistupovat k HTML elementům a jejich atributům metoda text() textový obsah elementu $("#btn1").click(function(){ alert("text: " + $("#test").text()); metoda html() HTML obsah elementu $("#btn2").click(function(){ alert("html: " + $("#test").html()); <p id="test">this is <b>bold</b> text in a paragraph.</p>
jquery manipulace s HTML get metoda val() hodnota formulářového pole $("#btn1").click(function(){ alert("value: " + $("#test").val()); metoda attr() hodnota atributu $("button").click(function(){ alert($("#test").attr("id")); <input id="test" placeholder="username" />
jquery manipulace s HTML set prostřednictvím jquery lze přistupovat k HTML elementům a jejich atributům metoda text() textový obsah elementu $("#btn1").click(function(){ $("#test").text("hello"); metoda html() HTML obsah elementu $("#btn2").click(function(){ $("#test").html("<b>hello</b>")); <p id="test">this is <b>bold</b> text in a paragraph.</p>
jquery manipulace s HTML set metoda val() hodnota formulářového pole $("#btn1").click(function(){ alert("value: " + $("#name").val("your name")); metoda attr() hodnota atributu $("button").click(function(){ alert("odkaz nastaven"); $("#link").attr("href","http://www.upce.cz");
jquery manipulace s HTML přidávání metody pro přidávání nového obsahu append() na konec elementu prepend() na začátek elementu after() za element before() před element $("#text").append("some appended text."); $("#text").prepend("some prepended text."); $("#text").after("some text after"); $("#text").before("some text before");
jquery manipulace s HTML odstraňování metody pro odstraňování obsahu remove() odstraní celý element empty() odstraní obsah elementu (potomky) $("#text").remove(); $("#text").empty(); pomocí parametru lze filtrovat elementy, které budou smazány $("p").remove(".italic");
jquery manipulace s CSS metody pro změnu CSS addclass() přidáva třídu elementu removeclass() ruší třídu elementu toggleclass() střídavě přidává/ruší třídu elementu css() vrací/nastaví třídu elementu $("button1").click(function(){ $("h1,h2,p").addclass("blue"); $("div").addclass("important blue"); $("button2").click(function(){ $("h1,h2,p").removeclass("blue"); $("button3").click(function(){ $("h1,h2,p").toggleclass("blue");
jquery manipulace s CSS css() slouží pro zjištění (nastavení) hodnoty CSS $("p").css("background-color"); $("p").css("background-color","yellow"); $("p").css({"background-color":"yellow", "font-size":"200%" $("button2").click(function(){ $("h1,h2,p").removeclass("blue"); $("button3").click(function(){ $("h1,h2,p").toggleclass("blue");
jquery manipulace s CSS rozměry width() height() innerwidth() innerheight() outerwidth() outerheight()
jquery manipulace s CSS rozměry set $("button").click(function(){ $("#div1").width(500).height(500);