![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();](https://image.slidesharecdn.com/jquery-visaogeral-120611194148-phpapp02/75/jQuery-Visao-Geral-4-2048.jpg)
![Seletores
$("#foo") $("li:first")
$(".foo")
$("tr:odd")
$(“table")
$("a[target=_blank]")
$("form[id^=step]")](https://image.slidesharecdn.com/jquery-visaogeral-120611194148-phpapp02/75/jQuery-Visao-Geral-7-2048.jpg)
![Seletores
$('input:disabled');
$('div:empty');
$('input:checked');
$('option:selected');
$('option:even');
$(„tr[class=word]');
$('li:last');](https://image.slidesharecdn.com/jquery-visaogeral-120611194148-phpapp02/75/jQuery-Visao-Geral-8-2048.jpg)
Carregado porKaio Valente
jQuery - Visão Geral
O documento apresenta as vantagens e funcionalidades do jQuery, como simplificar códigos JavaScript, acesso direto ao DOM, efeitos e animações. Explica a filosofia do jQuery de procurar elementos e fazer ações com eles, e demonstra seletores, métodos como append(), css() e eventos como click().
jQuery - Visão Geral
- 1. Visão Geral Kaio Valente Cobra Tecnologia
- 2. Vantagens • Acesso direto a qualquer componente do DOM • Simplicidade, poucas linhas de código • Cross-browser • Efeitos e animações • Ajax
- 3.
- 4. 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();
- 5. Filosofia jQuery #1. Procuraralgum elemento HTML #2. Fazer algo com ele
- 6. Filosofia jQuery Procurar Ação $(“div”) .hide();
- 7. Seletores $("#foo") $("li:first") $(".foo") $("tr:odd") $(“table") $("a[target=_blank]") $("form[id^=step]")
- 8. Seletores $('input:disabled'); $('div:empty'); $('input:checked'); $('option:selected'); $('option:even'); $(„tr[class=word]'); $('li:last');
- 9. 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!"); });
- 10. Métodos jQuery • Elementosde 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()
- 11. Métodos jQuery Chain Methods $("div").addClass(".foo").fadeIn();
- 12. Movimentação Inserir umconteú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>
- 13. Atributos Get Set .attr('id') .attr(„id‟,‟foo‟) .html() .html(„<p>Cobra</p>‟) .val() .val(„valor‟) .css(„top‟) .css(„top‟,‟80px‟) .width() .width(60)
- 14. Atributos Setando várias propriedadescss $('#foo').css({ "background": "yellow", "height": "400px" }); Alterando links $('a').attr('href','http://google.com.br'); Marcando todos os checkbox $(':checkbox').attr('checked', 'checked');
- 15. Eventos Quando um botãofor 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');
- 16. Eventos Criando elementos emtempo de execução... $('button').live('click',function(){ alert(„click'); });
- 17. Efeitos Tipos de Efeito #1. Hide e Show #2. FadeIn e FadeOut #3. SlideUp e SlideDown
- 18. Efeitos SlideUp/SlideDown a cadaclick 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);
- 19. Busca Pegar todas ascolunas da tabela anteriores a #minhaColuna $('#minhaColuna').prevAll() .andSelf(); <html> <body> <table><tr> <td></td> <td></td> <td id="minhaColuna"></td> </tr></table> </body> </html>
- 20. Busca Pegar o parágrafoda 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>
- 21. Ajax Requisição ajax usandoget $('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 div function carregar(elemento,url) { $('#'+elemento).load(url); }
- 22. Plugins Plugins Famosos • jQuery UI • jQuery Form • jQuery Validate • jQuery Tipsy • jQuery jCarousel • jQuery maskFinancial • http://plugins.jquery.com
- 23. 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
- 24. Concluindo... • Produtividade • Comunidade forte • Muito material, livros, internet • Licença aberta e free
- 25. Concluindo... • Forum oficial: http://forum.jquery.com/ • Comunidade brasileira: jquery-br@googlegroups.com • jQuery API: http://api.jquery.com/
- 26. Referência jQuery Essentials byMarc Grabanski http://www.slideshare.net/1Marc/jquery-essentials
- 27. Visão Geral Kaio Valente Cobra Tecnologia