Upload
grupoweblovers
View
1.201
Download
2
Embed Size (px)
DESCRIPTION
Palestra realizada durante o 1º Workshop de Jquery no IFRN.
Citation preview
JqueryFramework Javascript para
desenvolvimento web poderoso e dinâmico!
Realização
WebLovers<%= “Por uma Web mais apaixonante” %>http://www.grupoweblovers.co.cc
Quem Somos
Allyson Barros - @allysonbarrosGraduando em Análise e Desenvolvimento de Sistemas - IFRN
Empreendedor e Desenvolvedor Rails da Actual Solutions
Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc
Quem Somos
Daniele Montenegro - @lelybarrosBacharel em Ciências Sociais pela UFRN
Graduanda em Análise e Desenvolvimento de Sistemas - IFRN
Idealizadora do Grupo WebLovers - http://grupoweblovers.co.cc
Quem Somos
Elionai Moura - @eli_embitsGraduando em Análise e Desenvolvimento de Sistemas - IFRN
Empreendedor e Desenvolvedor PHP da EmBits
Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc
Quem Somos
Giancarlo Lima - @giancarlozeroGraduando em Análise e Desenvolvimento de Sistemas - IFRN
Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc
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".
Principais VantagensCompatibilidade 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.
It`s ShowTime! Ou melhor, CodeTime!
http://www.liquisdesign.com/blog/wp-content/uploads/2010/04/web_coding_collage.jpg
Os primeiros passos!
Os primeiros passos!
window.onload = function(){alert("welcome");
}
$(document).ready(function(){ // Your code here});
Antes - Javascript Puro - Boring!
Depois - Jquery - Cool!
Seletores de ElementosOutras Referências: http://api.jquery.com/category/selectors/
$(document)
$(“*”)
$(“#idElemento”)
$(“.classeElemento”)
$(“element”) Ex.: $(“a”), $(“div”), $(“ul li”)
$(“parent > child”) Ex.: $("ul.topnav > li")
Seletores de ElementosOutras Referências: http://api.jquery.com/category/selectors/
var element = document.getElementById("lista-ordenada");element.setAttribute("class", "sem-estilo");
var element = $("#lista-ordenada");element.addClass("sem-estilo");
Antes - Javascript Puro - Boring!
Depois - Jquery - Cool!
$("#lista-ordenada").addClass("sem-estilo");
ou
Manipuladores de EventosOutras Referências: http://api.jquery.com/category/events/
.blur()
.change()
.click()
.dblclick()
.focus()
.focusin()
.focusout()
.hover()
.keydown()
.keypress()
.keyup()
.load()
.ready()
.resize()
.scroll()
.select()
.submit()
Manipuladores de EventosOutras 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!
Manipuladores de AtributosOutras Referências: http://api.jquery.com/category/attributes/
.addClass()
.hasClass()
.removeClass()
.toggleClass()
.attr()
.removeAttr()
.html()
.val()
Manipuladores de ElementosOutras Referências: http://api.jquery.com/category/manipulation/
.addClass()
.after()
.append()
.attr()
.before()
.clone()
.css()
.detach()
.empty()
.height()
.html()
.insertAfter()
.insertBefore()
.position()
.prepend()
.remove()
.replaceAll()
.text()
.val()
.width()
.wrap()
Manipuladores de EfeitosOutras Referências: http://api.jquery.com/category/effects/
.animate()
.clearQueue()
.delay()
.dequeue()
.fadeIn()
.fadeOut()
.fadeOut()
fadeToggle()
.hide()
.queue()
.show()
.slideDown()
.slideToggle()
slideUp()
.stop()
.toggle()
Perguntas?
Agradecimentos!
Confira o código completo dos exemplos em:
www.github.com/grupoweblovers
Não deixem de se cadastrarem no nosso grupo de estudos!
www.grupoweblovers.co.cc
Obrigado!