jQuery Write less, do more
Introducere jQuery Ce este Cum se folosește Este o bibliotecă JavaScript Simplifică programarea în JavaScript Este ușor de învățat (?) Este compatibil CSS 3 Este cross-browser Cum se folosește Se descarcă biblioteca și se copie pe server, după care se introduce un link către aceasta, în antetul documentului Se introduce link direct către un furnizor de conținut (CDN), ex: <head><script src="jquery-3.2.1.min.js"></script></head> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script></head>
Cum funcționează Ideea de bază este să ofere o cale facilă de a selecta oricare element HTML și a realiza o acțiune cu acesta Sintaxa de bază este: $(selector).acțiune() Semnul $ definește/accesează jQuery (selector) pentru a interoga (query) sau găsi elementele HTML acțiune() precizează acțiunea de efectuat de către elementul/elementele selectate Exemple: $(this).hide() – ascunde elementul curent. $("p").hide() – ascunde toate elementele <p>. $(".test").hide() – ascunde toate elementele din clasa test (class="test„). $("#test").hide() – ascunde elementul cu id="test".
Cum funcționează Este recomandat cu tărie ca acțiunile jQuery să se producă după încărcarea completă a documentului. În acest scop se folosește metoda ready(): Metoda ready() poate fi folosită pentru orice element dintr-un document, cum ar fi, de exemplu, o imagine: Metoda ready() lucrează cu funcții anonime (care nu au nume). Acestea sunt plasate în parantezele metodei. Dacă aplicația Web are multe pagini, funcțiile jQuery se plasează în fișiere externe: $(document).ready(function(){ // aici metode jQuery... }); $("img").ready(function(){ // aici metode jQuery... }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script>
Metode uzuale jQuery Toate metodele atașează una sau mai multe funcții handler de eveniment unui element HTML: $(element).metoda(handler) Metoda Descriere click() Funcția este executată la apăsarea elementului dblclick() Funcția este executată la dublu click pe element mouseenter() Funcția este executată la trecerea cu pointerul mouse-ului peste un element mouseleave() Funcția este executată la părăsirea de către pointer-ului mouse-ului a elementului mousedown() Funcția este executată la apăsarea oricărui buton al mouse-ului peste elementul HTML mouseup() Funcția este executată la eliberarea oricărui buton al mouse-ului peste elementul HTML hover() Atașează două funcții handler, una pentru trecerea și a doua pentru părăsirea elementului cu pointerul mouse focus() Funcția este executată la câștigarea focusului de către un element blur() Funcția este executată la pierderea focusului de către un element on() Atașează una sau mai multe funcții handler elementului selectat
Metode uzuale jQuery Metoda Descriere hide() și show() Ascunde / afișează elementul. Acceptă doi parametri opționali, speed și callback toggle() Comută ascunderea și afișarea unui element. Elementul ascuns este afișat iar cel afișat este ascuns. Admite parametrii opționali ai metodelor hide() și show() fadeIn() Afișează gradual un element. Are aceeași parametri opționali ca toggle() fadeOut() Ascunde gradual un element. Are aceeași parametri opționali ca toggle() fadeToggle() Un toggle() care combină metodele fadeIn() și fadeOut() slideDown() și slideUp() Afiseaza/ascunde un element prin glisare pe verticală, în jos și respectiv în sus slideToggle () Un toogle() care combină slideDown() și slideUp() animate() Permite crearea de animații personalizate. Are un parametru obligatoriu: lista proprietăților CSS și două opționale, speed și callback stop() Oprește o animație sau efect (slide, fade) înainte de terminare after() și before() Inserează conținut înainte sau după elementul selectat css() Permite modificarea proprietăților de stil ale elementului HTML
Exemple utilizare metode uzuale Exemplu metode hover() și click() <script> $(document).ready(function(){ $("#p1").hover(function(){ $("#mesaje").html("Ai trecut peste P1!"); //metoda html() }, function(){ document.getElementById("mesaje").innerHTML="Ai iesit de pe P1!"; // cu metoda getElementById si propr. innerHTML }); $("#b1").click(function(){ document.getElementById("mesaje").innerHTML="Tocmai ai apasat butonul"; </script> <body> <p id="p1">treci peste paragraful P1</p> <p id="p2">treci peste paragraful P2</p> <input type="button" id="b1" value="Apasa"> <div id="mesaje"></div> </body>
Exemple utilizare metode uzuale Exemplu metode on() și css() <script> $(document).ready(function (){ $("p.test").on({ mouseenter: function(){ $("#mesaje").css("background-color", "lightgray"); }, mouseleave: function(){ $("#mesaje").css("background-color", "lightblue"); click: function(){ $("#mesaje").css("background-color", "yellow"); } }); </script> <body> <p id="mesaje">Fii atent aici!</p> <p class="test">Incearca-ma! Inclusiv cu click :)</p> </body>
Exemple utilizare metode uzuale Exemplu metoda toggle() <script> $(document).ready(function (){ $("#btn").click(function(){ $("p.test").toggle(); if($("#btn").attr("value")=="Ascunde") //* $("#btn").attr("value","Afiseaza"); else $("#btn").attr("value","Ascunde"); }); </script> <body> <p><input type="button" id="btn" value="Ascunde"></p> <p>Acest paragraf nu comuta, fiind din alta clasa</p> <p class="test">Un paragraf care comuta intre ascuns si vizibil</p> </body> * Găsirea și modificarea valorii butonului se face cu metoda attr("nume_atribut" [, "valoare_atribut"])
Funcții callback Exemplu callback cu metoda animate() Scriptul este executat în browser linie cu linie În cazul efectelor, care consumă timp, este posibil ca liniile următoare să fie executate înainte de consumarea efectului, ceea ce conduce, adesea, la erori Prevenirea erorilor se face cu funcții callback, care sunt executate numai după încheierea execuției liniei precedente. Exemplu callback cu metoda animate() Funcția callback <script> $(document).ready(function(){ $("#demo").click(function(){ $(this).animate({left:'200px'},500, function(){$("p").hide()}); }); </script> Metoda animate() Viteza de animație <body> <div id="demo" style="height:50px;width:50px;background-color:green;position:relative"></div> <p>Click pe patrat si voi disparea dupa ce patratul se muta</p> </body>
jQuery AJAX Sintaxa: $.ajax({name:value, name:value, ... }) jQuery dispune de multe metode care facilitează utilizarea transferului asincron de date între client și server. $.ajax(), realizează o cerere de tip AJAX, de tip GET sau POST. Sintaxa: $.ajax({name:value, name:value, ... }) În forma cea mai simplă, utilizarea este: $("button").click(function(){ $.ajax({url: "target_file.txt", success: function(result){ $("#divname").html(result); }}); }); Exemplul de mai sus trimite o cerere AJAX la fișierul target_file.txt iar în caz de succes, răspunsul (conținutul fișierului) este afișat în div-ul #divname.
jQuery AJAX $("button").click(function(){ Forma cea mai simplă este și cel mai puțin folositoare. Cel mai adesea dorim să transmitem parametri odată cu cererea către fișierul țintă: $("button").click(function(){ $.ajax({url: "detalii.php", type: "GET", data: { cat: fructe, maxprice:25} success: function(result){ $("#divname").html(result); }}); }); Exemplul de mai sus trimite o cerere AJAX de tip GET la fișierul detalii.php și parametrii cat și maxprice, cu valorile fructe, respectiv 25. În caz de succes, răspunsul venit de la fișierul țintă este afișat în div-ul #divname. Într-un caz practic, fișierul detalii.php ar trebui să întoarcă datele tuturor produselor din categoria fructe cu prețul mai mic sau egal cu 25).
jQuery AJAX $.get() încarcă răspunsul de la server printr-o cerere de tip GET: Sintaxa: $.get(URL,data,function(data,status,xhr),dataType) URL este URL-ul la care se efectuează cererea function este o funcție opțională care se execută dacă cererea reușește. Folosește parametrii: data este un parametru opțional, care conține parametri care se trimit odată cu cererea status conține starea cererii ("success", "notmodified", "error", "timeout", sau "parsererror") xhr - conține obiectul XMLHttpRequest dataType este opțional și specifică tipul de date așteptat de la server (text, html, json, xml sau script)
jQuery AJAX Exemple $.get("detalii.php"); Trimite o cerere de tip GET la detalii.php, dar nu face nimic cu răspunsul $.get("detalii.php", { cat: "fructe", maxprice: " 25" }) Trimite o cerere de tip GET la detalii.php, cu parametrii cat și maxprice, dar nu face nimic cu răspunsul $.get("detalii", {cat:"fructe", maxprice:"25"}, function(raspuns, stare){ $("#divname").html(raspuns); stare); }); Trimite o cerere de tip GET la detalii.php, cu parametrii cat și maxprice și afișează răspunsul în elementul cu ID-ul divname
Înlănțuirea metodelor