I think we are all successful people.

故事:一个文学青年给马克.吐温写信,问道:“听说鱼骨头里含有大量的磷质,而磷质有助于补脑子。那么,要成为一个举世闻名的大作家,是不是就必须吃很多鱼才行?请问,您是否也吃过很多的鱼?吃的是哪种鱼呢?”马克.吐温回信说:“看来,你得吃一对鲸鱼才行!”

点拨:其实成就事业的方法很简单,别相信吃鱼能吃成作家就可以了。

感悟:成功的路上没有捷径可走,只有不断的学习才能弥补自身的不足,才能让我们丰富和深刻起来。杰出的人物几乎都是学有所成之士,只有无知的人才会轻视学习。

好了,欣赏完文章就该切入主题了。放下心来仔细听小编的讲解,这期的内容很有趣,一定要好好听讲哦!

说一说今天的主题: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>

 

posted on 2016-05-26 17:40  张BC  阅读(235)  评论(0编辑  收藏  举报
We are all best creamIT.