Jquery Romana

Tutorial jQuery
jQuery este o librarie JavaScript.

jQuery simplifica foarte mult programarea JavaScript.
jQuery este usor de invatat.
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>
Libraria jQuery poate fi adaugata la o pagina web cu o singura linie de markup.
Ce ar trebui sa stiti deja
Inainte de a incepe sa studiati jQuery, ar trebui sa aveti cunostinte de baza despre:
HTML
CSS
JavaScript
Ce este jQuery?
jQuery este o librarie de functii JavaScript.
jQuery este o librarie JavaScript usoara, scrieti putin, relizati mai multe.
Libraria jQuery contine urmatoarele caracteristici:
HTML element selections
HTML element manipulation
CSS manipulation
HTML event functions
JavaScript Effects and animatii
HTML DOM traversal and modification
AJAX
Utilitati
Adaugarea librariei jQuery in Pagina Web
Libraria jQuery este stocata intr-un singur fisier JavaScript, continand toate metodele jQuery.
Poate fi adaugata la o pagina web cu urmatorul mark-up:
<head>
</head>
Observati ca tagul <script> trebuie sa fie in sectiunea <head> a paginii.

Exemplu Simplu jQuery
Urmatorul Exemplu demonstreaza cum metoda jQuery hide(), ascunde toate elementele <p> intr-un
document HTML.
Exemplu:
<html>
<head>
$("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 siteurile 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/jquery1.4.2.min.js">
</script>
</head>
Cu jQuery puteti selecta (query) elemente HTML si realiza "actiuni" cu ele.
Exemple cu Sintaxa jQuery

$(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.
Sintaxa de baza este: $(selector).actiune()
Un semn dolar pentru a defini cod jQuery
Un (selector) pentru a gasi "query" elementele HTML
actiune jQuery action() ce va fi executata pe 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"
jQuery foloseste o combinatie de XPath si sintaxa CSS selector.
Veti afla mai multe despre sintaxa selectorilor in capitolul urmator.
Functia Document.Ready
Poate ati observat ca toate metodele jQuery, din Exemplele noastre sunt inauntrul unei functii
document.ready():
// 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 selectarea si manipularea Elementelor HTML ca un grup sau ca un
element singular.
Selectorii jQuery
Un punct cheie este invatarea modului in care jQuery selecteaza exact elementele la care doriti sa
aplicati efecte.
Selectorii jQuery va permit sa selectati Elemente HTML (sau grupuri de elemente) in functie de
numele elementului, numele atributului sau continut.
Selectorii jQuery de Elemente
jQuery foloseste Selectori CSS pentru a selecta Elemente HTML.
$("p") selecteaza toate elementele <p>.
$("p.intro") selecteaza toate elementele <p> cu class="intro".
$("p#demo") selecteaza toate elementele <p> cu id="demo".
Selectorii jQuery de Atribute
jQuery foloseste expresii XPath pentru a selecta elemente cu anumite atribute.
$("[href]") selecteaza toate elementele cu un atribut href.
$("[href='#']") selecteaza toate elementele cu valoare href egala cu "#".
$("[href!='#']") selecteaza toate elementele cu atribut href DIFERIT de "#".
$("[href$='.jpg']") selecteaza toate elementele cu atribut href ce se termina cu ".jpg".
Selectori jQuery de CSS
Selectorii jQuery de CSS pot fi utilizati pentru a modifica proprietati CSS ale Elementelor HTML.
Urmatorul Exemplu modifica background-color la toate elementele <p> in galben.
Exemplu:
$("p").css("background-color","yellow");
Mai multe Exemple:
Sintaxa
$(this)
$("p")
$("p.intro")
$("p#intro")
$("p#intro:first")
$(".intro")
$("#intro")
$("ul li:first")
$("ul li:first-child")
$("[href$='.jpg']")
Descriere
Elementul HTML curent
Toate elementele <p>
Toate elementele <p> cu class="intro"
Toate elementele <p> cu id="intro"
Primul element <p> cu id="intro"
Toate elementele cu class="intro"
Primul element cu id="intro"
Primul element <li> al primei <ul>
Primul element <li> al tuturor <ul>
Toate elementele cu un atribut href care
se termina cu ".jpg"
$("div#intro .head")
Toate elementele cu class="head" in
interiorul unui element <div> cu
id="intro"
jQuery este conceput pentru a manipula evenimente.
Functii jQuery de Evenimente

Metodele jQuery de manipulare a evenimentelor sunt functii esentiale in jQuery.
Gestionarii de evenimente sunt metode ce se apeleaza cand "se intampla ceva" in HTML. Termenul
"triggered (sau "fired") de un eveniment" este adesea utilizat.
In mod uzual se introduce codul jQuery al metodei de gestionare a evenimentului in sectiunea
<head>.
Exemplu:
<html>
<head>
$("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>
In Exemplul de mai sus, este apelata o functie is cand evenimentul click al butonului este declansat:
$("button").click(function() {..ceva cod... } )
Metoad ascunde toate elementele <p>:
$("p").hide();
Functii Intr-un Fisier Separat
Daca website-ul dvs contine multe pagini, si doriti ca functiile dvs jQuery sa fie usor de intretinut,
puneti functiile jQuery intr-un fisier .js separat.
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="my_jquery_functions.js"></script>
</head>
Conflictele de Nume in jQuery
jQuery foloseste semnul $ ca o scurtatura pentru jQuery.
Si alte librarii JavaScript folosesc semnul dolar pentru functiile lor.
Metoda jQuery noConflict() specifca un nume personalizat (precum jq), in loc de semnul dolar.
Evenimente jQuery
Cateva Exemple metode jQuery pentru evenimente:
Metoda Eveniment
Descriere
$(document).ready(function)
Leaga o functie de evenimentul ready al
unui document (cand document este
incarcat complet)
$(selector).click(function)
Declanseaza, sau leaga o functie de
evenimentul click al elementelor selectate
$(selector).dblclick(function)
evenimentul dublu click al elementelor
selectate
$(selector).focus(function)
evenimentul focus al elementelor
selectate
$(selector).mouseover(function)
evenimentul mouseover al elementelor
selectate
jQuery, Ascundere si Afisare
Cu jQuery, puteti ascunde si afisa Elemente HTML folosind metodele hide() si show()
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:
$("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:
$("p").toggle();
});
Functii jQuery Slide - slideDown, slideUp, slideToggle
Metodele jQuery slide schimba in mod gradual inaltimea elementelor selectate.
jQuery are urmatoarele metode slide:
$(selector).slideDown(viteza,callback)
$(selector).slideUp(viteza,callback)
$(selector).slideToggle(viteza,callback)
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():
$(".panel").slideUp()
})
Exemplu slideToggle():
$(".panel").slideToggle();
});
Functii jQuery Fade - fadeIn, fadeOut, fadeTo
Metodele jQuery fade schimba in mod gradual opacitatea elementelor selectate.
jQuery are urmatoarele metode fade:
$(selector).fadeIn(viteza,callback)
$(selector).fadeOut(viteza,callback)
$(selector).fadeTo(viteza,opacity,callback)
Parametrul opacity din metoda fadeTo() permite decolorarea la un anumit nivel de opacitate.
termina.
Exemplu fadeTo():
$("div").fadeTo("slow",0.25);
});
Exemplu fadeOut():
$("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:
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
});
});
</script>
Exemplul 2:
$("div").animate({left:"100px"},"slow");
$("div").animate({fontSize:"3em"},"slow");
});
});
</script>
Elemente HTML sunt pozitionate static in mod implicit si nu pot fi mutate.
Pentru a face elementele mobile, setati proprietatea position a CSS la fixed, relative sau absolute.
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()
$(selector).fadeIn()
$(selector).fadeOut()
$(selector).fadeTo()
$(selector).animate()
Schimba intre slide-up si slide-down ale

