jquery - úvod Zdroj: Jiří Zralý:

Transkript

1 jquery - úvod Zdroj: Jiří Zralý: 1 Úvod je to framework pro javascript Stáhnete si jeden.js soubor (to je ten framework, celé hezky v jednom souboru): jquery.com ( Nahrajete si ho ke svému webu tam, kam nahráváte externí javascripty V HTML stránce, kde budete chtít jquery využít ho nalinkujete: <script language="javascript" type="text/javascript" src="/jscripts/jquery.js"></script> Uděláme si vlastní soubor a nezapomeneme ho nalinkovat do HTML souboru: <script language="javascript" type="text/javascript" src="/jscripts/zkouska.js"></script> Všechny javascriptové akce na HTML stránce je nejlépe začít provádět, až je stránka celá načtená, to umí jquery skvěle zařídit, proto veškerý svůj kód, který budeme psát, umístíme do takovéto funkce: // nas kod Tam, kde je // nas kod si už můžeme psát věci, které potřebujeme 2 Adamova zkoušečka jquery Nástroj od Adama Hořčici: Ve zkoušečce si můžete zkoušet a dělat pokusy s jquery: do prvního políčka napíšete část HTML, se kterou budete pokus provádět do spodního okénka napíšete javascriptový kód kliknete na Spustit v posledním okénku se vám zobrazí výsledek /7 JQuery - úvod

2 3 Výběr prvků = selectory Potřebujem získat odkaz na prvek - klasicky v javascriptu: podle id: document.getelementbyid('idelementu') podle jména: document.getelementname('jmenoelementu') V jquery: podle id: $("#idelementu") podle jména: $("nazevelementu") podle třídy: $(".trida") Příklad 1: necháme prvek pomalu zmizet pomocí funkce hide(milisekundy) Hodnota parametru ID u prvků v HTML stránce může podle pravidel obsahovat i tečky a hranaté závorky: $("#muj\.odstavec"), hranaté závorky nebo tečky tedy eskapujte dvěma zpětnými lomítky Nápověda pro selectory: Chci vybrat více různých prvků, oddělím je tedy čárkami: $("p,a,div,#muj_odstavec").hide(1000); Chci vybrat prvek, který je ale v nějakém jiném určitém prvku. Tohle mi například skryje všechny spany v mém odstavci: <div id="ahoj">ahoj!</div> <p id="muj-odstavec"> Můj odstavec <span>span</span> </p> $("#muj-odstavec span").hide(1000); Chci vybrat první prvek v jiném prvku, např. první první span v mém odstavci: $("#muj_odstavec span:first").hide(1000); Hodnotu vybrané položky v <select>, použijeme metodu val(), která nám hodnotu vrací: var cojevybrano = $("#muj_select option:selected").val(); 4 Schovávání a zobrazování prvků Metody hide() nebo show(), parametrem milisekundy... mizí odspodu Metodu fadeout() a fadein()... mizí zesvětláváním Metoda slidedown() a slideup() 5 Přepínáme Metoda toggle()... schování a zobrazování klikáním na stejný prvek Dokumentace pro efekty: /7 JQuery - úvod

3 6 Metody pro manipulaci s obsahem Slouží k manipulaci s obsahem v HTML stránce Metodou text() zjistíme textový obsah nějakého prvku: var obsah = $("#muj_odstavec").text(); umí do nějakého prvku text i vložit: $("#muj_odstavec2").text('nový obsah odstavce'); Takto tedy můžeme například zkopírovat obsah jednoho odstavce do odstavce druhého: var obsah = $("#muj_odstavec").text(); $("#muj_odstavec2").text(obsah); Stejným způsobem můžeme manipulovat i s HTML, a to použitím metody html(), narozdíl od metody text(), html() přenese jak text, tak HTML Pokud byste v cílovém odstavci už nějaký text měli a chcete pouze připojit další text: append()... připojí na konec prepend()... připojí na začátek: $("#muj_odstavec").append(' Toto se připojí na konec odstavce'); $("#muj_odstavec").prepend('toto se připojí na začátek odstavce '); Příklad 1: <p>přeji krásný den!</p> <p> Ahoj! <div id="mujdivelement"> </p> // JavaScript Document $("p").hide(5000); var string = barva(); $("#mujdivelement").html(string); function barva() { var string = "<ul>" + "<li>černá</li>" + "<li>zelená</li>" + "<li>oranžová</li>" + "</ul>"; return string; } 7 Události Událost je nějaká akce, která se na HTML stránce stane, třeba: vaše kliknutí na cokoli... click() pohyb myší na nějaký prvek stisknutí klávesy v zadávacím políčku Událost se zapisuje tak, že vybereme nějaký prvek a tečkou na něj přilepíme nějakou událost Příklad 2: <h1>hra na schovávanou</h1> <p><a href="#" id="schovavac">schovej nebo zobraz</a></p> <p id="muj_odstavec">tohle je můj odstavec, který budu schovávat.</p> $("#schovavac").click(function(){ $("#muj_odstavec").toggle(); /7 JQuery - úvod

4 Názvy událostí jsou podobné jako přímo v Javasciptu, jen nezačínají na on Popis událostí v dokumentaci: Příklad 3: Zvýraznění rámečkem při najetí myší $(this) vybere vždy prvek, kterého se událost týká Událost mouseover() se týká prvku #muj_odstavec, takže v tomto případě $(this) zastupuje prvek #muj_odstavec metoda css() přiřadí prvku nějaký kaskádový styl, v našem případě červený rámeček $("#muj_odstavec").mouseover(function(){ $(this).css('border','1px solid red'); $("#muj_odstavec").mouseout(function(){ $(this).css('border','none'); Příklad 4: Stisknutí klávesy Použijeme událost keyup(), která se vykoná, je-li zmáčknuta a uvolněna nějaká klávesa: $(document).keyup(function(event){ if (event.keycode == 27) { alert("stiskli jste ESCAPE"); } Budeme pracovat s celým dokumentem a událost se bude tedy detekovat na celém dokumentu díky objektu události event v závorkách funkce pak můžeme zjistit, která konkrétní klávesa byla zmáčknuta Příklad 5: Zobrazení okénka na místě kurzoru V tomto příkladu bych vám chtěl ukázat hned 3 věci, které ještě neznáte. Nejdřív příklad: $("#odkaz").click(function(e){ var leftval = e.pagex + "px"; var topval = e.pagey + "px"; $("#okenko").css({left:leftval,top:topval}).fadein(200); e... objekt události můžeme pak zjistit polohu kurzoru ve chvíli, kdy nastala událost, tedy v tzv. moment kliku potom pomocí zápisu e.pagex a e.pagey zjistíme souřadnice ty potom použijeme při polohování okénka pomocí CSS. zvláštní zápis v metodě CSS: můžete prvku přiřadit více CSS vlastností najedou, například: {font-size: "12em", font-color: "red"} vlastnost frameworku jquery řetězení nám dovoluje zkrátit a zjednodušit kód, místo tohoto: $("#okenko").css({left:leftval,top:topval $("#okenko").fadein(200); aby se okénko opravdu zobrazovalo na místě kurzoru, je nutné aby obsahovalo CSS vlastnost: position:absolute, to nám pak dovolí ho pozicovat pomocí vlastností top a left /7 JQuery - úvod

5 8 AJAX AJAX lze v jquery použít mnoha způsoby a jquery má pro něj připraveno několik funkcí Obdobně lze načíst stránku ze serveru, do následujícího divu načteme AJAXem nějakou stránku Do divu HTML stránky lze načíst obsah celého jiného HTML dokumentu: $("#ukazkovy").load("/stranka.html"); Bezpečnostní protokoly nám ale dovolí načíst pouze stránku domény, na které se AJAX nachází, pokud budete chtít načíst třeba seznam.cz, nepůjde to Příklad 6: Načtení stránky HTML <h1>sem s tou novou stránkou!</h1> <div id="vloz"></div> // JavaScript Document $(document).ready(function() { $("#vloz").load("./obsah.html"); /* obsah.html */ <h3>přeji krásný den!</h3> <p> To je ale překrásný den! </p> /7 JQuery - úvod

6 To je ovšem pouze to nejjednodušší použití, přesto dokáže to samé, jako zdlouhavý příklad na vytvoření vlastního AJAXU Další zajímavá funkce je $.get(), která umí poslat na soubor nějaká data a další data zase přijmout Nejdříve si nějaká data pošleme směrem tam: $.get("test.php", { jmeno: "Petr", prijmeni: "Novak" } ); Příklad 7: Zaslání dat na server <p>data: "Petr Novák" budou uložena do souboru</p> $.get("ulozeni_do_souboru.php", { jmeno: "Petr", prijmeni: "Novák" } ); <?php /* ulozeni_do_souboru.php */ $jmeno = $_GET['jmeno']; $prijmeni = $_GET['prijmeni']; $soubor = fopen("./zapis/data.txt","w"); fputs($soubor, "Uchazeč jménem : $jmeno $prijmeni"); fclose($soubor);?> Nyní budeme data přijímat a zpracovávat. Nejdřív příklad: $.get("test.php", function(vystup){ alert("soubor vrátil: " + vystup); Tento příklad zavolá soubor test.php a pokud tento soubor něco vypíše, budete to mít v proměnné vystup Příklad 8: Získání dat ze serveru <h1>tady budou data ze serveru</h1> $.get("zaslani_data.php", function(vystup){ alert("soubor vrátil: " + vystup); <?php echo "Toto jsou data ze serveru!";?> Jak si nechat vrátit více jednotlivých dat v různých proměnných - použití formátu JSON Stačí použít funkci: $.getjson("test.php", function(vystup){ alert("jméno je: " + vystup.jmeno + " a příjmení je: " + vystup.prijmeni); Tento příklad zavolá soubor test.php a pokud výstup z tohoto souboru jsou nějaká data ve formátu: { prom1: "hodnota", prom2: "jina hodnota"} /7 JQuery - úvod

7 Příklad 9: Získání dat ze serveru ve formátu Json <h1>tady budou data ze serveru ziskana ve formě JSON</h1> $.get("zaslani_dat_json.php", function(vystup){ alert("vráceno: " + vystup); $.getjson("zaslani_dat_json.php", function(vystup){ alert("jméno je: " + vystup.jmeno + " a příjmení je: " + vystup.prijmeni); <?php /* zaslani_dat_json.php */ echo '{"jmeno": "Václav", "prijmeni": "Novotný"}';?> Výstup: vráceno: {"jmeno": "Václav", "prijmeni": "Novotný"} Jméno je: Václav a příjmení je: Novotný /7 JQuery - úvod