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