Your SlideShare is downloading. ×
  • Like
jQuery - Javascript para quem não sabe Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery - Javascript para quem não sabe Javascript

  • 2,463 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,463
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
77
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery Javascript para quem não sabe Javascript Nando Vieira simplesideias.com.br
  • 2. A função mágica $(‘<seletor>’) = CSS + Javascript
  • 3. Seletores • $(‘#id’) • $(‘.class’) • $(‘a[rel=external]’) • $(‘ul > li:nth(5)’) • $(‘li:first’, parent) • ... e mais uma cacetada de seletores!
  • 4. Modificando elementos $(‘div’).css(‘width’, ‘100px’) $(‘div’).addClass(‘hidden’) $(‘div’).removeClass(‘hidden’) $(‘img’).attr(‘src’, ‘/some/image’)
  • 5. Modificando elementos $(‘div’).html(‘some <strong>html</strong>’) $(‘div’).append(‘more <strong>html</strong>’) $(‘div’).prepend(‘even <strong>more</strong>’) $(‘div’).before(‘<p>one line here...</p>’) $(‘div’).after(‘<p>... one more line!</p>’)
  • 6. Eventos • $(document).ready ou $(callback) • $(‘element’).click(callback) • $(‘element’).bind(‘click’, callback) A maioria dos métodos possui atalho: click, mouseover, mouseout, blur, focus...
  • 7. Callback • function do_something(){} • var do_something = function(){} • ... mas já pensou no tanto de funções que você terá que criar?
  • 8. Callback Função anônima é a solução! $(‘a’).click(function(){ //your code });
  • 9. Iterando em elementos $(‘element’).each(function(index){ //your code });
  • 10. Iterando em elementos Escopo $(‘a[rel=external]’).each(function(index){ alert(this); }); O objeto this sempre será o escopo do seletor, neste caso, a tag <a>.
  • 11. Iterando em elementos Escopo ATENÇÃO: this é Javascript puro! Use $(this) se precisar de qualquer funcionalidade do jQuery.
  • 12. Encadeamento de chamadas $(‘div’) .removeClass(‘hidden’) .html(‘some markup’) .fadeIn(‘normal’, function(){ alert(‘done’); });
  • 13. Quero ser web 2.0 Requisições HTTP (AJAX???) Só carregar HTML? Sem problema! $(‘div#content’).load(‘/some/html/content);
  • 14. Quero ser web 2.0 Requisições HTTP - GET $.get(‘/some/url’, function(content){ // do some processing $(‘div’).html(content); });
  • 15. Quero ser web 2.0 Requisições HTTP - POST $.post(‘/some/url’, function(content){ // do some processing $(‘div’).html(content); });
  • 16. Quero ser web 2.0 Requisições HTTP - JSON $.getJSON(‘/some/url’, function(data){ // do some processing alert(data.name); });
  • 17. Quero ser web 2.0 Requisições HTTP Métodos e Retorno de Dados $.ajax({ ‘url’: ‘/some/url’, ‘params’: {arg1: value1, arg2: ‘value2’}, ‘dataType’: ‘xml | json | html | jscript’, ‘success’: function(){}, ‘type’: ‘[http verbs]’ });
  • 18. Mais informações • http://visualjquery.com • http://docs.jquery.com • http://simplesideias.com.br/tags/jquery
  • 19. Dúvidas?