minicurso de jquery
TRANSCRIPT
![Page 1: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/1.jpg)
André Willik Valenti
Dextra Sistemas
![Page 2: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/2.jpg)
Biblioteca JavaScript
Cross-browser (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome)
MUITAS funcionalidades
![Page 3: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/3.jpg)
Manipulação de DOMAnimaçõesUtilitários (ex: AJAX)Compatibilidade entre navegadoresEtc.
![Page 4: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/4.jpg)
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”
![Page 5: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/5.jpg)
Produtivo
Intuitivo
Bem documentado
Extensível
![Page 6: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/6.jpg)
HTML• <script src=“jquery-1.6.1.min.js”></script>
Função jQuery• jQuery('seletor-css').algumMetodo()
Atalho: $• $('seletor-css').algumMetodo()
![Page 7: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/7.jpg)
Modo no conflict• Evita conflito do $ com outras bibliotecas• $.noConflict()
![Page 8: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/8.jpg)
HTMLNome: <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
![Page 9: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/9.jpg)
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)
![Page 10: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/10.jpg)
Transformações no documento HTML• Atributos (id, value, class, disabled, style etc.)• Elementos (adicionar, remover, mover, copiar)
![Page 11: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/11.jpg)
Vamos pegar o último exemplo:• $('input#cpf')
Ou simplesmente...• $('#cpf')
![Page 12: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/12.jpg)
Recuperar atributo:• $('#cpf').attr('id') 'cpf'
Alterar atributo:• $('#cpf').attr('id', 'novo-valor')
Remover atributo:• $('#cpf').removeAttr('disabled')
![Page 13: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/13.jpg)
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')
![Page 14: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/14.jpg)
Alterar estilo:• $('#cpf'). attr('style', 'font-weigth: bold')
Atalho:• $('#cpf').css('font-weight', 'bold')• $('#cpf').css('font-weight') 'bold'
![Page 15: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/15.jpg)
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')
![Page 16: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/16.jpg)
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
![Page 17: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/17.jpg)
Tentativa 1.0: css• if ($('#cpf').css('display') == 'none') {
$('#cpf').css('display', 'inline'); // ou block?} else {
$('#cpf').css('display', 'none');}
![Page 18: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/18.jpg)
Tentativa 2.0: add/removeClass• .escondido {
display: none;}
• if ($('#cpf').hasClass('escondido')) {$('#cpf').removeClass('escondido');
} else {$('#cpf').addClass('escondido');
}
![Page 19: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/19.jpg)
Tentativa 2.1: toggleClass• .escondido {
display: none;}
• $('#cpf').toggleClass('escondido');
![Page 20: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/20.jpg)
Atalhos:• $('#cpf').hide()• $('#cpf').show()
E por que não...• $('#cpf').toggle()• Aí sim !
![Page 21: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/21.jpg)
Vai recuperar/alterar valor?• val
Vai recuperar/alterar estilo?• css
Vai recuperar/alterar atributos gerais?• attr
Vai remover atributos?• removeAttr
![Page 22: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/22.jpg)
Quer checar existência de classe?• hasClass
Quer adicionar classe?• addClass
Quer remover classe?• removeClass
Quer alternar classe?• toggleClass
![Page 23: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/23.jpg)
Exibir elemento?• show
Ocultar elemento?• hide
Alternar exibição de elemento?• toggle
![Page 24: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/24.jpg)
SeletoresUm ou muitosAtributos
• attr• val• class• hide/show/toggle
![Page 25: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/25.jpg)
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
![Page 26: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/26.jpg)
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>')
![Page 27: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/27.jpg)
![Page 28: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/28.jpg)
remove• Remove elementos do DOM• $('table').remove()
remove / hide• hide() apenas esconde, usando display: none• remove() efetivamente remove do DOM
![Page 29: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/29.jpg)
prepend / appendremove / hide
![Page 30: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/30.jpg)
Métodos• fadeOut, fadeIn, fadeToggle• slideUp, slideDown, slideToggle• toggle
Tempo em milissegundos, 'fast' ou 'slow'• 'fast' 200ms• 'slow' 600ms
![Page 31: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/31.jpg)
fadeslide toggle
![Page 32: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/32.jpg)
Pseudoclasses CSS• :first / :last• :odd / :even• :checked• :enabled / :disabled• :has('seletor-filhos')• :contains('string-conteúdo')• Etc.
![Page 33: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/33.jpg)
add• $('table#resultados').add('div#topo').remove()
Atalho• $('table#resultados, div#topo').remove()
![Page 34: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/34.jpg)
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')
![Page 35: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/35.jpg)
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')
![Page 36: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/36.jpg)
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()
![Page 37: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/37.jpg)
bind• $('input:text').bind('onchange', function() {
alert('Elemento alterado: ' + this);})
Atalho• $('input:text').change(function() {...});
![Page 38: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/38.jpg)
Atalhos• onchange change• onclick click• onfocus focus• onblur blur• onselect select• onsubmit submit• ...
![Page 39: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/39.jpg)
ready• Disparado quando elemento foi carregado• $('div#principal').ready(function() {...})• $(document).ready(function() {...})
Atalho• $(function() {...}) // Aplica ao document
![Page 40: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/40.jpg)
Vantagens• Cross-browser• Acumula eventos• Permite desativá-los facilmente
![Page 41: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/41.jpg)
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
![Page 42: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/42.jpg)
$.trim• Remove espaços sobressalentes (cross-
browser)
$.browser• Nome e versão do navegador
$.inArray(elemento, vetor)• Procura posição do elemento no vetor
![Page 43: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/43.jpg)
AJAX• $.ajax• $.get• $.post
![Page 44: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/44.jpg)
$.ajax(url [, settings])
$.ajax('/usuarios', {type: 'PUT',data: { nome: 'Joao', idade: '20'},success: function() {...},error: function() {...};
});
![Page 45: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/45.jpg)
$.ajax(url [, settings])
$.ajax('/usuarios', {type: 'PUT',data: { nome: 'Joao', idade: '20'},statusCode: {
200: function() {alert('OK');
},404 : function() { ... }
}});
![Page 46: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/46.jpg)
$.get(url [, data] [, success])
$.get('usuarios/index.html', function(result) { alert(result); });
![Page 47: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/47.jpg)
$.post(url [, data] [, success])
var joao = { nome: 'Joao', idade: '20' };$.post('usuarios/new', joao,
funcaoTratarAjax);
![Page 48: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/48.jpg)
.each(function(index, element) { })• $('input.valores').each(function(i, el) {
alert('Índice: ' + i + ', elemento: ' + el);})
![Page 49: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/49.jpg)
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)
![Page 50: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/50.jpg)
live• Associa evento a elemento(s) ainda não
existente(s)• $('button').live('click', function() { ... })
![Page 51: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/51.jpg)
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()
![Page 52: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/52.jpg)
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>')
![Page 53: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/53.jpg)
Implementar em jQuery:• Seleção múltipla• Remoção• Animação• Zebrado
![Page 54: Minicurso de jQuery](https://reader034.vdocuments.net/reader034/viewer/2022042522/559794681a28abed108b4733/html5/thumbnails/54.jpg)
http://jquery.com• Informações gerais• Download• Plugins
http://api.jquery.com• Informações detalhadas sobre API• Destaque para busca e categorização