Mareste opacitatea elementelor selectate
Scade opacitatea elementelor selectate
Modifica opacitatea elementelor selectate
la un anumit nivel
Aplica o animatie personalizata
Metodele jQuery Hide si Show

Cu jQuery, puteti ascunde sau afisa Elemente HTML folsind metodele hide() si show().
Exemplu:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Atat hide() cat si show() pot prelua doi parametri: viteza si callback.
Sintaxa:
$(selector).show(viteza,callback)
Parametrul viteza specifica viteza de ascundere/afisare, si poate lua urmatoarele valori: "slow",
"fast", "normal", sau milisecunde.
Exemplu:
$("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.
Functia 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)
Exemplu:
$("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.
jQuery are urmatoarele metode slide:
$(selector).slideDown(viteza,callback)
$(selector).slideUp(viteza,callback)
$(selector).slideToggle(viteza,callback)
termina.
Exemplu slideDown():
$(".panel").slideDown();
});
Exemplu slideUp():
$(".panel").slideUp()
})
Exemplu slideToggle():
$(".panel").slideToggle();
});
Functii jQuery Fade - fadeIn, fadeOut, fadeTo

Metodele jQuery fade modifica in mod gradula opacitatea elementelor selectate.
jQuery are urmatoarele metode fade:
$(selector).fadeIn(viteza,callback)
$(selector).fadeOut(viteza,callback)
$(selector).fadeTo(viteza,opacity,callback)
Parametrul opacity din metoda fadeTo() permite decolorarea la o anumita opacitate.
termina.
Exemplu fadeTo():
$("div").fadeTo("slow",0.25);
});
Exemplu fadeOut():
$("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>
Exemplul 2:
$("div").animate({left:"100px"},"slow");
$("div").animate({fontSize:"3em"},"slow");
});
});
</script>
Elemente HTML sunt pozitionate static in mod implicit si nu pot fi mutate.
Pentru a face elementele mobile, setati proprietatea position a CSS la fixed, relative sau absolute.
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)
$(selector).slideDown()
Slide-down (afiseaza) elementele
selectate
$(selector).slideUp()
Slide-up (ascunde) elementele selectate
$(selector).slideToggle()
Schimba intre slide-up si slide-down ale
$(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
O functie callback este executata dupa ce efectul curent de animatie este 100% terminat.
Functii jQuery de Callback
Codul JavaScript este executat linie cu linie. Dar, la animatii, urmatoarea linie de cod poate fi
executata chiar daca animatia nu este finalizata. Aceasta poate crea erori.
Pentru a preveni aceasta, puteti crea o functie callback.
O functie callback este executata dupa ce efectul curent de animatie este finalizat.
Sintaxa:
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");
Modificarea Continutului HTML
jQuery contine metode (functii) puternice pentru modificarea si manipularea Elementelor HTML si
a atributelor.
$(selector).html(content)
Metoda html() schimba continutul (innerHTML) Elementelor HTML selectate.
Exemplu:
$("p").html("W3Schools");
Adaugarea de continut HTML
$(selector).append(content)
Metoda append() adauga la sfarsit continut Elementului HTML curent.
$(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 jQuery css()

jQuery are o metoda importants pentru manipulare CSS: css()
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
Obtine valoarea proprietatii CSS
Folositi css(nume) pentru a obtine valoarea proprietatii CSS a PRIMULUI element corespondent.
Exemplu:
$(this).css("background-color");
Stabilire Proprietate si Valoare CSS
Utilizati css(nume,valoare) pentru a stabili proprietatea CSS pentru TOATE elementele
corespondente.
Exemplu:
$("p").css("background-color","yellow");
Stabilire Multiple Perechi Proprietate/Valoare CSS

Uutilizati css({properties}) pentru a stabili un sau mai multe perechi proprietat/valoare CSS pentru
elementele selectate.
Exemplu:
$("p").css({"background-color":"yellow","font-size":"200%"});
Metodele jQuery height() si width()

jQuery are doua metode importante pentru manipularea dimensiunii.
height()
width()
Metoda height() stabileste inaltimea tuturor elementelor corespunzatoare.
Exemplu:
$("#div1").height("200px");
Metoda width() stabileste latimea tuturor elementelor corespunzatoare.
Exemplu:
$("#div2").width("300px");
Metodele jQuery CSS din aceasta Pagina:

Proprietati CSS
$(selector).css(nume)
$(selector).css(nume,valoare)
$(selector).css({properties})
$(selector).height(valoare)
$(selector).width(valoare)
Descriere
Obtine valoarea proprietatii de stila
primului element corespunzator
Stabileste valoarea unei singure
proprietati pentru elementele
corespunzatoare
Stabileste multiple proprietati pentru
elementele corespunzatoare
Stabileste inaltimea elementelor
corespunzatoare
Stabileste latimea elementelor
corespunzatoare
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)
Utilizati parametrul selector pentru a defini elementele HTML ce doriti sa le modificati, si
parametrul url pentru a specifica o adresa web a datelor.
Numai cand trebuie sa trimiteti date la server aveti nevoie de parametrul data. Numai daca aveti
nevoie sa accesati o functie la terminare veti folosi parametrul callback.
Functii AJAX de nivel inferior
$.ajax(options) este sintaxa pentru functia AJAX de nivel inferior.
$.ajax ofera mai multe functionalitati decat functii de nivel inalt ca load, get, si post, dar este si mai
dificil de folosit.
Parametrul options ia perechi nume|valoare defineste adresa url, parole, tipuri de date, filtre, seturi
de caractere, functii de timeout si erori.
Metodele AJAX in jQuery din aceasta pagina:
Cerere
Descriere
$(selector).load(url,data,callback) Incarca datele in elementele selectate
$.ajax(options)
Incarca datele intr-un obiect XMLHttpRequest

Jquery Romana

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Jquery Romana

Încărcat de

Drepturi de autor:

Formate disponibile

Tutorial jQuery

jQuery este o librarie JavaScript.

Observati ca tagul <script> trebuie sa fie in sectiunea <head> a paginii.

Exemple cu Sintaxa jQuery

Functii jQuery de Evenimente

Schimba intre slide-up si slide-down ale

Metodele jQuery Hide si Show

Functii jQuery Slide - slideDown, slideUp, slideToggle

Functii jQuery Fade - fadeIn, fadeOut, fadeTo

Metodele jQuery de Manipulare HTML din aceasta Pagina:

Metoda jQuery css()

Stabilire Multiple Perechi Proprietate/Valoare CSS

Metodele jQuery height() si width()

Metodele jQuery CSS din aceasta Pagina:

S-ar putea să vă placă și