Minicurso de jQuery

54
André Willik Valenti Dextra Sistemas

Transcript of Minicurso de jQuery

Page 1: Minicurso de jQuery

André Willik Valenti

Dextra Sistemas

Page 2: Minicurso de jQuery

Biblioteca JavaScript

Cross-browser (IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome)

MUITAS funcionalidades

Page 3: Minicurso de jQuery

Manipulação de DOMAnimaçõesUtilitários (ex: AJAX)Compatibilidade entre navegadoresEtc.

Page 4: Minicurso de jQuery

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

Produtivo

Intuitivo

Bem documentado

Extensível

Page 6: Minicurso de jQuery

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

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

Page 8: Minicurso de jQuery

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

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

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

Page 11: Minicurso de jQuery

Vamos pegar o último exemplo:• $('input#cpf')

Ou simplesmente...• $('#cpf')

Page 12: Minicurso de jQuery

Recuperar atributo:• $('#cpf').attr('id') 'cpf'

Alterar atributo:• $('#cpf').attr('id', 'novo-valor')

Remover atributo:• $('#cpf').removeAttr('disabled')

Page 13: Minicurso de jQuery

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

Alterar estilo:• $('#cpf'). attr('style', 'font-weigth: bold')

Atalho:• $('#cpf').css('font-weight', 'bold')• $('#cpf').css('font-weight') 'bold'

Page 15: Minicurso de jQuery

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

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

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

Tentativa 2.0: add/removeClass• .escondido {

display: none;}

• if ($('#cpf').hasClass('escondido')) {$('#cpf').removeClass('escondido');

} else {$('#cpf').addClass('escondido');

}

Page 19: Minicurso de jQuery

Tentativa 2.1: toggleClass• .escondido {

display: none;}

• $('#cpf').toggleClass('escondido');

Page 20: Minicurso de jQuery

Atalhos:• $('#cpf').hide()• $('#cpf').show()

E por que não...• $('#cpf').toggle()• Aí sim !

Page 21: Minicurso de jQuery

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

Quer checar existência de classe?• hasClass

Quer adicionar classe?• addClass

Quer remover classe?• removeClass

Quer alternar classe?• toggleClass

Page 23: Minicurso de jQuery

Exibir elemento?• show

Ocultar elemento?• hide

Alternar exibição de elemento?• toggle

Page 24: Minicurso de jQuery

SeletoresUm ou muitosAtributos

• attr• val• class• hide/show/toggle

Page 25: Minicurso de jQuery

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

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
Page 28: Minicurso de jQuery

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

prepend / appendremove / hide

Page 30: Minicurso de jQuery

Métodos• fadeOut, fadeIn, fadeToggle• slideUp, slideDown, slideToggle• toggle

Tempo em milissegundos, 'fast' ou 'slow'• 'fast' 200ms• 'slow' 600ms

Page 31: Minicurso de jQuery

fadeslide toggle

Page 32: Minicurso de jQuery

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

Page 33: Minicurso de jQuery

add• $('table#resultados').add('div#topo').remove()

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

Page 34: Minicurso de jQuery

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

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

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

bind• $('input:text').bind('onchange', function() {

alert('Elemento alterado: ' + this);})

Atalho• $('input:text').change(function() {...});

Page 38: Minicurso de jQuery

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

Page 39: Minicurso de jQuery

ready• Disparado quando elemento foi carregado• $('div#principal').ready(function() {...})• $(document).ready(function() {...})

Atalho• $(function() {...}) // Aplica ao document

Page 40: Minicurso de jQuery

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

Page 41: Minicurso de jQuery

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

$.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

AJAX• $.ajax• $.get• $.post

Page 44: Minicurso de jQuery

$.ajax(url [, settings])

$.ajax('/usuarios', {type: 'PUT',data: { nome: 'Joao', idade: '20'},success: function() {...},error: function() {...};

});

Page 45: Minicurso de jQuery

$.ajax(url [, settings])

$.ajax('/usuarios', {type: 'PUT',data: { nome: 'Joao', idade: '20'},statusCode: {

200: function() {alert('OK');

},404 : function() { ... }

}});

Page 46: Minicurso de jQuery

$.get(url [, data] [, success])

$.get('usuarios/index.html', function(result) { alert(result); });

Page 47: Minicurso de jQuery

$.post(url [, data] [, success])

var joao = { nome: 'Joao', idade: '20' };$.post('usuarios/new', joao,

funcaoTratarAjax);

Page 48: Minicurso de jQuery

.each(function(index, element) { })• $('input.valores').each(function(i, el) {

alert('Índice: ' + i + ', elemento: ' + el);})

Page 49: Minicurso de jQuery

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

live• Associa evento a elemento(s) ainda não

existente(s)• $('button').live('click', function() { ... })

Page 51: Minicurso de jQuery

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

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

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

Page 54: Minicurso de jQuery

http://jquery.com• Informações gerais• Download• Plugins

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