Jquery a technical overview

806 views

Published on

A formation i give at innovagency at 2 years ago when Jquery was a child.
But it seems it wstill a great conceptual introdution to the technology.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
806
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery a technical overview

  1. 1. Introduction<br />Jquery a Technical Overview<br />Abril-2009, Alexandre Marreiros<br />
  2. 2. Agenda<br />No agenda<br />Sinta-se a vontade para interromper<br />Pergunte<br />Comente<br />Todas as perguntas são validas.<br />
  3. 3. Javascript Libraries/Framework<br />Porquê do uso?<br />Visão da página html como um conjunto sendo um conjunto de objectos; em deterimento de navegação pelo DOM.<br />CrossBrowsing styling, este tipo de plataformas procura dar suporte a aplicação de estilos de igual modo em qualquer browser;<br />Focus na interacçaõ com o utilizador;<br />Facilitam a execução de pedidos assincronos.<br />
  4. 4. DOM (Document Object Model)<br />É uma interpretação cross plataform e relacional de um documento. Permite-nos olhar um qualquer documento que o suporte como um conjunto de elementos relacionados entre sí e com as suas próprias especificidades.<br />
  5. 5. A kind off a Object<br />Ao utilizar o Dom como forma de interpretação de um documento, deixamos de ver o html como um conjunto de tags para ter uma visão de um conjunto de elementos.<br />Cada elemento tem a sua forma de relacionamento com os restantes assim como os seus próprios atributos.<br />Cada elemento é assim interpretado como um objecto…<br />
  6. 6. A object vision off the Document<br />Permite isolar cada um dos elementos;<br />Entende cada elemento como um conjunto de atributos propriedades e relações com outros elementos;<br />Permite uma abstração do todo e aconcentração apenas no atomo;<br />Etc…<br />
  7. 7. JQuery<br /> “Is a new kind of JavaScript Library.<br />jQuery is a fast and concise JavaScript<br />Library that simplifies HTML document<br />traversing, event handling, animating, and<br />Ajax interactions for rapid web development.<br />jQuery is designed to change the way that<br />you write JavaScript.<br />Lightweight Footprint ,CSS3 Compliant,<br />Cross-browser” – Jquery.com<br />
  8. 8. Jquery II<br />Preparado com um conjunto de animações,<br />efeitos e widgets.<br />Basics: show(), hide(), toggle()<br />Slide: slideUp (), slideDown()<br />Fading: fadeIn(), fadeOut()<br />Custom<br />A maior parte das animações permite<br />estabelecer a velocidade e até callbacks<br />
  9. 9. Jquery Foundation<br />Anonymous methods<br />Factory Method<br />Selectors<br />
  10. 10. JQuery Foundation II<br /> Anonymous methods<br />Métodos anonimos são métodos sem nome que são declarados em runtime <br />Permitemmaiorlegibilidadedocodigo<br />Naosobrecarregam o engine do browser pois o código de um método anonimo só é interpretado no acto de execução<br /> Em JQuery:<br /> $( function(){ alert( "I'm anonymous!" ); } );<br />
  11. 11. jQuery Foundation III<br />Factory Method<br />$() nomenculaturajQuery() factory method <br />$( function ) – executa a funçãoapóstodososobjectos DOM teremsidocarregados<br />$( selector ) – retornaumacoleção de elementosquetenhamcomoatributo o selector<br />$( html ) – retornatodososelementos html queforamcriadosapós o carregamentodapágina.<br />Uma coleção de elementos é designada é um stack.<br />
  12. 12. jQuery Foundation IV<br />Selectors<br />Cssslectors<br />XpathSelectors<br />CustomSelectors<br />
  13. 13. jQueryFoundation V<br />Css Selectors $(“Selectors”)<br />Suportatodososselectoresdefinidosnasespecificações de css<br />da w3c e permiteatravés deles obterelementos e manipula-los…<br />Querpelosnomes das classes, querpelalocalização, querpelo<br />seucontextorelacional.<br />$( "#header" ) – retornaumacoleção com todososelementosquetenham o id header;<br />$( "div.note" ) – retornatodososdivsquecontenham a class note associada;<br />$( "p" ) – retornaumacoleção com todososelementos p contidos no documento;<br />$( "ul.listli" ) – combinação das duasanteriores;<br />$( "a[ rel = 'home' ]" ) – coleção de links cujoatributorel é "home“<br />$( “#selected-plays > li" ) – retornaumacoleção de todososelementoscujo id é selected-plays e que tem um filho do tipo li.<br />Etc..<br />Helper functions<br />getParentWithClass() <br />getParentWithTagName() <br />Etc…<br />
  14. 14. jQueryFoundation VI<br />Xpath selector<br />XmlPathlanguage, permite iterar por diferentes elementos de um documento XML, e interpretar cada um deles como um objecto.<br />$( ‘a[@title]’ ) – retorna o valor do atributo title de todososelementos a;<br />$( ‘div[ul]’ ) – retornaumacoleção com todososelementos div do documentoque tem um elementoul;<br />A selecçãoutilizandoatributospermiteutilizarumasintaxeproxima das regular expressions permitndoinsturções do tipo:<br />$(‘a[@href^=“mail to”]’) – retornatodososelementos do tipo a quecontenham um hrefcomeçadopor mail to;<br />$(‘a[@href$=“pdf”]’) – retornatodososelementos do tipo a quecontenham um hrefterminadoporpdf<br />
  15. 15. jQueryFoundation VII <br />CustomSelectors<br />A todos os selectores definidos o jQuery acrescentam ainda o seu conjunto de selectores. Particularmente uteis para a manipulação de tabelas e outros elementos complexos. <br />Em elementos contentores o são disponibilizadas intruções do tipo:<br />$(‘tr.odd’) – obtem todos os tr impares<br />$(‘tr.even’) – obtem todos os tr pares<br />$(‘div:nth-child(1)’) – obrtem todos os divs que são o primeiro filho do contentor onde se encontram.<br />
  16. 16. Rules off $() <br />$() returns a jQuery collection containing 0+ elements <br />Calls on an empty collection don't error <br />When accessing values, usually only the first element is used <br />When mutating values, usually all elements in collection are updated <br />When mutating values, the jQuery object is usually returned - this allows for method chaining <br />$().addClass( "one" ).addClass( "two" ).removeClass( "one" ) <br />NOTE: Method chaining is "cool", but can hurt readability - don't overuse<br />
  17. 17. MethodsoverjQueryObject<br />$().attr( name ) - Gets value of given attribute for first element<br />$().attr( name, value | {options} ) - Sets values for all elements<br />$().addClass() - Adds CSS class to all elements<br />$().removeClass() - Removes CSS class from all elements<br />$().css( name ) - Gets CSS value of given property for first element<br />$().css( name, value | {options} ) - Sets CSS properties for all elements<br />$().html() - Gets the inner HTML of the first element<br />$().html( html ) - Sets the inner HTML of all elements<br />$().text() - Gets the combined text of all elements<br />$().text( text ) - Sets the text value of all elements<br />$().val() - Gets the value attribute of first element<br />$().val( val ) - Sets the value attribute of all elements<br />$().append( html | element | jQuery ) - adds given content to the selected content <br />$().appendTo( selector ) - adds given set to the selected set <br />$().prepend() / $().prependTo() - Same as above, but prepends<br />$().before( content ) - Inserts the given content before the selected elements <br />$().after( content ) - Inserts the given content after the selected elements <br />$().remove() - Removes selected elements from DOM <br />$().empty() - Removes all children from given set of elements <br />$().clone() - Creates a copy of the given set <br />$().filter( selectors | function ) - Returns a sub-set of collection matching filter <br />$().not( selectors ) - Returns a sub-set of collection not matching filter <br />Nota: A filtragem de elementosnão é destrutivadacoleção<br />
  18. 18. MethodsoverjQueryObjectin Dom<br />$().find( selectors ) - Gets the elements in the context of the given collection <br />$().children( [selectors] ) - Gets the set of children of given elements <br />$().parent( [selectors] ) - Gets the parent of each element in the given set <br />$().prev( [selectors] ) - Gets the previous element of each element in given set <br />$().prevAll( [selectors] ) - Gets all the previous elements of each element in given set <br />$().next( [selectors] ) - Gets the next element of each element in given set <br />$().nextAll( [selectors] ) - Gets the all the next elements of each element in given set <br />
  19. 19. IteratingoverjQueryobject<br />Quando o stack é mesmoumacoleção<br />$().each( function( intIndex, objElement ) ) – identicoaoforeach de muitaslinguagens<br />É umafunção de contexto a iteração é feitasobre o elemento DOM indexado;<br />
  20. 20. Events<br />Youcanbind as manyhandlers to a givenevent<br />$().bind( eventType, function( objEvent ){} ) - Bindgivenfunction to giveneventtypeongivencollection<br />Manybuilt-inshorthands: $().bind( "click", fn ) == $().click( fn )<br />$().trigger( eventType ) - Manuallytriggereventhandlers<br />Manybuilt-inshorthands: $().trigger( "click" ) == $().click()<br />return( false ) - Ineventhandler, preventsdefaultbehaviorandeventbubbling<br />objEvent.preventDefault() - Ineventhandler, preventsdefaultevent (allowsbubbling) <br />objEvent.stopPropagation() - Ineventhandler, preventsbubbling (allowsdefaultbehavior) <br />NEW: live() / die() - Automaticallywireseventsbasedonselectors<br />
  21. 21. ExtendingjQuery<br />Extender a bibliotecajQueryestápensado a doisniveisatravés de pluginsou de novos selectors<br />Extender funções (extend $ object) <br />Extenmderfunções dos contentores(extend $.fn object) <br />Extender os selectors (extend $.expr[':'] object)<br />
  22. 22. Referencias <br />www.jquery.com – site oficial;<br />http://plugins.jquery.com – conjunto de plugins e exemplos<br />Learning Jquery, better design and web development with simple Javascript techniques, Jonathan Chaffer & Karl Swedberg – Conceitos base da biblioteca;<br />JQuery Reference Guide Jonathan Chaffer & Karl Swedberg – nutshel e referencia de cabeceira;<br />JQuery in action – exemplos práticos e aplicação.<br />

×