Apresentação j query3

download Apresentação j query3

If you can't read please download the document

Transcript of Apresentação j query3

O que so Eventos

Eventos so as aes que os usurios produzem ao navegar nas pginas como:

- Clique do mouse

- Movimento do mouse

- Digitar algo numa caixa de texto

$(window).load $(document).ready

$(document).ready(function(){ // funes jQuery que sero iniciadas antes do carregamento total da pgina});

$(window).load(function(){ // funes jQuery que sero iniciadas depois do carregamento total da pgina});

$(function(){ // funes});

Funo ready : Faz alguma coisa quando a estrutura do documento est pronta, no espera os elementos externos serem carregados.* pode-se j carregar as funes de interao com um Usurio mesmo que por exemplo uma imagem no tenha Acabado de carregar

Funo window.onload: Executa a funo somente depois de tudo j estar carregado na pgina ( ex: scripts, musicas, imagens...)

$('#Ricardex').bind('click keypress', function() { alert('click e keypress no Ricardex'); });

$().bind () $().unbind ()

Funo para vincular manipuladores de eventos

$('#Flavia').bind('click', function() { alert('click na Flavia');});

$('#Lui').bind({ - Verso1.4 click: function() { // faa algo quando clicar no Lui }, mouseout: function() { // faa algo quando o mouse sair do Lui }});

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

Mtodos atalhos para o bind()

$().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);});

$().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!');});

A funo trigger serve para disparar um evento j definido em um elemento da pgina

$().toggle ()

$('p').toggle( function() { $(this).addClass('wendola'); }, function() { $(this).addClass('bolha'); }, function() { $(this).addClass('robson'); }, function() { $(this).removeClass('wendola bolha robson'); });

O metodo toggle permite que se adicionem funes de alternancia ao eveto click de um elemento.

$().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'); });

$().live() $().die()$().delegate() $().undelegate()

$('a.confirmar').live('click', function(){$('novo').insertAfter(this);alert('clique');});

$(function(){$('a.confirmar').click(function(){$('novo').insertAfter(this);alert('Clique');});});

$("table").delegate("td", "hover", function(){$(this).toggleClass("amarela");});

O mtodo live e o delegate fazem a mesma funo que o bind (vinculando eventos a um elemento) mas a diferena que com eles possvel vincular eventos para elementos criados dinamicamente na pgina.

Obrigado!