• Save
jQuery - Visão Geral
Upcoming SlideShare
Loading in...5
×
 

jQuery - Visão Geral

on

  • 1,131 views

Slides apresentados à equipe de desenvolvimento da Cobra tecnologia.

Slides apresentados à equipe de desenvolvimento da Cobra tecnologia.

Statistics

Views

Total Views
1,131
Views on SlideShare
1,131
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery - Visão Geral jQuery - Visão Geral Presentation Transcript

  • Visão GeralKaio Valente Cobra Tecnologia
  • Vantagens• Acesso direto a qualquer componente do DOM• Simplicidade, poucas linhas de código• Cross-browser• Efeitos e animações• Ajax
  • JavaScript x jQuery
  • Vantagens• Mais fácil escrever jQuery do que em JavaScript puro.Esconder todas as divs com JavaScript puro:divs = document.getElementByTagName(div);for (i=0; i<divs.length; i++) { div[i].style.display = none;}Esconder todas as divs com jQuery:$("div").hide();
  • Filosofia jQuery#1. Procurar algum elemento HTML#2. Fazer algo com ele
  • Filosofia jQuery Procurar Ação$(“div”) .hide();
  • Seletores $("#foo") $("li:first") $(".foo") $("tr:odd")$(“table") $("a[target=_blank]")$("form[id^=step]")
  • Seletores $(input:disabled);$(div:empty); $(input:checked); $(option:selected);$(option:even); $(„tr[class=word]); $(li:last);
  • Criando Funções<script type="text/javascript" src=“/projeto/js/jquery-1.7.2.min.js"></script>$(document).ready(function(){ console.log(“Pronto!");});$(function(){ console.log(“Pronto!");});jQuery(function(){ console.log(“Pronto!");});
  • Métodos jQuery• Elementos de Movimentação: append(), before(), after()• Atributos: css(), attr(), html(), val(), addClass()• Eventos: bind(), trigger(), unbind(), live(), click()• Efeitos: show(), fafeOut(), toggle(), animate()• Elementos de busca: find(), is(), prevAll(), next(), hasClass()• Ajax get(), getJSON(), post(), ajax(), load()
  • Métodos jQuery Chain Methods$("div").addClass(".foo").fadeIn();
  • Movimentação Inserir um conteúdo HTML na div foo$(“#foo”).append("<p>teste</p>");<html> <body> <div>jQuery</div> <div id="foo">exemplo<p>teste</p></div> id="foo">exemplo</div> </body></html>
  • Atributos Get Set.attr(id) .attr(„id‟,‟foo‟).html() .html(„<p>Cobra</p>‟).val() .val(„valor‟).css(„top‟) .css(„top‟,‟80px‟).width() .width(60)
  • AtributosSetando várias propriedades css$(#foo).css({ "background": "yellow", "height": "400px"});Alterando links$(a).attr(href,http://google.com.br);Marcando todos os checkbox$(:checkbox).attr(checked, checked);
  • EventosQuando um botão for clicado, faça alguma coisa... $(button).click(function(){ alert(onclick); });Criando um evento customizado... $(button).bind(expandir,function(){ alert(expandir); });$(button:first).trigger(expandir);Desfazendo evento customizado...$(button).unbind(expandir);
  • EventosCriando elementos em tempo de execução...$(button).live(click,function(){ alert(„click);});
  • EfeitosTipos de Efeito #1. Hide e Show #2. FadeIn e FadeOut #3. SlideUp e SlideDown
  • EfeitosSlideUp/SlideDown a cada click na div foo $(#foo).click(function(){ $(this).slideToggle(); });Aumenta largura da div foo para 300px em 5 segundos $(#foo).animate({width:300px},500);Diminui 30% da opacidade em 2 segundos ao perder o foco$(#foo).fadeTo(200,0.3);
  • BuscaPegar todas as colunas da tabela anteriores a #minhaColuna $(#minhaColuna).prevAll() .andSelf(); <html> <body> <table><tr> <td></td> <td></td> <td id="minhaColuna"></td> </tr></table> </body> </html>
  • BuscaPegar o parágrafo da div... $(„table).next().find(„p‟); <html> <body> <table></table> <div> <div> <p>foo</p> <p>foo</p> <span>teste</span> <span>teste</span> </div> </div> </body> </html>
  • AjaxRequisição ajax usando get $(button#Buscar).get(/projetos/buscar, {id:1,nome:catuai});Requisição ajax usando post e exibindo a resposta $(button#Salvar).post(/projetos/salvar,{id:1,}, function(response){ alert(response); });Carregar resposta em uma divfunction carregar(elemento,url) { $(#+elemento).load(url);}
  • PluginsPlugins Famosos • jQuery UI • jQuery Form • jQuery Validate • jQuery Tipsy • jQuery jCarousel • jQuery maskFinancial • http://plugins.jquery.com
  • Concluindo...http://www.google.com/trends/?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+ javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
  • Concluindo...• Produtividade• Comunidade forte• Muito material, livros, internet• Licença aberta e free
  • Concluindo...• Forum oficial: http://forum.jquery.com/• Comunidade brasileira: jquery-br@googlegroups.com• jQuery API: http://api.jquery.com/
  • ReferênciajQuery Essentials by Marc Grabanski http://www.slideshare.net/1Marc/jquery-essentials
  • Visão GeralKaio Valente Cobra Tecnologia