Curs jQuery

jQuery – Elemente de baza 1

jQuery este o librarie de functii JavaScript creata de John Resig.jQuery e centrat pe lucrul si manipularea elementelor HTML si CSS in pagina web. Are de asemenea utilitati Ajax pentru transmitere de date la server, functii pt. lucru cu obiecte, array si evenimente.Aproape toate scripturile facute cu jQuery functioneaza la fel in principalele navigatoare web....

Citește Mai Mult

jQuery – stiluri CSS 2

Dupa ce au fost selectate elementele HTML cu jQuery, se pot manipula proprietatile lor CSS pentru a crea diferite efecte. Citire proprietati CSS Proprietatile CSS ale unui element HTML se pot citi /prelua cu urmatoarea sintaxa: $(‘selector’).css(‘proprietate_css’); – selector – reprezinta un element HTML.– proprietate_css – proprietatea CSS ce va fi citita. Codul din urmatorul...

Citește Mai Mult

Efecte jQuery simple de ascundere si afisare 3

In acest tutorial sunt prezentate cateva efecte simple ce pot fi create cu jQuery. Ascundere Elemente Pentru a ascunde un element in pagina, se poate folosi metoda hide().Sintaxa $(‘selector’).hide(‘durata’); – „durata” – (optional) determina viteza animatiei de ascundere. Poate fi unul din sirurile „fast” si „slow”, sau un numar care indica durata in milisecunde. Exemplu:...

Citește Mai Mult

Adauga, Sterge elemente HTML cu jQuery 4

Cu jQuery se pot usor adauga si sterge elemente HTML in pagina Web, precum si modificarea continutului lor. Adaugare Elemente noi Sunt doua modalitati de a adauga noi elemente HTML cu jQuery, se poate crea elementul si apoi sa fie inclus in pagina intr-o locatie specificata, sau se poate adauga direct codul elementului. 1. Creare...

Citește Mai Mult

Obtine Atributul (ID, Class, Name, Title, Src) cu jQuery 5

Acest tutorial arata cum se obtine valoarea atributului unui element cu jQuery, orice atribut adaugat in acel tag HTML (id, class, name, title, src, etc.).– Pentru a obtine valoarea unui atribut cu jQuery, se foloseste functia attr().Sintaxa: $(element).attr(‘nume_atribut’)     – Daca „nume_atribut” nu exista in „element”, functia attr() va returna „undefined”. Pentru a face...

Citește Mai Mult

Adauga, Sterge, Modifica Atribute cu jQuery 6

In acest tutorial puteti invata cum se Adauga, Modifica si Sterge Atribute (precum id, class, href, disabled, etc.) la elemente HTML folosind jQuery.Toate aceste actiuni pot fi efectuate cu metodele jQuery attr() si removeAttr(). Adaugare atribut Pentru a adauga un atribut la un element /sau elemente HTML (cum sunt id, class, href, selected, etc.), se...

Citește Mai Mult

jQuery fadeIn si fadeOut 7

Un alt mod de a afisa si ascunde elemente in pagina este cu fadeIn si fadeOut, care mereu creaza un efect animat. fadeIn() si fadeOut() Aceste doua metode jQuery au urmatoarele sintaxe: $('selector').fadeIn('durata'); $('selector').fadeOut('durata'); – fadeIn() – afiseaza elementele selectate, marind treptat valoarea opacitatii de la 0 la 100%.– fadeOut() – ascunde elementele selectate, facandu-le...

Citește Mai Mult

jQuery slideDown si SlideUp 8

Exista mai multe moduri a a afisa si ascunde un element in pagina web cu jQuery, una dintre aceste metode este printr-o miscare animata de alunecare (glisare). slideDown() si SlideUp() Metoda slideDown() afiseaza elementele selectate printr-un efect de animare a inaltimii lor.Metoda slideUp() ascunde elementele selectate, printr-un efect de glisare.Aceste doua metode jQuery se folosesc...

Citește Mai Mult

jQuery – Animare proprietati CSS 9

