O documento descreve a biblioteca JavaScript jQuery, destacando suas principais funcionalidades como seleção e manipulação de elementos DOM, animações, compatibilidade entre navegadores, simplicidade de uso e produtividade. Apresenta os principais métodos e seletores da biblioteca para realizar tarefas comuns como recuperar e alterar atributos, estilos, classes de elementos, adicionar e remover elementos, animações etc.

1. André Willik Valenti
Dextra Sistemas

2.  Biblioteca JavaScript
 Cross-browser(IE 6.0+, FF 2.0+, Safari
3.0+, Opera 9.0+, Chrome)
 MUITAS funcionalidades

3.  Manipulação de DOM
 Animações
 Utilitários
(ex: AJAX)
 Compatibilidade entre navegadores
 Etc.

4.  Simplicidade
• Tudo numa linha de código
 Selecionar e manipular coisas
• “Pegue tais elementos e faça tal coisa”
 Um ou muitos: tanto faz
• Se funciona pra um, funciona pra muitos
 Diga exatamente o que quer fazer
• Foco em “o que”, não em “como”

5.  Produtivo
 Intuitivo
 Bem documentado
 Extensível

6.  HTML
• <script src=“jquery-1.6.1.min.js”></script>
 Função jQuery
• jQuery('seletor-css').algumMetodo()
 Atalho: $
• $('seletor-css').algumMetodo()

7.  Modo no conflict
• Evita conflito do $ com outras bibliotecas
• $.noConflict()

8.  HTML
Nome: <input id="nome" />
CPF: <input id="cpf" class="numerico" />
Idade: <input id="idade" class="numerico" />
Cidade: <input id="cidade" />
 jQuery
• $('input')  4 elementos
• $('input.numerico')  2 elementos
• $('input#cpf')  1 elemento

9.  Um ou muitos
• $('input#cpf').remove()
 Remove 1 elemento
• $('input.numerico').remove()
 Remove 2 elementos
• $('input').remove()
 Remove 4 elementos
• Se funciona pra um, funciona pra muitos
• (alguns métodos operam somente em um mesmo)

10.  Transformações no documento HTML
• Atributos (id, value, class, disabled, style etc.)
• Elementos (adicionar, remover, mover, copiar)

11.  Vamos pegar o último exemplo:
• $('input#cpf')
 Ou simplesmente...
• $('#cpf')

12.  Recuperar atributo:
• $('#cpf').attr('id')  'cpf'
 Alterar atributo:
• $('#cpf').attr('id', 'novo-valor')
 Remover atributo:
• $('#cpf').removeAttr('disabled')

13.  Recuperar/alterar atributo value:
• $('#cpf').attr('value')  valor digitado
• $('#cpf').attr('value', '123.456.789-00')
 Atalho:
• $('#cpf').val()  valor digitado
• $('#cpf').val('123.456.789-00')

14.  Alterar estilo:
• $('#cpf'). attr('style', 'font-weigth: bold')
 Atalho:
• $('#cpf').css('font-weight', 'bold')
• $('#cpf').css('font-weight')  'bold'

15.  Recuperar/alterar classe(s) :
• $('#cpf').attr('class')  'numerico'
• $('#cpf').attr('class', 'campo-cpf')
 Atalhos:
• $('#cpf').hasClass('numerico')
• $('#cpf').addClass('campo-cpf')
• $('#cpf').removeClass('campo-cpf')

16.  Esconder/exibir elemento:
• $('#cpf').css('display', 'none')
• $('#cpf').css('display', 'inline') // ou seria block?
E pra alternar a exibição?
• Tem que ver se está sendo exibido
• Se está, esconde
• Se não está, exibe

17.  Tentativa 1.0: css
• if ($('#cpf').css('display') == 'none') {
$('#cpf').css('display', 'inline'); // ou block?
} else {
$('#cpf').css('display', 'none');
}

18.  Tentativa 2.0: add/removeClass
• .escondido {
display: none;
}
• if ($('#cpf').hasClass('escondido')) {
$('#cpf').removeClass('escondido');
} else {
$('#cpf').addClass('escondido');
}

19.  Tentativa 2.1: toggleClass
• .escondido {
display: none;
}
• $('#cpf').toggleClass('escondido');

20.  Atalhos:
• $('#cpf').hide()
• $('#cpf').show()
E por que não...
• $('#cpf').toggle()
• Aí sim !

21.  Vai recuperar/alterar valor?
• val
 Vai recuperar/alterar estilo?
• css
 Vai recuperar/alterar atributos gerais?
• attr
 Vai remover atributos?
• removeAttr

22.  Quer checar existência de classe?
• hasClass
 Quer adicionar classe?
• addClass
 Quer remover classe?
• removeClass
 Quer alternar classe?
• toggleClass

23.  Exibir elemento?
• show
 Ocultar elemento?
• hide
 Alternar exibição de elemento?
• toggle

24.  Seletores
 Um ou muitos
 Atributos
• attr
• val
• class
• hide/show/toggle

25.  Métodos para:
• Adicionar elementos HTML ou texto
• Remover elementos HTML
 Exemplos de aplicação:
