1 / 13

Alexandra- Maria Apostol 1406A

Alexandra- Maria Apostol 1406A. j Query /UI. 1) Ce este ? jQuery este o librărie JavaScript concepută pentru a ușura și îmbunătăți procese precum : Traversarea si manipularea arborelui DOM   folosind propriul motor de selecții open source Sizzle

sal
Télécharger la présentation

Alexandra- Maria Apostol 1406A

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Alexandra- Maria Apostol 1406A

  2. jQuery/UI 1)Ceeste? jQueryeste o librărie JavaScript concepută pentrua ușura și îmbunătăți procese precum: • Traversareasimanipulareaarborelui DOM  folosindpropriul motor de selecții open source Sizzle • Inregistrareașimodificareaevenimentelor din browser • Manipulareaelementelor CSS • Managementulefectelorșianimațiilor, al cererilor tip AJAX si al extensiilor( jQuery UI) Biblioteca a fost lansată in 2006de către John Resig, respectandfilozofia“Unobtrusive JavaScript“.

  3. jQuery/UI 2) Avantaje • Dimensiuneredusa - aproximativ 20KB( in forma comprimata) • Rapid, usor de folosit • Compatibil cu orice browser • Imbunatatestevizibilnumarul de linii de cod scrisedatoritaselectorilorsimecanismelor de manipulare a arborelui DOM • Volumul mare de articolesitutoriale care au fostscrisepentruaceastalibrarie • Usurinta cu care AJAX poatefifolositsisuportulpentru JSON • Extensibilitatea - avantajul jQuery UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea bibliotecii principale, minimizând riscul de incomptibilitate. • Librariaesteutilizata de companiisiproiecteinternationaleimportante cum arfi : Google, WordPress, Mozilla, Dell, Wikipedia etc.

  4. jQuery/UI 3)FunctiilejQuery • jQuerysi CSS • .CSS() $('p#' + id).css({ 'color': 'Blue', 'background-color': 'orange' }); • .ADDCLASS() si.TOGGLECLASS() $('p#'+id ).addClass('redText'); $( "p" ).click(function() { $( this ).toggleClass( "highlight" ); });

  5. jQuery/UI • Animatiisiefecte • .ANIMATE() $('#' + id).html('This text is bigger than before.').animate({ fontSize: '30px' }, 1500); • SETTIMEOUT() siCLEARTIMEOUT() $('#' + id).html('This text will dissapear after 3 seconds.'); timeout = setTimeout(function () { $('#' + id).fadeOut(); }, 3000); • .SLIDETOGGLE() and .FADETOGGLE() $('#' + id + ' .readmore').slideToggle('slow'); • .DELAY() $('#' + id).hide().fadeIn('slow').delay(1500).fadeOut('slow');

  6. jQuery/UI • jQuerysimanipulareaarborelui DOM • .CLONE() $( ".hello" ).clone().appendTo( ".goodbye" ); • .HTML(), .TEXT() si.EMPTY() vardemobox = $('#' + id); demobox.empty(); demobox.append(demobox.prev().html() + '<br/>'); demobox.append(demobox.prev().text() + '<br/>'); • .APPEND(), PREPEND(), .AFTER() AND .BEFORE() $( "#"+ id ).append( "<p>Test</p>" );

  7. jQuery/UI • AJAX • $.AJAX() varformData = {name:"ravi",age:"31"}; //Array $.ajax({ url : "AJAX_POST_URL",    type: "POST",     data : formData,     success: function(data, textStatus, jqXHR)     {         //data - response from server     },     error: function (jqXHR, textStatus, errorThrown)     {     } });

  8. jQuery/UI • .LOAD() $('#' + id).load('http://coding.smashingmagazine.com #footer'); • JQuerysievenimentele • .BIND si .UNBIND $( "#foo" ).bind( "click", function() { alert( "User clicked on 'foo.'" ); }); • .LIVE(), .ON() si.OFF() $( "a" ).live( "click", function( event ) { event.preventDefault(); });

  9. jQuery/UI • .DELEGATE() $( document ).delegate( "a.offsite", "click", function() { alert( "Goodbye!" ); }); • .PREVENTDEFAULT() $('#' + id + ' a').live('click', function (e) { e.preventDefault(); $('#' + id).html('Prevented going to http://www.smashingmagazine.com and displayed this message instead.'); });

  10. jQuery/UI • Gasirea, accesareasifiltrarearezultatelor • $.EACH() si.EACH() • $.DATA(), .DATA(), $.HASDATA() si$.REMOVEDATA() • .MATCH(), .TEST() si:CONTAINS() • .FIND() • .SLICE() • .PREV() siNEXT() • $.EXTEND() • .SERIALIZE() AND .SERIALIZEARRAY()

  11. jQueryUI Plugin-urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery. Arhitectura sa permite programatorilor să dezvolte subaplicații bazate în biblioteca principală care extind funcțiile de bază jQuery cu funcții specifice plugin-ului. În acest fel biblioteca principală poate ocupa foarte puțin spațiu, iar extensiile necesare în anumite pagini web pot fi încarcate la cerere, doar când este nevoie de ele. Există un set de extensii principal numit jQuery UI( jQuery User Interface) . jQuery UI ofera un set de extensii pentru interactivitate de bază, efecte mai complexe decât cele din biblioteca de bază și teme de culori. Exemplu: http://jsfiddle.net/rniemeyer/Rn9tg/

  12. jQuery/UI Bibliografie • http://api.jquery.com/ • http://coding.smashingmagazine.com/2012/05/31/50-jquery-function-demos-for-aspiring-web-developers/ • http://ro.wikipedia.org/wiki/JQuery • http://jqueryui.com/

  13. GATA!!

More Related