Documente Academic
Documente Profesional
Documente Cultură
Exemplu:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Daca dai click pe mine, voi disparea.</p>
</body>
</html>
Ce este jQuery?
jQuery este o librarie de functii JavaScript.
jQuery este o librarie JavaScript “usoara”, scrieti putin, relizati mai multe.
Exemplu:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Acesta este un titlu</h2>
<p> Acesta este un paragraf.</p>
<p> Acesta este alt paragraf.</p>
<button>Click</button>
</body>
</html>
Download jQuery
Doua versiuni jQuery sunt disponibile pentru download: una comprimata, pentru productie si alta
necomprimata (pentru debugging).
Ambele versiuni pot fi download-ate de pe jQuery.com.
Alternative la Download
Daca nu doriti sa stocati libraria jQuery pe calculatorul dvs, puteti folosi libraria jQuery de pe site-
urile Google sau Microsoft.
Google
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
Microsoft
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-
1.4.2.min.js">
</script>
</head>
$(this).hide()
Demonstreaza metoda jQuery hide(), hiding the current HTML element.
$("#test").hide()
Demonstreaza metoda jQuery hide(), ascunzand elementele cu id="test".
$("p").hide()
Demonstreaza metoda jQuery hide(), ascunzand toate elementele <p>.
$(".test").hide()
Demonstreaza metoda jQuery hide(),ascunzand toate elementele cu class="test".
Sintaxa jQuery
Sintaxa jQuery este special conceputa pentru selectarea Elementelor HTML si efectuarea de actiuni
cu aceste elemente.
Exemple:
$(this).hide() - ascunde elementul curent
$("p").hide() – ascunde toate paragrafele
$("p.test").hide() - ascunde toate paragrafele cu class="test"
$("#test").hide() - ascunde elementul cu id="test"
Functia Document.Ready
Poate ati observat ca toate metodele jQuery, din Exemplele noastre sunt inauntrul unei functii
document.ready():
$(document).ready(function(){
// functiile jQuery vin aici...
});
Aceasta este pentru a preveni executarea codului jQuery inainte de incarcarea completa a
documentului.
Uitati cateva Exemple de actiuni care pot esua daca functiile sunt rulate inainte ca documentul sa fie
incarcat complet:
• Incercati sa ascundeti un element care nu exista
• Incercati sa obtineti dimensiunea unei imagini care nu a fost incarcata
Selectorii jQuery va permit sa selectati Elemente HTML (sau grupuri de elemente) in functie de
numele elementului, numele atributului sau continut.
In Exemplul de mai sus, este apelata o functie is cand evenimentul click al butonului este declansat:
$("button").click(function() {..ceva cod... } )
Cand realizam exemple jQuery aici, functiile sunt adaugate direct in sectiunea <head>. Dar, uneori
este de preferat sa le scrieti intr-un fisier separat, ca in exemplul de mai jos (faceti referire la fisier
cu atributul src).
Exemplu:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
Exemplu:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Atat hide() cat si show() pot prelua 2 parametri optionali: viteza si callback.
Sintaxa:
$(selector).hide(viteza,callback)
$(selector).show(viteza,callback)
Parametrul de viteza specifica viteza de ascundere/afisare, si poate lua urmatoarele valori: "slow",
"fast", "normal", sau milisecunde.
Exemplu:
$("button").click(function(){
$("p").hide(1000);
});
Parametrul callback este numele unei functii ce va fi executata dupa finalizarea functiilor hide (sau
show). Veti invata mai multe despre parametrul callback in capitolul urmator.
jQuery Toggle
Metoda jQuery toggle() comuta vizibilitatea Elementelor HTML folosind metodele show() sau
hide().
Elementele afisate sunt ascunse iar cele ascunse sunt afisate.
Sintaxa: $(selector).toggle(viteza,callback)
Parametrul viteza poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde.
Exemplu:
$("button").click(function(){
$("p").toggle();
});
Parametrul viteza poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde.
Parametrul callback reprezinta numele unei functii ce va fi executata dupa ce functia curenta se
termina.
Exemplu slideDown():
$(".flip").click(function(){
$(".panel").slideDown();
});
Exemplu slideUp():
$(".flip").click(function(){
$(".panel").slideUp()
})
Exemplu slideToggle():
$(".flip").click(function(){
$(".panel").slideToggle();
});
Parametrul viteza poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde.
Parametrul opacity din metoda fadeTo() permite decolorarea la un anumit nivel de opacitate.
Parametrul callback reprezinta numele unei functii ce va fi executata dupa ce functia curenta se
termina.
Exemplu fadeTo():
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Exemplu fadeOut():
$("button").click(function(){
$("div").fadeOut(4000);
});
Animatii jQuery
Sintaxa metodei jQuery's pentru realizarea de animatii este:
$(selector).animate({params},[durata],[easing],[callback])
Parametrul cheie este params. El defineste proprietatile CSS care vor fi animate. Pot fi animate mai
multe proprietati in acelasi timp:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Parametrul al doilea este durata. Specifica viteza de animatie. Valori posibile pot fi: "fast", "slow",
"normal", sau milisecunde.
Exemplul 1:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});
});
</script>
Exemplul 2:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"100px"},"slow");
$("div").animate({fontSize:"3em"},"slow");
});
});
</script>
Efecte jQuery
Aici sunt cateva Exemple de functii de efecte in jQuery:
Functie Descriere
$(selector).hide() Ascunde elementele selectate
$(selector).show() Afiseaza elementele selectate
$(selector).toggle() Schimba (intre ascunderea si afisarea)
elementelor selectate
$(selector).slideDown() Slide-down (afiseaza) elementele
selectate
$(selector).slideUp() Slide-up (ascunde) elementele selectate
$(selector).slideToggle() Schimba intre slide-up si slide-down ale
elementelor selectate
$(selector).fadeIn() Mareste opacitatea elementelor selectate
$(selector).fadeOut() Scade opacitatea elementelor selectate
$(selector).fadeTo() Modifica opacitatea elementelor selectate
la un anumit nivel
$(selector).animate() Aplica o animatie personalizata
elementelor selectate
Atat hide() cat si show() pot prelua doi parametri: viteza si callback.
Sintaxa:
$(selector).hide(viteza,callback)
$(selector).show(viteza,callback)
Parametrul viteza specifica viteza de ascundere/afisare, si poate lua urmatoarele valori: "slow",
"fast", "normal", sau milisecunde.
Exemplu:
$("button").click(function(){
$("p").hide(1000);
});
Parametrul callback reprezinta numele unei functii ce va fi executata dupa ce se finalizeaza metoda
hide (sau show). Veti invata mai multe despre parametrul callback in capitolul urmator.
Sintaxa:
$(selector).toggle(viteza,callback)
Parametrul viteza poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde.
Exemplu:
$("button").click(function(){
$("p").toggle();
});
Parametrul callback reprezinta numele unei functii ce va fi executata dupa ce se finalizeaza metoda
toggle.
Functii jQuery Slide - slideDown, slideUp, slideToggle
Metodele jQuery slide schimba in mod gradual inaltimea elementelor selectate.
Parametrul viteza poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde.
Parametrul callback reprezinta numele unei functii ce va fi executata dupa ce functia curenta se
termina.
Exemplu slideDown():
$(".flip").click(function(){
$(".panel").slideDown();
});
Exemplu slideUp():
$(".flip").click(function(){
$(".panel").slideUp()
})
Exemplu slideToggle():
$(".flip").click(function(){
$(".panel").slideToggle();
});
Parametrul viteza poate lua urmatoarele valori: "slow", "fast", "normal", sau milisecunde.
Parametrul opacity din metoda fadeTo() permite decolorarea la o anumita opacitate.
Parametrul callback reprezinta numele unei functii ce va fi executata dupa ce functia curenta se
termina.
Exemplu fadeTo():
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Exemplu fadeOut():
$("button").click(function(){
$("div").fadeOut(4000);
});
Animatii jQuery
Sintaxa metodei jQuery's pentru realizarea de animatii este:
$(selector).animate({params},[durata],[easing],[callback])
Parametrul cheie este params. El defineste proprietatea CSS care va fi animata. Mai multe
proprietati pot fi animate in acelasi timp:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Parametrul al doilea este durata. El specifica viteza animatiei. Valori posibile sunt: "fast", "slow",
"normal", sau milisecunde.
Exemplul 1:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});
});
</script>
Exemplul 2:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"100px"},"slow");
$("div").animate({fontSize:"3em"},"slow");
});
});
</script>
Efecte jQuery
Aveti aici cateva Exemple de functii efect in jQuery:
Functie Descriere
$(selector).hide() Ascunde elementele selectate
$(selector).show() Afiseaza elementele selectate
$(selector).toggle() Schimba (intre ascunderea si afisarea)
elementelor selectate
$(selector).slideDown() Slide-down (afiseaza) elementele
selectate
$(selector).slideUp() Slide-up (ascunde) elementele selectate
$(selector).slideToggle() Schimba intre slide-up si slide-down ale
elementelor selectate
$(selector).fadeIn() Mareste opacitatea elementelor selectate
$(selector).fadeOut() Scade opacitatea elementelor selectate
$(selector).fadeTo() Modifica opacitatea elementelor selectate
la un anumit nivel
$(selector).animate() Aplica o animatie personalizata
elementelor selectate
O functie callback este executata dupa ce efectul curent de animatie este 100% terminat.
Sintaxa:
$(selector).hide(viteza,callback)
Parametrul callback este o functie ce va fi executata dupa ce efectul hide este complet.
Exemplu cu Callback:
$("p").hide(1000,function(){
alert("Acest paragraf este ascuns acum");
});
Fara Parametrul callback, casuta de alert este afisata inainte ca efectul hide sa fie complet.
Exemplu fara Callback:
$("p").hide(1000);
alert("The paragraph is now hidden");
$(selector).prepend(content)
Metoda prepend() adauga la inceput continut Elementului HTML curent.
Exemplu:
$("p").append(" W3Schools");
$(selector).after(content)
Metoda after() introduce HTML dupa toate elementele care se potrivesc.
$(selector).before(content)
Metoda before()introduce continut HTML inainte de toate elementele care se potrivesc.
Exemplu:
$("p").after(" W3Schools.");
Metodele jQuery de Manipulare HTML din aceasta Pagina:
Functie Descriere
$(selector).html(content) Modifica interiorul elementelor HTML
selectate
$(selector).append(content) Adauga continut (la sfarsit) elementelor
HTML selectate
$(selector).after(content) Adauga HTML dupa elementele selectate
Metoda css() are trei sintaxe diferite, pentru a efectua diferite operatiuni.
• css(nume) - Obtine valoarea proprietatii CSS
• css(nume,valoare) - Seteaza proprietati si valori CSS
• css({properties}) - Seteaza proprietati si valori CSS multiple
AJAX cu jQuery
Ce este AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX este o tehnica pentru crearea de pagini web rapide si dinamice.
AJAX permite ca pagina web sa fie actualizata asincron prin mici schimburi de date cu un server pe
fundal. Asta inseamna ca este posibil sa actualizati portiuni din pagina web fara a reincarca toata
pagina.
AJAX si jQuery
jQuery are o bogata librarie de metode (functii) pentru dezvoltare AJAX.
Cu jQuery AJAX, puteti obtine date in format TXT, HTML, XML sau JSON de la un server,
folosind atat HTTP Get cat si HTTP Post.
Si puteti incarcadate direct in Elementele HTML selectate din pagina dvs web!
Metoda jQuery load() este o functie AJAX simpla (dar foarte puternica). Are urmatoarea sintaxa:
$(selector).load(url,data,callback)
Parametrul options ia perechi nume|valoare defineste adresa url, parole, tipuri de date, filtre, seturi
de caractere, functii de timeout si erori.