<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
</head>
<body>
<div id="recuadro" style="background-color:#04B45F">
<!--<p><span style="color:#FF8000">El texto del </span><span style="color:#0B610B">parrafo</span></p></br>-->
<p id='parrafo'>El texto del parrafo</p>
<input id="boton1" type="button" value="Alerta">
</div>
</body>
<script>
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos(){
var x;
x=$("#boton1");
x.click(presionBoton1);
pasarRaton();
dividirCadena();
}
function presionBoton1(){
var texto;
texto=$('#parrafo').text();
alert(texto);
}
function pasarRaton(){
$('#parrafo').hover(function(){
$(this).css("background-color","#ffff00")
},
function(){
$(this).css("background-color","#04B45F")
}
)
}
function dividirCadena(){
var palabras=$('#parrafo').text().split(" ");
var nuevo="";
for(i=0;i<palabras.length;i++)
{
palabras[i]="<span style='background-color:#DF0101'>"+palabras[i]+"</span>"+" ";
nuevo=nuevo+palabras[i];
}
var palabras=$('#parrafo').text(nuevo);
}
</script>
</html>