jquery动画与事件案例-阿里云开发者社区

jquery动画与事件案例

2022-11-27 89

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jquery动画与事件案例

<!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>

jquery动画与事件案例

热门文章

最新文章

相关课程

相关电子书