<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> event binding </title> <Script src = "jquery-1.6.2.min.js" type = "text/javascript"> </script> <Script type = "text/javascript"> Var oldColor; $ (Function (){ // Register the click Event of the button with the ID btnTest $ ("# BtnTest"). click (function (){ Var $ divs = $ ("div "); $Divs.html ("I am the modified Div text "); }); // Register the mouseover event of the button with the ID btnTest. Add the background color when the mouse passes. $ ("# BtnTest"). mouseover (function (){ OldColor = $ ("# btnTest" ).css ("background-color "); $ ("# BtnTest" ).css ("background-color", "green "); }); // Register the mouseout event of the button with the ID btnTest. The background color is restored when the mouse leaves. $ ("# BtnTest"). mouseout (function (){ $ ("# BtnTest" ).css ("background-color", oldColor ); }); }); </Script> </Head> <Body> <Div id = "main"> <Div id = "div1" class = "myDiv"> I am div1 <Div id = "divSun"> I am a grandson div. <Div id = "divSunSun"> I am Sun Tzu's grandson div </div> </Div> <Div id = "divSun1"> I am a grandson div </div> </Div> <Div id = "div2" class = "myDiv"> I am div2 </div> </Div> <Div id = "main1"> </div> <Div id = "main2"> </div> <Input id = "btnTest" type = "button" value = "test button"/> <Div id = "main3"> </div> </Body> </Html> |