故事：一个文学青年给马克.吐温写信，问道：“听说鱼骨头里含有大量的磷质，而磷质有助于补脑子。那么，要成为一个举世闻名的大作家，是不是就必须吃很多鱼才行？请问，您是否也吃过很多的鱼？吃的是哪种鱼呢？”马克.吐温回信说：“看来，你得吃一对鲸鱼才行！”
点拨：其实成就事业的方法很简单，别相信吃鱼能吃成作家就可以了。
感悟：成功的路上没有捷径可走，只有不断的学习才能弥补自身的不足，才能让我们丰富和深刻起来。杰出的人物几乎都是学有所成之士，只有无知的人才会轻视学习。
好了，欣赏完文章就该切入主题了。放下心来仔细听小编的讲解，这期的内容很有趣，一定要好好听讲哦！
说一说今天的主题：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>
时间： 2024-10-05 06:18:53