Cambiar el background de una web con jQuery

jQuery Tutorial 1 Hoy en mi primer tutorial les enseñaré a background de una web con jQuery. Primero así será nuestro HTML:

Elige un color

Posteriormente añadimos el CSS: @charset "utf-8"; body { font-family: Helvetica, Arial; margin: 0; /* Transition para el cambio de color */ -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; } form { margin: 20px 0 0 0; text-align: center; } header { background: #222; box-shadow: 0 2px 10px rgba(0,0,0,.3); color: #fff; font-size: 24px; font-weight: bold; padding: 12px 0; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.3); text-transform: uppercase; } input { font-size: 20px; font-weight: bold; padding: 12px; text-transform: uppercase; } El CSS se ordena alfabeticamente Y creamos la función cambiarColor $(document).ready(function(){ /* Cualquier funcionalidad que queramos agregar a la página por medio de jQuery, debe ser incluida cuando el documento está listo para recibir acciones que modifiquen el DOM de la página. */ $('.azul').click(function(event){ /* Seleccionamos el elemento que queremos que realice la función */ $('body').css('background', '#08c');/* La función a realizar añadir CSS al body previamente seleccionado */ }); $('.blanco').click(function(event){/* Seleccionamos el elemento que queremos que realice la función */ $('body').css('background', '#fff');/* La función a realizar añadir CSS al body previamente seleccionado */ }); }); No olvidarse de cerrar los puntos y comas ";" llaves "{}" y paréntesis "()". Y aquí la demostración: http://pastehtml.com/raw/bu8ukzwen.html