• Alterar uma tabela
• Criar novas seções na página

26.  prepend / append
• Acrescentam conteúdo a um elemento
• Exemplo:
 <table><tr><td> 2 </td> <td> 3
</td></tr></table>
 $('table tr').prepend('<td> 1 </td>')
 $('table tr').append('<td> 4 </td>')

28.  remove
• Remove elementos do DOM
• $('table').remove()
 remove / hide
• hide() apenas esconde, usando display: none
• remove() efetivamente remove do DOM

29.  prepend / append
 remove / hide

30.  Métodos
• fadeOut, fadeIn, fadeToggle
• slideUp, slideDown, slideToggle
• toggle
 Tempo em milissegundos, 'fast' ou 'slow'
• 'fast'  200ms
• 'slow'  600ms

31.  fade
 slide
 toggle

32.  Pseudoclasses CSS
• :first / :last
• :odd / :even
• :checked
• :enabled / :disabled
• :has('seletor-filhos')
• :contains('string-conteúdo')
• Etc.

33.  add
• $('table#resultados').add('div#topo').remove()
 Atalho
• $('table#resultados, div#topo').remove()

34.  children
• $('table').children() // thead e tbody
• $('table tbody').children() // tr's
• $('table tbody').children('tr.selecionado')
 find
• $('table').find('.selecionado')
• $('div#minha-div').find('span#meu-span')

35.  parent
• Pai (elemento imediatamente acima)
 parents
• Todos os ancestrais (pai, avô etc.)
 siblings
• Irmãos
 E dá para filtrar em todos eles!
• $('span').parent('.selecionado')
• $('span').parents('fieldset')
• $('table tr td#meu-td').siblings('.inativo')

36.  closest
• Próprio elemento ou ancestral mais próximo
• $('div#minha-div').closest('.minha-classe')
 filter
• Filtra um objeto jQuery
• Similar à filtragem com children, parents etc.
• $('div, p, span, br').filter('.remover').remove()

37.  bind
• $('input:text').bind('onchange', function() {
alert('Elemento alterado: ' + this);
})
 Atalho
• $('input:text').change(function() {...});

38.  Atalhos
• onchange  change
• onclick  click
• onfocus  focus
• onblur  blur
• onselect  select
• onsubmit  submit
• ...

39.  ready
• Disparado quando elemento foi carregado
• $('div#principal').ready(function() {...})
• $(document).ready(function() {...})
 Atalho
• $(function() {...}) // Aplica ao document

40.  Vantagens
• Cross-browser
• Acumula eventos
• Permite desativá-los facilmente

41.  Com jQuery:
• $('input#meu-input').change(funcao1);
• $('input#meu-input').change(funcao2);
• $('input#meu-input').change(funcao3);
 Cansou dos eventos?
• $('input#meu-input').unbind();
• Afeta apenas os eventos criados com jQuery

42.  $.trim
• Remove espaços sobressalentes (cross-
browser)
 $.browser
• Nome e versão do navegador
 $.inArray(elemento, vetor)
• Procura posição do elemento no vetor

43.  AJAX
• $.ajax
• $.get
• $.post

44.  $.ajax(url [, settings])
 $.ajax('/usuarios', {
type: 'PUT',
data: { nome: 'Joao', idade: '20'},
success: function() {...},
error: function() {...};
});

45.  $.ajax(url [, settings])
 $.ajax('/usuarios', {
type: 'PUT',
data: { nome: 'Joao', idade: '20'},
statusCode: {
200: function() {
alert('OK');
},
404 : function() { ... }
}
});

46.  $.get(url [, data] [, success])
 $.get('usuarios/index.html',
function(result) { alert(result); });

47.  $.post(url [, data] [, success])
 var
joao = { nome: 'Joao', idade: '20' };
$.post('usuarios/new', joao,
funcaoTratarAjax);

48.  .each(function(index, element) { })
• $('input.valores').each(function(i, el) {
alert('Índice: ' + i + ', elemento: ' + el);
})

49.  first / last
• Vetor contendo somente primeiro ou último
 before / after
• Insere conteúdo antes ou depois de um ou mais
elementos
 clone
• Cria cópia profunda de elemento(s)

50.  live
• Associa evento a elemento(s) ainda não
existente(s)
• $('button').live('click', function() { ... })

51.  wrap
• Envolve elemento(s)
• $('span').wrap('<p>')
 wrapInner
• Envolve conteúdo de elemento(s)
• $('td').wrapInner('<span class=“azul”>')
 unwrap
• Remove pai preservando filho
• $('span').unwrap()

52.  html
• Recupera / altera conteúdo HTML
• $('#elemento').html()
• $('#elemento').html('<p>um paragrafo</p>')
 text
• Recupera / altera texto
• $('#elemento').text()
• $('#elemento').text('<p>menor p maior</p>')

53.  Implementar em jQuery:
• Seleção múltipla
• Remoção
• Animação
• Zebrado

54.  http://jquery.com
• Informações gerais
• Download
• Plugins
 http://api.jquery.com
• Informações detalhadas sobre API
• Destaque para busca e categorização