JQuery

Obiective

• Simplifică interacțiunea cu modelul de document
• Permite mecanisme de navigare mai flexibile
• Cod mai ușor de citit printr-o interfață chainable
• Manipulare ușoară a evenimentelor

Chaining

• Metodele JQuery se pot apela în serie
• Fiecare metodă returnează un wrapped set
• Wrapped sets sunt iterabile și au toate metodele JQuery

​

Căutarea într-un context

• metodele JQuery se pot aplica întregului document sau unui subset
• un subset din document poate să fie o componentă sau un set rezultat în urma executării unei metode de selecție JQuery

​

Avantaje JQuery

• Selectorii css nu au o modalitate de a accesa părintele
• Părți de prezentare care se execută în momentul în care browser-ul ajunge la ele
• Mecanisme complexe de traversare
• Comunicare simplificată cu resurse remote

Încărcarea bibliotecii

• Cel mai sigur, codul JS se va rula la încărcarea DOM (pe document.ready)
• Funcțiile JQuery sunt apelabile și pe baza unui alias ( $ )

Forma generală

• Un șir de operații de selecție și de modificare
• Unele operații modifică wrapped set-ul pe care se lucrează
• Cea mai simplă formă
• $(selector).action()

​

Accesul la obiecte DOM

• addClass() - adaugă o clasă CSS la un element
• $( "p" ).addClass( "myClass yourClass" );
• removeClass() - elimină o clasă CSS a unui element
• $( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Accesul la obiecte DOM

• hasClass() - determină dacă o clasă este prezentă
• toggleClass() - adaugă sau șterge una sau mai multe clase de pe elementele selectate
• css() - returnează valoarea proprietății css specificate, iar dacă există un al doilea parametru stabilește valoare

Accesul la obiecte DOM

• html() - fără parametru returnează conținutul HTML al primului nod dintre nodurile selectate
• $( "div.demo-container" ).html();
• eventualul parametru este șirul cu care va fi înlocuit conținutul tuturor nodurilor selectate
• $( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );

Accesul la obiecte DOM

• attr() - fără parametru, returnează valoarea atributului pentru primul element selectat
• $( "input" ).attr( "disabled");
• cu parametru, stabilește valoarea atributului pentru toate elementele selectate
• $( "input" ).attr( "checked", true );
• remvoveAttr() - șterge proprietatea pentru elementele selectate

Accesul la obiecte DOM

• prop() - fără parametru, returnează valoarea proprietății pentru primul element selectat
• $( "input" ).prop( "disabled");
• cu parametru, stabilește valoarea proprietății pentru toate elementele selectate
• $( "input" ).prop( "checked", true );
• removeProp() - șterge proprietatea pentru elementele selectate

​

Accesul la controale input

• val() - returnează valoarea primului element selectat
• $( "#single" ).val( );
• cu parametru, stabilește valoarea tuturor elementelor selectate
• $( "#single" ).val( "Single2" );

Navigare

• each() - pentru fiecare element selectat, aplică funcția trimisă ca parametru
• add() - adaugă un nou set de elemente la setul anterior (care nu e modificat)
• andSet() - adaugă setul selectat anterior

Navigare

• andSet() - adaugă setul selectat anterior la setul curent
• children() - selectează copiii elemetului pe care este aplicat (elementele DOM)
• contents() - selectează copii elementului pe care este aplicat (toți copii inclusiv noduri text)

Navigare

• siblings() - toate elementele care sunt copii ai aceluiași părinte cu cel selectat
• next(), prev() - elementul care este sibling-ul imediat următor, respectiv imediat anterior
• nextAll(), prevAll() - toate elementele următoare, respectiv anterioare

Navigare

• filter() - selectează doar elementele care ar fi returnate de selectorul transmis dintre elementele anterioare
• dacă parametrul este un predicat, selectează doar elementele pentru care predicatul este adevărat
• not() - elimină dintre elementele selectate elementele specificate de selectorul sau predicatul trimis ca parametru

​

Navigare

• parent() - parintele elementului selectat
• parents() - toți ascendenții elementului selectat
• parentsUntil() - toți ascendenții elementului selectat până la găsirea unui element de tipul specificat

Navigare

• slice() - echivalentul lui array slice, selectează doar elementele dintre cei 2 indici
• map() - echivalentul lui array map, produce un set care conține rezultatul aplicării funcției map asupra elementelor selectate

Navigare

• find() - caută prin descendenții elemetelor selectate după un nou selector (asemănător cu un children cu o condiție)
• end() - reversează modificările făcute de ultima operație de filtrare asupra setului de obiecte selectate și returnează setul anterior

Evenimente

• o serie de metode pentru majoritatea evenimentelor suportate de tag-urile HTML
• de exemplu click() primește ca parametru un handler pentru evenimentul mouse click
• permit asocierea facilă a unor handler-e la un set de elemente selectabil
• http://api.jquery.com/category/events/

Evenimente

• on() - permite specificarea unui handler pentru mai multe evenimente în același timp
• metodele click, focus etc sunt de fapt metode wrapper pentru on
• concepte legate de evenimente: propagare, evenimente default, current target

Evenimente

• se pot și declanșa evenimente manual creînd un element cu Event()
• evenimentul se poate declanșa cu metoda trigger()
• se pot de asemenea trata evenimente care țin de browser, nu de document, cu error(), resize() și scroll()

Adăugarea de elemente noi

• Metode care permit adăugarea dinamică de noi elemente la DOM
• append() - inserează parametrul la sfârșitul colecției de copii a elementelor selectate
• prepend() - inserează parametrul la începutul colecției de copii a elementelor selectate

Adăugarea de elemente noi

• before() - inserează conținutul înaintea elementelor selectate (în părinte)
• after() - inserează conținutul după elementelor selectate (în părinte)
• appendTo()/prependTo() - inserează toate elementele selectate în elementul specificat ca parametru

Adăugarea de elemente noi

• wrap() - inserează în jurul fiecărui element selectat
• wrapAll() - inserează în jurul tuturor elementelor selectate
• unwrap() - elimină părinții elementelor selectate
• wrapInner() - inserează în jurul conținutului elementelor selectate

Ștergerea de elemente

• remove() - șterge elementele selectate din DOM
• detach() - detașează elementele selectate de la DOM (le șterge din DOM, dar pot fi reinserate ulterior)
• empty() - șterge toate nodurile copil ale elementelor selectate (inclusiv noduri text)

Accesul la un serviciu remote

• O serie de metode care ascund complexitatea(și lipsa de omogenitate) a mecanismului AJAX
• ajax()
• metode simplificate
• get()
• post()

Alte metode

• serialize() - metodă aplicabilă unui form sau unui set de componente de intrare pentru a obține un string URL encoded cu valorile câmpurilor
• serializeArray() - metodă similară cu serialze care produce un array de perechi cheie valoare (fiecare este un obiect)

Efecte

• hide() - ascunde elementele selectate
• show() - afișează elementele selectate
• toggle() - schimbă starea elementelor selectate între afișat și ascuns

Efecte

• fadeOut(), fadeIn(), fadeTo() - aplică efectul fade componentelor selectate
• slideUp(), slideDown(),slideToggle() - aplică efectul slide componentelor selectate
• animate() - aplică o animație complexă (cu mai multe componente e.g.poziție, mărime) componentelor selectate
• stop() - oprește animația curentă