Palestra - Iniciando no Jquery

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

allysonbarrosrn@gmail.com - allyson_barros_irm@hotmail.com

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

monte.daniele@gmail.com - danie_monte@hotmail.com

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

nicklegal@gmail.com - eli_ml@hotmail.com

Quem Somos

Giancarlo Lima - @giancarlozeroGraduando em Análise e Desenvolvimento de Sistemas - IFRN

Idealizador do Grupo WebLovers - http://grupoweblovers.co.cc

giancarlozero@gmail.com - giancarlozero@yahoo.com.br

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!