Your SlideShare is downloading. ×
Apresentação j query3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Apresentação j query3

581
views

Published on

Terceira apresentação sobre jQuery: Eventos

Terceira apresentação sobre jQuery: Eventos


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
581
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Função ready : Faz alguma coisa quando a estrutura do documento está pronta, não espera os elementos externos serem carregados. * pode-se já carregar as funções de interação com um Usuário mesmo que por exemplo uma imagem não tenha Acabado de carregar Função window.onload: Executa a função somente depois de tudo já estar carregado na página ( ex: scripts, musicas, imagens...)
  • A função trigger serve para disparar um evento já definido em um elemento da página
  • O metodo toggle permite que se adicionem funções de alternancia ao eveto click de um elemento.
  • O método live e o delegate fazem a mesma função que o bind (vinculando eventos a um elemento) mas a diferença é que com eles é possível vincular eventos para elementos criados dinamicamente na página.
  • Transcript

    • 1.  
    • 2. O que são Eventos Eventos são as ações que os usuários produzem ao navegar nas páginas como: - Clique do mouse - Movimento do mouse - Digitar algo numa caixa de texto
    • 3. $(window).load $(document).ready $(document).ready(function(){ // funções jQuery que serão iniciadas antes do carregamento total da página }); $(window).load(function(){ // funções jQuery que serão iniciadas depois do carregamento total da página }); $(function(){ // funções });
    • 4. $('#Ricardex').bind('click keypress', function() { alert('click e keypress no Ricardex'); }); $().bind () $(). unbind () Função para vincular manipuladores de eventos $('#Flavia').bind('click', function() { alert('click na Flavia'); }); $('#Lui').bind({ - Versão1.4 click: function() { // faça algo quando clicar no Lui }, mouseout: function() { // faça algo quando o mouse sair do Lui } });
    • 5. .blur(function) .change(function) .click(function) .dblclick(function) .focus(function) .hover(function over, function out) .keydown(function) .keypress(function) .keyup(function) .submit(function) .mousedown(function) .mousemove(function) .mouseout(function) .mouseover(function) .mouseup(function) .select(function) .load(function) .unload(function) Métodos “atalhos” para o bind()
    • 6. $().one () $('#junior').one('click', function(event) { alert('este alert será disparado somente uma vez.'); }); $('#junior').bind('click', function(event) { alert('este alert será disparado somente uma vez.'); $(this).unbind(event); });
    • 7. $(). trigger () / /Evento click do elemento Button $('#botao').click(function(){ alert(botao clicado!'); //Simulando ou disparando o evento click do elemento a $('#fabio').trigger('click'); }); //Evento click do elemento a $('#fabio').click(function(){ alert(Fabio clicado!'); });
    • 8. $(). toggle () $('p').toggle( function() { $(this).addClass('wendola'); }, function() { $(this).addClass('bolha'); }, function() { $(this).addClass('robson'); }, function() { $(this).removeClass('wendola bolha robson'); });
    • 9. $(). hover () mouseenter mouseleave $('div').hover(handlerIn,handlerOut); $('div').mouseenter(handlerIn).mouseleave(handlerOut); var handlerIn = function(){alert('sobre o elemento'); }); var handlerOut = function(){alert('sai o elemento'); });
    • 10. $(). live () $(). die () $(). delegate () $(). undelegate () $('a.confirmar').live('click', function(){ $('<a class=&quot;confirmar&quot;>novo</a>').insertAfter(this); alert('clique'); }); $(function(){ $('a.confirmar').click(function(){ $('<a class=&quot;confirmar&quot;>novo</a>').insertAfter(this); alert('Clique'); }); }); $(&quot;table&quot;).delegate(&quot;td&quot;, &quot;hover&quot;, function(){ $(this).toggleClass(&quot;amarela&quot;); });
    • 11. Obrigado!