Eventos com jQuery « Danilo – Desenvolvimento web

Eventos com jQuery

Para utilizar jQuery é preciso da biblioteca do jQuery

Para baixar o jQuery clique aqui.

Exemplos:

.click

O evento .click é processado quando clicamos em um elemento. Ex.: Clique aqui!

$(document).ready( function () {
   	$("#elemento-click").click( function() {
		alert("Você clicou aqui!");
   	});   		
});

.change

O evento .change é processado quando um elemento muda de valor.

$(document).ready( function () {
   	$("#elemento-change").change( function () {
		alert("Você mudou o valor do elemento");
   	}); 		
});

.select

O evento .select é processado quando um texto existente em um elemento é selecionado.

Danilo Borges Pereira

$(document).ready( function () {
   	$("#elemento-select").select( function () {
   		alert((document.all) ? document.selection.createRange().text : this.value.substring(this.selectionStart, this.selectionEnd));
   	});   		
});

.focus

O evento .focus é processado quando um elemento recebe foco.

$(document).ready( function () {
	$("#elemento-focus").focus( function () {
		alert("elemento ganhou foco!");	
	});
});

.blur

O evento .blur é processado quando um elemento perde o foco.

$(document).ready( function () {
	$("#elemento-blur").blur( function () {
		alert("elemento perdeu o foco!");
	}); 
});

.keydown

O evento .keydown é processado quando é pressionado alguma tecla.

$(document).ready( function () {
	$("#elemento-keydown").keydown( function (event) {
		alert(event.keyCode);
	}); 
});

.keyup

O evento .keyup é processado quando uma tecla deixa de ser pressionada.

$(document).ready( function () {
	$("#elemento-keyup").keyup( function (event) {
		alert(event.keyCode); 
	}); 
});

.mouseover

O evento .mousover é processado quando passamos o mouse sobre um elemento.

$(document).ready( function () {
	$("#elemento-mouseover").mouseover( function () {
		alert("O rato entrou"); 
	});
});

.mouseout

O evento .mouseout é processado quando tiramos o mouse de cima do elemento .

$(document).ready( function () {
	$("#elemento-mouseout").mouseout( function () {
		alert('O rato saiu'); 
	});	
});

.submit

O evento .submit é processado quando o formulário é submetido.

$(document).ready( function () {
	$("#elemento-submit").submit( function () {
		alert('formulário submetido');
		return false; 
	});	
});

.load

O evento .load é processado quando um elemento termina de ser carregado.

$(document).ready( function () {
	$("body").load( function () {
		alert("elemento carregado!");
	});
});

Mais eventos podem ser encontrados em: jQuery Events.

event, eventos, javascript, jQuery, js

Postado na terça-feira, 29 de setembro de 2009, 14:03

#1 por Chris Benseler - 1 de outubro de 2009 em 20:33

jQuery e sua dominação mundial :( hehe
Mas estou me acostumando a ela, e até gostando!

Outro post bem didático! :)

Citar
#2 por Brayan - 15 de outubro de 2009 em 02:28

Parabéns pelo post Danilo, muito bom cara. Viu se não for pedir muito, sera q vc poderia mostrar ae como usar Jquery para deixar o site em 100% da tela. Quando pesquisei sobre Jquery vi q sua principal função é evitar problemas de compatibilidade com navegadores, isso seria deixar os sites com 100% no tamanho?
vlwww

Citar

Twitted by alinecoelho2001