Learning Simple JQuery - Part 2.

This example uses JQuery to set the background-color of input text boxes, and attaches the focus/blur events to those text boxes with a "required" class.

• Add JQuerify bookmarklet to this page. (Get JQuerify here)

Add following JavaScript to the page using the console tab in FireBug

• $("input:text").css("background-color", "yellow");
• $("input:text.required").focus(hilite); $("input:text.required").blur(unlite);

a textbox

a required textbox

 
  function hilite() {   
   $(this).css("background-color", "red"); 
  }
  
  function unlite() {   
   $(this).css("background-color", "yellow"); 
  }

This simple JQuery example was taken from Stephen Walthers PDC 2008 talk.
http://channel9.msdn.com/pdc2008/
http://channel9.msdn.com/pdc2008/PC31/