+ knihovna funkcí usnadňujících práci v javascriptu

Návrh a tvorba WWW stránek

jQuery • framework pro javascript

+ • 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">

•

nalinkovat přes CDN (Content Delivery Network)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jq uery.min.js"> <script src="http://code.jquery.com/jquery1.11.1.min.js">

• 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">

• 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 () $(document).ready(function(){ $("p") $("button").click(function(){ $("#test") $("p").hide(); $(".test") }); }); $(this) $("[href]") $("a[target='_blank']") $("tr:even"), $("tr:odd")


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()); });

This is bold text in a paragraph.


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")); });


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("Hello")); });

This is bold text in a paragraph.


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); });

+ knihovna funkcí usnadňujících práci v javascriptu

Recommend Documents