Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LAB02</title>
<style>
.caja{
width:120px;
height:120px;
background-color:#FF9900;
position:relative;
}
</style>
</head>

<body>
<div class="caja"></div>
<p id="muestra"></p>
<button name="muestra">Ejemplo JQuery</button>
<button name="mover">Ejemplo JQuery mover</button>
<button name="getdatos">GET data</button>
<script src="js/jquery.js"></script>
<script>
//$(selector).action()
//# = ID
//. = CLASS
$(document).ready(function(){
	var texto = "Hola Mundo desde Jquery";
	$("#muestra").html(texto);
	$("button[name='muestra']").click(function(){
		alert("Ejemplo boton");
	})
	$("button[name='mover']").click(function(){
		$(".caja").animate({left:250}).hide(1000);
	});
	$("button[name='getdatos']").click(function(){
		//AJAX
		var endpoint = "https://jsonplaceholder.typicode.com/posts";
		$.get(endpoint,function(data){
			$.each(data,function(idx,valor){
				respuesta = "<br />UserID: "+valor.userId+" T&iacute;tulo: "+valor.title+"<br />";
				$("#muestra").append(respuesta);
			});
		});
	});
});
</script>
</body>

</html>