Jquery的事件与动画-----下雨的天气好凉爽

今天外面的天气好凉爽，是一个学习的好天气。在这里呢我和大家就来讨论一下JQuery事件与动画的一些知识！

首先，我们先了解一下JQuery的事件和动画的定义吧

以我的理解事件就是当你触发一些东西时而做出的响应：如页面加载时会触发load事件，点击按钮时触发的click事件。。。

而动画就是通过一系列事件而实行的页面的动态效果。

事件：

分类：

1.window事件：在Jquery中，常用的window事件有文档就绪事件-----对应方法ready().

2.鼠标事件：

3键盘事件：

例子：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主导航特效</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
#nav ul{
    list-style: none;
    margin-top: 10px;
    margin-left: 30px;
}
#nav ul li{
    display: block;
    float: left;
    padding: 0px 5px;
}
#nav ul li a{
    color: #000;
    text-decoration: none;
}
.heightlight{
    background-color: #aaa;
}
</style>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#nav li").mouseover(function() {     //当鼠标移过#nav li元素时
        $(this). addClass("heightlight");        //为鼠标所在li元素添加样式
   });
   $("#nav li").mouseout(function() {       //当鼠标移出#nav li元素时
        $(this).removeClass();   //移除鼠标所在li元素的全部样式
   });
});
</script>
</head>
<body>
<div id="nav">
    <ul>
         <li><a href="#">首页</a></li>
         <li><a href="#">服装城</a></li>
         <li><a href="#">电器城</a></li>
         <li><a href="#">易购超市</a></li>
         <li><a href="#">易购团</a></li>
         <li><a href="#">在线游戏</a></li>
    </ul>
</div>
</body>

4.表单事件：是所有事件最稳定，且支持最稳定的事件之一。

script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
    $("[name=member]").focus(function(){
        $(this).addClass("input_focus");
    });
    $("[name=member]").blur(function(){
        $(this).removeClass("input_focus");
    });
});
</script>
</head>
<body>
<div id="login">
  <fieldset>
    <legend>用户登录</legend>
    <p>
        <label>用户名：</label>
        <input name="member" type="text" />
    </p>
    <p>
        <label>密码：</label>
        <input name="password" type="text" />
    </p>
    <p>
        <label>验证码：</label>
        <input name="code" type="text" class="code" />
        <img src="images/code.gif" width="80" height="30" /><a href="#">换一张</a>
    </p>
    <p>
             <input name="" type="button" class="btn" value="登录" />
             <a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>
    </p>
  </fieldset>
</div>       
</body>

5.绑定事件bind()和移除事件unbind()

绑定单个事件：

<script type="text/javascript">
$(document).ready(function() {
   $("input[name=event_1]").bind("click",function() {
       $("p").css("background-color","#F30");
   });
}); 
</script>
</head>
<body>  
    <h1>壹基金</h1>
    <h2>简介</h2>
    <p>2007年，李连杰先生创立启动了壹基金。深圳壹基金公益基金会2010年12月3日再深圳注册成立，是中国第一家民间公募基金会。</p>
    <h2>战略及策略</h2>
    <p>壹基金的公益愿景为"尽我所能，人人公益"。壹基金战略模式为"一个平台+三个领域"，即搭建专业透明的壹基金公益平台。</p>
    <h2>公益活动</h2>
    <ul>
      <li>为爱同行</li>
      <li>关注自闭儿童</li>
      <li>雅安地震救援</li>
    </ul>
    <input name="event_1" type="button" value="绑定单个事件" />
</body>

绑定多个事件：

script type="text/javascript">
$(document).ready(function () {
    $("input[name=event_1]").bind({
        mouseover: function () {
            $("ul").css("display", "none");
        },
        mouseout: function () {
            $("ul").css("display", "block");
        }
    });
});
</script>

二：复合事件

1.hover()方法：用于模拟鼠标指针悬停事件

<script type="text/javascript">
$(document).ready(function() {
    $("#myaccound").hover(function(){
              $("#menu_1").css("display","block");
          },
          function(){
              $("#menu_1").css("display","none");
          }
    );
});
 
</script>
</head>
<body>
 <div id="nav">
     <ul>
        <li class="fli"><a href="#">我的订单</a></li>
        <li class="fli" id="myaccound">
            <a href="#">我的宜美惠▼</a>
            <ul id="menu_1" style="display:none;">
                <li><a href="#">我的优惠券</a></li>
                <li><a href="#">收藏夹</a></li>
                <li><a href="#">短信息</a></li>
            </ul>
        </li>
        <li class="fli"><a href="#">我网站导航▼</a></li>
    </ul>
 </div>

toggle()方法：模拟鼠标连续click事件

<script type="text/javascript">
$(document).ready(function () {
         $("body").toggle(
            function () {
                $(this).show();
                $(this).css("background-color", "red");
                 
            },
            function () {
                $(this).css("background-color", "green"); 
            },
            function () {
                $(this).css("background-color", "blue"); 
            }
     );
});
 
</script>
</head>
<body>
    点击body
</body>

二、动画

1.控制元素显示和隐藏

语法：$(selector).show/hide([speed],[callback])

speed:隐藏的速度（可能值：毫秒如：1000）

callback:隐藏后调用的函数。

2.控制元素的淡入（fadein()）淡出(fadeout())

语法：$(selector).fadein/fadeout([speed],[callback])

<script type="text/javascript">
    $(document).ready(function() {
       $("input[name=fadein_btn]").click(function(){
            $("img").fadeIn("slow");
       });
           $("input[name=fadeout_btn]").click(function(){
                $("img").fadeOut(1000);
       });
    });


</script>
</head>
<body> 

<img src="images/ad.jpg"  style="display:none;" />
<input name="fadein_btn" type="button" value="淡入" /> 
<input name="fadeout_btn" type="button" value="淡出" /> 
</body>

3.控制元素的高度（上拉（slideup())下伸(slidedown()))

script type="text/javascript">
    $(document).ready(function() {
        $("h2").click(function(){
            $(".txt").slideUp("slow");
            $(".txt").slideDown("slow");
           });

    });
</script>
</head>
<body> 
    <div id="box">
      <h2>窗边的小豆豆</h2>
      <div class="txt">
        <p>本书讲述了作者上小学的一段真实的故事。</p>
        <p>作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。</p>
        <p>这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p>
      </div>
    </div> 
</body>

好了，今天的了解就到这里，希望对你们的学习有所帮助，下次再见！！！