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