O documento apresenta uma introdução à biblioteca jQuery, descrevendo suas principais funcionalidades como simplificar a manipulação de elementos HTML, tratamento de eventos e interações assíncronas. Explica também como jQuery permite interpretar documentos como objetos e coleções de objetos, facilitando a seleção, filtragem e manipulação de elementos. Por fim, resume os principais métodos de jQuery para seleção, iteração, manipulação do DOM e tratamento de eventos.

1. Introduction Jquery a Technical Overview Abril-2009, Alexandre Marreiros

2. Agenda No agenda Sinta-se a vontade para interromper Pergunte Comente Todas as perguntas são validas.

3. Javascript Libraries/Framework Porquê do uso? Visão da página html como um conjunto sendo um conjunto de objectos; em deterimento de navegação pelo DOM. CrossBrowsing styling, este tipo de plataformas procura dar suporte a aplicação de estilos de igual modo em qualquer browser; Focus na interacçaõ com o utilizador; Facilitam a execução de pedidos assincronos.

4. DOM (Document Object Model) É 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.

5. A kind off a Object 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. Cada elemento tem a sua forma de relacionamento com os restantes assim como os seus próprios atributos. Cada elemento é assim interpretado como um objecto…

6. A object vision off the Document Permite isolar cada um dos elementos; Entende cada elemento como um conjunto de atributos propriedades e relações com outros elementos; Permite uma abstração do todo e aconcentração apenas no atomo; Etc…

7. JQuery “Is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Lightweight Footprint ,CSS3 Compliant, Cross-browser” – Jquery.com

8. Jquery II Preparado com um conjunto de animações, efeitos e widgets. Basics: show(), hide(), toggle() Slide: slideUp (), slideDown() Fading: fadeIn(), fadeOut() Custom A maior parte das animações permite estabelecer a velocidade e até callbacks

9. Jquery Foundation Anonymous methods Factory Method Selectors

10. JQuery Foundation II Anonymous methods Métodos anonimos são métodos sem nome que são declarados em runtime Permitemmaiorlegibilidadedocodigo Naosobrecarregam o engine do browser pois o código de um método anonimo só é interpretado no acto de execução Em JQuery: $( function(){ alert( "I'm anonymous!" ); } );

11. jQuery Foundation III Factory Method $() nomenculaturajQuery() factory method $( function ) – executa a funçãoapóstodososobjectos DOM teremsidocarregados $( selector ) – retornaumacoleção de elementosquetenhamcomoatributo o selector $( html ) – retornatodososelementos html queforamcriadosapós o carregamentodapágina. Uma coleção de elementos é designada é um stack.

12. jQuery Foundation IV Selectors Cssslectors XpathSelectors CustomSelectors

13. jQueryFoundation V Css Selectors $(“Selectors”) Suportatodososselectoresdefinidosnasespecificações de css da w3c e permiteatravés deles obterelementos e manipula-los… Querpelosnomes das classes, querpelalocalização, querpelo seucontextorelacional. $( "#header" ) – retornaumacoleção com todososelementosquetenham o id header; $( "div.note" ) – retornatodososdivsquecontenham a class note associada; $( "p" ) – retornaumacoleção com todososelementos p contidos no documento; $( "ul.listli" ) – combinação das duasanteriores; $( "a[ rel = 'home' ]" ) – coleção de links cujoatributorel é "home“ $( “#selected-plays > li" ) – retornaumacoleção de todososelementoscujo id é selected-plays e que tem um filho do tipo li. Etc.. Helper functions getParentWithClass() getParentWithTagName() Etc…

14. jQueryFoundation VI Xpath selector XmlPathlanguage, permite iterar por diferentes elementos de um documento XML, e interpretar cada um deles como um objecto. $( ‘a[@title]’ ) – retorna o valor do atributo title de todososelementos a; $( ‘div[ul]’ ) – retornaumacoleção com todososelementos div do documentoque tem um elementoul; A selecçãoutilizandoatributospermiteutilizarumasintaxeproxima das regular expressions permitndoinsturções do tipo: $(‘a[@href^=“mail to”]’) – retornatodososelementos do tipo a quecontenham um hrefcomeçadopor mail to; $(‘a[@href$=“pdf”]’) – retornatodososelementos do tipo a quecontenham um hrefterminadoporpdf

