Baixado 33 vezes
Palestra - Iniciando no Jquery
- 1. Jquery FrameworkJavascript para desenvolvimento web poderoso e dinâmico!
- 2. Realização WebLovers <%= “Por uma Web mais apaixonante” %> http://www.grupoweblovers.co.cc
- 3. Quem Somos Allyson Barros- @allysonbarros Graduando em Análise e Desenvolvimento de Sistemas - IFRN Empreendedor e Desenvolvedor Rails da Actual Solutions Idealizador do Grupo WebLovers - http:// grupoweblovers.co.cc allysonbarrosrn@gmail.com - allyson_barros_irm@hotmail.com
- 4. Quem Somos Daniele Montenegro- @lelybarros Bacharel em Ciências Sociais pela UFRN Graduanda em Análise e Desenvolvimento de Sistemas - IFRN Idealizadora do Grupo WebLovers - http://grupoweblovers.co.cc monte.daniele@gmail.com - danie_monte@hotmail.com
- 5. Quem Somos Elionai Moura- @eli_embits Graduando em Análise e Desenvolvimento de Sistemas - IFRN Empreendedor e Desenvolvedor PHP da EmBits Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc nicklegal@gmail.com - eli_ml@hotmail.com
- 6. Quem Somos Giancarlo Lima- @giancarlozero Graduando em Análise e Desenvolvimento de Sistemas - IFRN Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc giancarlozero@gmail.com - giancarlozero@yahoo.com.br
- 7. O que é? jQueryé um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais. É uma poderosa biblioteca JavaScript criada para simplificar a criação de efeitos visuais e de interatividade em web sites. Seu lema é: "Escrever menos e fazer mais".
- 8. Principais Vantagens Compatibilidade entreos navegadores. Redução de código. Reutilização do código através de plugins. Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores. Trabalha facilmente com AJAX e DOM. Implementação segura de recursos do CSS1, CSS2 e CSS3.
- 9. It`s ShowTime! Oumelhor, CodeTime! http://www.liquisdesign.com/blog/wp-content/uploads/2010/04/ web_coding_collage.jpg
- 10.
- 11. Os primeiros passos! window.onload= function(){ alert("welcome"); } Antes - Javascript Puro - Boring! $(document).ready(function(){ // Your code here }); Depois - Jquery - Cool!
- 12. Seletores de Elementos Outras Referências: http://api.jquery.com/category/selectors/ $(document) $(“*”) $(“#idElemento”) $(“.classeElemento”) $(“element”) Ex.: $(“a”), $(“div”), $(“ul li”) $(“parent > child”) Ex.: $("ul.topnav > li")
- 13. Seletores de Elementos Outras Referências: http://api.jquery.com/category/selectors/ var element = document.getElementById("lista-ordenada"); element.setAttribute("class", "sem-estilo"); Antes - Javascript Puro - Boring! var element = $("#lista-ordenada"); element.addClass("sem-estilo"); ou $("#lista-ordenada").addClass("sem-estilo"); Depois - Jquery - Cool!
- 14. Manipuladores de Eventos Outras Referências: http://api.jquery.com/category/events/ .blur() .focusout() .ready() .change() .hover() .resize() .click() .keydown() .scroll() .dblclick() .keypress() .select() .focus() .keyup() .submit() .focusin() .load()
- 15. Manipuladores de Eventos Outras Referências: http://api.jquery.com/category/events/ function displayDate() { alert(new Date()); } <button type="button" onclick="displayDate()">Display Date</button> Antes - Javascript Puro - Boring! $("button").click(displayDate()); Depois - Jquery - Cool!
- 16. Manipuladores de Atributos Outras Referências: http://api.jquery.com/category/attributes/ .addClass() .attr() .hasClass() .removeAttr() .removeClass() .html() .toggleClass() .val()
- 17. Manipuladores de Elementos Outras Referências: http://api.jquery.com/category/manipulation/ .addClass() .detach() .prepend() .after() .empty() .remove() .append() .height() .replaceAll() .attr() .html() .text() .before() .insertAfter() .val() .clone() .insertBefore() .width() .css() .position() .wrap()
- 18. Manipuladores de Efeitos Outras Referências: http://api.jquery.com/category/effects/ .animate() .fadeOut() .slideToggle() .clearQueue() fadeToggle() slideUp() .delay() .hide() .stop() .dequeue() .queue() .toggle() .fadeIn() .show() .fadeOut() .slideDown()
- 19.
- 20.
- 21. Confira o códigocompleto dos exemplos em: www.github.com/ grupoweblovers
- 22. Não deixem dese cadastrarem no nosso grupo de estudos! www.grupoweblovers.co.cc
- 23.