Cu jQuery se pot crea efecte de animatie la elementele din pagina prin modificarea proprietatilor CSS, folosind o metoda jQuery denumita animate. Metoda animate Metoda animate() permite crearea unui efect de animatie la oricare proprietate CSS cu valoare numerica (dimensiuni, distanta, marime font).animate() se poate folosi cu aceasta sintaxa: animate( { proprietate1: valoare, proprietate2: valoare,...

Citește Mai Mult

jQuery background position 10

Acest tutorial arata cum se poate schimba, anima si obtine pozitia unei imagini de fundal (background) din elementele HTML, cu jQuery.Daca doriti pur si simplu sa setati sau sa modificati pozitia imaginii de fundal, folositi aceasta sintaxa: $(selector).css({ backgroundPosition: ‘Xval Yval’ }) – Xval – reprezinta valoarea pentru pozitia orizontala.– Yval – reprezinta valoarea pentru...

Citește Mai Mult

jQuery – legare mai multe efecte 11

Inlantuire Actiuni Cu jQuery se pot adauga si executa mai multe comenzi la un element, una dupa alta. Acest lucru e numit „inlantuire„.Pentru a lega un efect (sau actiune), pur si simplu adaugati-l dupa ultimul, separat prin punct (.).    De exemplu, se ascunde primul tag <h3>, apoi e afisat cu slideDown(), si iar dispare...

Citește Mai Mult

jQuery Ajax – metoda load() 12

AJAX e acronimul de la Asynchronous JavaScript And XML, e o tehnica pentru creare dinamica si rapida a paginilor web, sau parti din continutul lor.Ajax permite trimiterea de date la server si prelucrarea raspunsului returnat de server fara reincarcarea paginii sau deschiderea altei pagini.jQuery are mai multe metode (functii) pentru AJAX. In acest tutorial e...

Citește Mai Mult

jQuery metoda ajax() 13

Metoda ajax() se foloseste pentru a efectua o cerere AJAX (asynchronous HTTP) la server.Toate functiile Ajax jQuery: load(), get(), post(); folosesc metoda ajax(). Aceasta contine mai multe optiuni de configurare si prelucrare a datelor, iar sintaxa ei este mai complexa.   Sintaxa: $.ajax({ nume:valoare, nume:valoare, ...}) – Parametri reprezinta una sau mai multe perechi nume:valoare,...

Citește Mai Mult

jQuery get() si post() 14

jQuery get() si post() sunt aplicatii ale metodei ajax(). Functiile get() si post() $.get() si $.post() sunt functii mai simple pentru jQuery Ajax, ale metodei principale $.ajax() ; si sunt in general folosite pentru operatii simple de trimitere si primire date de la server.Aceste doua functii sunt aproape identice, singura diferenta fiint tipul cererii HTTP:...

Citește Mai Mult

jQuery – prelucrare date XML 15

XML (Extensible Markup Language) e un format special de trimitere si stocare date in fisiere cu extensia .xml, cu o sintaxa bazata pe tag-uri. Documentele XML sunt de obicei folosite in aplicatii web de accesare date de la un server la altul.Acest tutorial arata cum puteti prelua date dintr-un fisier XML si sa le afisati...

Citește Mai Mult

Validare si trimitere formular 16

Validare Formular Inainte de a trimite datele dintr-un formular la un script de pe server, este indicata efectuarea unor minime verificari a campurilor din formular, pe partea de client, precum numarul de caractere din casetele pt. text si forma corecta a adresei de e-mail. In exemplu de mai jos se foloseste jQuery pentru a valida...

Citește Mai Mult

jQuery UI draggable – Muta /Trage elemente 17

Pentru a crea usor efectul de tragere cu mouse-ul a elementelor din pagina cu jQuery, se foloseste jQuery UI, o librarie de functii aditionale la libraria de baza jQuery.jQuery UI e ca un plugin cu mai multe functii pentru crearea de efecte speciale cu jQuery. Deci, trebuie sa includeti in pagina web ambele fisiere „.js”:...

Citește Mai Mult

Drag si Drop cu jQuery UI 18

Drag si Drop este un efect prin care elementele pot fi mutate /trase cu mouse-ul si lasate intr-un loc special in pagina web.Pentru a crea efecte drag & drop cu jQuery, trebuie sa folositi si jQuery UI, o librarie de functii aditionale la libraria de baza jQuery.jQuery UI e ca un plugin cu mai multe...

Citește Mai Mult

Schimba fisierul CSS cu jQuery 19

Acest tutorial arata cum puteti schimba fisierul CSS inclus in pagina dv. web, folosind jQuery.De exemplu, daca avem 2 fisiere CSS, „style.css” si „style2.css”, putem defini un cod jQuery ca sa alterneze fisierul CSS inclus in pagina, intre aceste 2 fisiere, cand utilizatorul apasa click pe un anumit element. Iata un exemplu, o pagina simpla...

Citește Mai Mult

Inregistrare evenimente la elemente incluse cu jQuery ajax 20

Pentru a inregistra cu jQuery un eveniment JavaScript la elemente HTML, se foloseste aceasta sintaxa: $(‘element’).nume_eveniment(function() {   // cod ce va fi executat cand „nume_eveniment” e declansat }) De exemplu, urmatorul cod afiseaza o fereastra alert cand se apasa clic pe un link cu class=”cls”. <script type=”text/javascript”><!– $(document).ready(function() {   // la clic pe...

Citește Mai Mult

jQuery parent, children si nth-child() 21

Acest tutorial arata cum se lucreaza cu legaturile parinte (parent) si copii (children) in jQuery.– parent se refera la elementul parinte in care este inclus direct alt element, denumit copil (child).De exemplu, in acest cod HTML: <div id=”parent_tag”>  <p id=”child_tag”>Text oarecare…</p>  <span>Alt element copil in „parent_tag”.</span> </div> – DIV-ul („parent_tag”) este elementul parinte pentru paragraf...

Citește Mai Mult