代码都已经测试通过，直接打开注释即可看见效果！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ //鼠标单击事件 /*$("#div1").click(function(){ alert('a'); });*/ //鼠标移动上的事件 /*$("#div1").mousemove(function(){ $(this).css("background","yellow"); });*/ //鼠标离开事件 /*$("#div1").mouseout(function(){ $(this).css("background","green"); });*/ //鼠标指针进入时 /*$("#div1").mouseenter(function(){ $(this).css("background","pink"); });*/ //鼠标指针离开时 /*$("#div1").mouseleave(function(){ $(this).css("background","red"); });*/ //用户按下键盘的时间 /*$("[name='pass']").keydown(function(){ alert("按下了键"); });*/ //用户释放键盘的时间 /*$("[name='pass']").keyup(function(){ alert("释放了键"); });*/ //当键盘或按钮被按下时 /*$("[name='pass']").keypress(function(){ alert("按下了键"); });*/ //获得焦点 /*$("[name='pass']").focus(function(){ alert("聚焦"); });*/ //失去焦点 /*$("[name='pass']").blur(function(){ alert("失去焦点"); });*/ //绑定单个事件 /*$("#div2").bind("click",function(){ alert('单击完了'); })*/ //绑定多个事件 /*$("#div2").bind({ mouseover:function(){ $(this).css("background","red"); }, mouseout:function(){ $(this).css("background","yellow"); } });*/ //移除绑定的事件 /*$("#div2").unbind("mouseover");*/ //toggle()方法，相当于模拟鼠标多次单击事件 /*$("p").toggle( function(){ $(this).css("background","red") }, function(){ $(this).css("background","orange") }, function(){ $(this).css("background","yellow") }, function(){ $(this).css("background","green") }, function(){ $(this).css("background","cyan") }, function(){ $(this).css("background","blue") }, function(){ $(this).css("background","people") } );*/ //动画，jquery显示和隐藏 /*$("p").hide(); $("#div2").click(function(){ $("p").show("300"); });*/ //隐藏 /*$("#div2").click(function(){ $("p").hide("300"); });*/ //改变元素的透明度(淡入和淡出) //淡入 /*$("p").hide(); $("#div2").click(function(){ $("p").fadeIn("slow"); })*/ //淡出 /*$("#div2").click(function(){ $("#div1").fadeOut("slow"); })*/ //改变元素的高度 /*$("#div2").click(function(){ $("#div1").slideUp("slow"); })*/ /*$("#div1").hide("3000"); $("#div2").click(function(){ $("#div1").slideDown("slow"); })*/ }) </script> <style type="text/css"> #div1{ width: 200px; height: 150px; background: pink; border-radius: 5px; line-height: 50px; text-align: center; cursor: pointer; } #div2{ width: 200px; height: 150px; background: blueviolet; border-radius: 5px; line-height: 50px; text-align: center; cursor: pointer; } </style> </head> <body> <div id="div1"> 按钮1 <p style="background: brown;">p1</p> </div> <div id="div2"> 按钮2 </div> 密码<input type="password" name="pass" /> </body> </html>
