标签：
故事：一个文学青年给马克.吐温写信，问道：“听说鱼骨头里含有大量的磷质，而磷质有助于补脑子。那么，要成为一个举世闻名的大作家，是不是就必须吃很多鱼才行？请问，您是否也吃过很多的鱼？吃的是哪种鱼呢？”马克.吐温回信说：“看来，你得吃一对鲸鱼才行！”
点拨：其实成就事业的方法很简单，别相信吃鱼能吃成作家就可以了。
感悟：成功的路上没有捷径可走，只有不断的学习才能弥补自身的不足，才能让我们丰富和深刻起来。杰出的人物几乎都是学有所成之士，只有无知的人才会轻视学习。
好了，欣赏完文章就该切入主题了。放下心来仔细听小编的讲解，这期的内容很有趣，一定要好好听讲哦！
说一说今天的主题：jQuery中的事件和动画；在小编的前几篇文章中已经讲了关于jQuery中的部分内容，如果有什么问题可以向小编提出来，小编会很快做出解答~！
一：jQuery中的事件
基础的事件：window事件、鼠标事件、键盘事件、表单事件
jQuery中典型的事件方法：（1）单机事件 click(fn)
（2）按下键盘触发事件 keydown(fn)
（3）失去焦点事件 blur(fn)
常用鼠标事件：（1）click() （2）mouseover() （3）mouseout()
实例：
1 <script type="text/javascript"> 2 $(function(){ 3 //给每一个li注册事件 4 $("li").mouseover(function(){ 5 $(this).css("background","pink"); 6 }).mouseout(function(){ 7 $(this).css("background",""); 8 }); 9 }); 10 </script> 11 </head> 12 <body> 13 <ul> 14 <li>首页</li> 15 <li>公司信息</li> 16 <li>人才计划</li> 17 </ul> 18 </body>
键盘事件：（1）keydown() （2）keyuo() （3）keypress()
实例：
1 <script type="text/javascript"> 2 $(function () { 3 $("[type=password]").keyup(function () { 4 $("#events").append("keyup"); 5 }).keydown(function () { 6 $("#events").append("keydown"); 7 }).keypress(function () { 8 $("#events").append("keypress"); 9 }); 10 $(document).keydown(function (event) { 11 if (event.keyCode == 13) { 12 alert("确认提交？"); 13 } 14 }); 15 }); 16 </script> 17 </head> 18 <body> 19 <dl> 20 <dt>用户名</dt> 21 <dd><input id="username" type="text"/></dd> 22 </dl> 23 <dl> 24 <dt>密码</dt> 25 <dd><input id="password" type="password"/></dd> 26 </dl> 27 <dl> 28 <dt></dt> 29 <dd><input id="submit" value="登录"/></dd> 30 </dl> 31 <span id="events"></span> 32 </body>
表单事件：（1）focus() （2）blur()
实例：
1 <script type="text/javascript"> 2 $(function(){ 3 4 $("input").focus(function(){ 5 $(this).addClass("myred"); 6 }); 7 8 $("input").blur(function(){ 9 $(this).removeClass("myred"); 10 }); 11 12 }); 13 </script> 14 </head> 15 <body> 16 用户名:<input type="text"/> 17 密码:<input type="password"/> 18 </body>
二：绑定事件和移除事件
（1）绑定事件 bind(type,,[data],fn)
（2）移除事件 unbind([type],[fn])
实例：
1 <script type="text/javascript"> 2 $(function () { 3 $("li").bind({ 4 mouseover: function() { 5 $(this).css("background", "pink"); 6 }, 7 mouseout: function() { 8 $(this).css("background", ""); 9 } 10 }); 11 12 13 //$("li").bind("mouseover", function() { 14 // $(this).css("background", "pink"); 15 //}).bind("mouseout", function() { 16 // $(this).css("background", ""); 17 //}); 18 19 //移除了几个？所有 20 //$("li").off("mouseover mouseout"); 21 22 //在绑定多个事件的基础上，卸载掉其中的部分事件 23 24 25 //复合事件 26 //$("li").hover( 27 // function () { //mouseover 28 // $(this).css("background", "pink"); 29 // }, 30 // function () { //mouseout 31 // $(this).css("background", ""); 32 // } 33 //); 34 35 36 //$("ul li").bind("click", function() { 37 // $(this).css("background","pink"); 38 //}); 39 }); 40 41 </script> 42 </head> 43 <body> 44 <ul> 45 <li>首页</li> 46 <li>公司信息</li> 47 <li>人才计划</li> 48 </ul> 49 </body>
三：jQuery中的动画
（1）toggle()方法
1 <script type="text/javascript"> 2 3 $(function () { 4 $("body :hidden").attr("type","text"); 5 // alert(aa); 6 // setInterval(changeBackColor, 5000); 7 $("[type=button]").bind("click", function() { 8 $("div").toggle(); 9 }); 10 }); 11 12 function changeBackColor() { 13 var dom = "pink"; 14 // $("body").css("background-color", dom); 15 //$("div").toggle(function () { 16 // $("body").css("background-color", "pink"); 17 //}, function () { 18 // $("body").css("background-color", "powderblue"); 19 //}, function () { 20 // $("body").css("background-color", "papayawhip"); 21 //}); 22 23 } 24 </script> 25 26 </head> 27 <body> 28 <input type="hidden" value="aaaa"/> 29 <div>我是华丽的div,你福气吗?谁敢搞我???</div> 30 <input type="button" value="我是按钮"/> 31 </body>
下面给大家展示简单的小动画：
1 <script type="text/javascript"> 2 $(function(){ 3 $("#btnIn").click(function(){ 4 $("img").fadeIn(1000); 5 }); 6 $("#btnOut").click(function () { 7 $("img").fadeOut(1000); 8 }); 9 10 }); 11 </script> 12 </head> 13 <body> 14 <img src="image/1.png" /> 15 <input type="button" value="淡入" id="btnIn" /> 16 <input type="button" value="淡出" id="btnOut" /> 17 </body>
相对于相面的简单的特效不如看看下面这个有点难度的动画：
1 <script type="text/javascript"> 2 3 $(function() { 4 //$("[type=button]").bind("click", function() { 5 // //队列： 6 // $("div"). 7 // animate({ "font-size": "50px" },2000) 8 // .animate({ "width": "300px" },2000); 9 //}); 10 $("[type=button]").bind("click", function() { 11 //两个特效并行执行，不加入队列： 12 $("div"). 13 animate({ "font-size": "50px" },2000) 14 .animate({ "width": "300px" }, {queue:false,duration:5000}); 15 }); 16 17 18 19 20 }); 21 </script> 22 </head> 23 <body> 24 <div>我是div</div> 25 <input type="button" value="样式"/> 26 </body>
标签：
原文地址：http://www.cnblogs.com/ay-nzz/p/by_pzz.html