15. jQueryFoundation VII CustomSelectors 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. Em elementos contentores o são disponibilizadas intruções do tipo: $(‘tr.odd’) – obtem todos os tr impares $(‘tr.even’) – obtem todos os tr pares $(‘div:nth-child(1)’) – obrtem todos os divs que são o primeiro filho do contentor onde se encontram.

16. Rules off $() $() returns a jQuery collection containing 0+ elements Calls on an empty collection don't error When accessing values, usually only the first element is used When mutating values, usually all elements in collection are updated When mutating values, the jQuery object is usually returned - this allows for method chaining $().addClass( "one" ).addClass( "two" ).removeClass( "one" ) NOTE: Method chaining is "cool", but can hurt readability - don't overuse

17. MethodsoverjQueryObject $().attr( name ) - Gets value of given attribute for first element $().attr( name, value | {options} ) - Sets values for all elements $().addClass() - Adds CSS class to all elements $().removeClass() - Removes CSS class from all elements $().css( name ) - Gets CSS value of given property for first element $().css( name, value | {options} ) - Sets CSS properties for all elements $().html() - Gets the inner HTML of the first element $().html( html ) - Sets the inner HTML of all elements $().text() - Gets the combined text of all elements $().text( text ) - Sets the text value of all elements $().val() - Gets the value attribute of first element $().val( val ) - Sets the value attribute of all elements $().append( html | element | jQuery ) - adds given content to the selected content $().appendTo( selector ) - adds given set to the selected set $().prepend() / $().prependTo() - Same as above, but prepends $().before( content ) - Inserts the given content before the selected elements $().after( content ) - Inserts the given content after the selected elements $().remove() - Removes selected elements from DOM $().empty() - Removes all children from given set of elements $().clone() - Creates a copy of the given set $().filter( selectors | function ) - Returns a sub-set of collection matching filter $().not( selectors ) - Returns a sub-set of collection not matching filter Nota: A filtragem de elementosnão é destrutivadacoleção

18. MethodsoverjQueryObjectin Dom $().find( selectors ) - Gets the elements in the context of the given collection $().children( [selectors] ) - Gets the set of children of given elements $().parent( [selectors] ) - Gets the parent of each element in the given set $().prev( [selectors] ) - Gets the previous element of each element in given set $().prevAll( [selectors] ) - Gets all the previous elements of each element in given set $().next( [selectors] ) - Gets the next element of each element in given set $().nextAll( [selectors] ) - Gets the all the next elements of each element in given set

19. IteratingoverjQueryobject Quando o stack é mesmoumacoleção $().each( function( intIndex, objElement ) ) – identicoaoforeach de muitaslinguagens É umafunção de contexto a iteração é feitasobre o elemento DOM indexado;

20. Events Youcanbind as manyhandlers to a givenevent $().bind( eventType, function( objEvent ){} ) - Bindgivenfunction to giveneventtypeongivencollection Manybuilt-inshorthands: $().bind( "click", fn ) == $().click( fn ) $().trigger( eventType ) - Manuallytriggereventhandlers Manybuilt-inshorthands: $().trigger( "click" ) == $().click() return( false ) - Ineventhandler, preventsdefaultbehaviorandeventbubbling objEvent.preventDefault() - Ineventhandler, preventsdefaultevent (allowsbubbling) objEvent.stopPropagation() - Ineventhandler, preventsbubbling (allowsdefaultbehavior) NEW: live() / die() - Automaticallywireseventsbasedonselectors

21. ExtendingjQuery Extender a bibliotecajQueryestápensado a doisniveisatravés de pluginsou de novos selectors Extender funções (extend $ object) Extenmderfunções dos contentores(extend $.fn object) Extender os selectors (extend $.expr[':'] object)

22. Referencias www.jquery.com – site oficial; http://plugins.jquery.com – conjunto de plugins e exemplos Learning Jquery, better design and web development with simple Javascript techniques, Jonathan Chaffer & Karl Swedberg – Conceitos base da biblioteca; JQuery Reference Guide Jonathan Chaffer & Karl Swedberg – nutshel e referencia de cabeceira; JQuery in action – exemplos práticos e aplicação.