Jquery é um framework Javascript poderoso para desenvolvimento web dinâmico. Ele simplifica a criação de efeitos visuais e interatividade, escrevendo menos código. Jquery permite selecionar elementos, adicionar eventos a elementos e manipular atributos de forma simplificada.

1. Jquery
Framework Javascript 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 entre os 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! Ou melhor,
CodeTime!
http://www.liquisdesign.com/blog/wp-content/uploads/2010/04/
web_coding_collage.jpg

10. Os primeiros passos!

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. Perguntas?

20. Agradecimentos!

21. Confira o código completo dos
exemplos em:
www.github.com/
grupoweblovers

22. Não deixem de se cadastrarem no
nosso grupo de estudos!
www.grupoweblovers.co.cc

23. Obrigado!