JQuery Events and Cases

jquery events are similar to JavaScript events, just remove the

1.click,dblclick Events

Case 1: Click on the thumbnail to change the background

"http://www.w3.org/1999/xhtml">"Server"><meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/> <title></title> <script src="Scripts/jquery-1.7.1.min.js"></script> <script language="JavaScript">$ (document). Ready (function () {$ (". TT"). Click (function () {varAA = $ ( This). CSS ("Background-image"); $("Body"). CSS ("Background-image", AA);        }); })    </script> <style type="Text/css">. tt {width:80px;        height:80px; float: Left;        margin:10px; Background-size:80px 80px;        border:1px solid Gray; } #t1 {background-image:url ("images/01.jpg")} #t2 {background-image:url ("images/02.jpg")} #t3 {background-image:url ("images/03.jpg")        }    </style>"Form1"runat="Server"> <div> <divclass="TT"Id="T1"></div> <divclass="TT"Id="T2"></div> <divclass="TT"Id="T3"></div> </div> </form></body>
Case 2: Click to rotate the background (easy method: Use Toggle () () {},function () {}....function () {}) to toggle the style)
Replace the above <script></script> code with the following code (mouse click once to execute Toogle)
$ (document). Ready (function () {$ ( This). Toggle (function () {$ (document). Find ("Body"). CSS ("Background-image","URL (images/01.jpg)"); }, Function () {$ (document). Find ("Body"). CSS ("Background-image","URL (images/02.jpg)"); }, Function () {$ (document). Find ("Body"). CSS ("Background-image","URL (images/03.jpg)");        }); });
2.mousedown,mouseup Events
Case: A picture has been clicked to produce a press-and-bounce effect.
$ (document). Ready (function () {$ (". TT"). MouseDown (function () {$ ( This). CSS ("margin","11px 11px 11px 11px"). CSS ("Height","78px"). CSS ("width","78px"). CSS ("Border","1px solid Black"); }). MouseUp (function () {$ ( This). CSS ("margin","10px 10px 10px 10px"). CSS ("Height","80px"). CSS ("width","80px"). CSS ("Border","1px solid Gray");        }); });
3.mouseover,mouseout Event--can be synthesized as hover (function () {},function () {})
Case: Odd-and-even line of different colors of the light bar effect
Method One: The most primitive method: The Background-color style of the direct manipulation style sheet
<script language="JavaScript">$ (document). Ready (function () {$ ("#GridView1 tr:gt (0): Odd"). CSS ("Background-color","Pink"); varBG =" White"; $("#GridView1 tr:gt (0)"). MouseOver (function () {BG= $( This). CSS ("Background-color"); $( This). CSS ("Background-color","Yellow"); }). mouseout (function () {$ ( This). CSS ("Background-color", BG);        });    }); </script>
Law two: by adding and deleting style sheet selector to achieve. Toggleclass
<script language="JavaScript">$ (document). Ready (function () {$ ("#GridView1 tr:gt (0): Odd"). AddClass ("Odd"); $("#GridView1 tr:gt (0)"). MouseOver (function () {$ ( This). Toggleclass ("Mover");//add without this style}). mouseout (function () {$ ( This). Toggleclass ("Mover");//Delete If you have this style            });    }); </script>
4.focus,blur Events
Case: Text box (required) effect
<script language="JavaScript">$ (document). Ready (function () {$ ("#TextBox1"). focus (function () {$ ( This). CSS ("Color","Black"); if($( This). val () = ="(required)") {                    $( This). Val (""); }}). blur (function () {if($( This). val (). length = =0) {                    $( This). CSS ("Color","#aaaaaa"). Val ("(required)");        }            });    }); </script>
JQuery Events and Cases