jQuery事件&动画

最新推荐文章于 2022-09-21 19:08:34 发布

nncwww

最新推荐文章于 2022-09-21 19:08:34 发布

阅读量56

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/nncwww/article/details/123693629

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery方式 1执行时间:网页绘制完成后，执行

2:编写个数多个

事件传播（事件冒泡）传播小--中--大

阻止传播：事件后面加上return false

事件坐标

offsetX:当前元素左上角

clientx窗口左上角

pagex:网页左上角

动画效果

基本：show（Time）

隐藏hide（Time）

切换：toggle（Time）

接下来是代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #aa {
               width: 200px;
               height: 200px;
               background-color: yellow;
           }
       </style>
       <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
       <script type="text/javascript">
           /* jQuery第四次课 */

           /* 一、事件 */
           //1.1 加载DOM两种方式(区别)
           //只能写一个多给会被覆盖

           //            window.οnlοad=function(){
           //                console.info("js方式1");
           //            }
           //            window.οnlοad=function(){
           //                console.info("js方式2");
           //            }
           //            window.οnlοad=function(){
           //                console.info("js方式3");
           //            }
           //可以写多个都会被执行
           /* $(function(){
               console.info("jQuery方式1")
           })
           $(function(){
               console.info("jQuery方式2")
           })
           $(function(){
               console.info("jQuery方式3")
           }) */

           $(function() {
           //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
           //--元素.on/bind()
           /* $("#aa").on("click",function(){
               alert("哈哈哈");
           }); */
           /* $("aa").bind("mouseover",function(){
               alert("小胖");
           */
           })
           /* $("aa").mouseover(function(){
                   alert("哈哈");
               */
           })

           //--元素.事件名
           /* $("#aa").click(function(){
               alert("hh")
           } */
           )

           //1.3 合成事件/事件切换
           //--hover()悬停控制元素[div]的显示和隐藏
           /* $("aa").hide();//隐藏
           $("a").hover(function(){
               $("#aa").show();//显示
           },function(){//鼠标移出事件
           $("#aa").hide();//隐藏
           )} */
           //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
           /* $("aa").hide();//隐藏
           $("a").toggle(function(){
               $("#aa").show();//显示
           },function(){
               $("aa").hide();//隐藏
           }) */
           //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
           /* $("#aa").hide();//隐藏
               $("a").toggle(function(){
                   $("#aa").show();//显示
               },function(){
                   $("aa").hide();//隐藏
               }) */

// $("#aa").toggle(1000);//1S

           //1.4 事件的传播(事件冒泡) 小p->中div->大body
           //依次添加点击事件
           $("p").click(function() {
               console.info("p被点击了")
           })
           $("div").click(function() {
               console.info("div被点击了")
               return false; //阻止传播
           })
           $("body").click(function() {
               console.info("body被点击了")
           })
           //1.5 事件event的坐标[了解即可 pageX,pageY]
           /* $("#aa").on("click",function(e){
                   console.info(e.pagex,e.pageY);
               }) */

           //1.6 事件的移除
           //--按钮只能点击一次[2]
           /* $("#btn").click(function(){
               console.info(44944);//做一系列事情
               //将该点击事件移出 off
               $("#btn").unbind("click");
               //将按钮禁用
               $("#btn").prop("disabled",true);
           }) */

           //一次点击事件
           /* $("#btn").one(function(){
               console.info(44944);
               //将按钮禁用
               $("#btn").prop("disabled",true);
           }) */
           //--按钮点击偶数次可行奇数次不行
           /* var i =1;
               $("#btn").click(function(){
                   if(i%2==0){//偶数次
                       console.info(44944,1);
                   }
                   i++;
               }) */

           /* 二、动画 */
           //2.1 基本动画 [回调函数]
           /* $("#aa").hide();//默认隐藏
           $("xx").click(function(){
               $("#aa").show(1000,function(){
                   //会调函数
                   alert("菜鸡")
               });//1秒
           })
           $("#yy").click(function(){
               $("#aa").hide(2000);//2秒
           })
           $("#zz").click(function(){
               $("#aa").hide(1000);//1秒
           })
           */
           //2.2 滑动动画
$("#aa").hide(); //默认隐藏
$("#xx").click(function() {
   $("#aa").slideDown(1000); //1秒
})
           $("#yy").click(function() {
$("#aa").slideUp(2000); //2秒
})
$("#zz").click(function() {
   $("#aa").slideToggle(1000); //1秒
})

           //2.3 淡入淡出(透明度)
           $("#aa").hide(); //默认隐藏
           $("#xx").click(function() {
               $("#aa").fadeIn(1000); //1秒
           })

           $("#yy").click(function() {
               $("#aa").fadeOut(1000); //1秒
           })

           $("#zz").click(function() {
           $("#aa").fadeToggle(1000); //1秒
           })
           //2.4 自定义动画
           //--缩放
           /* $("#bb").on("click",function(){
               $("#aa").animate({
                   width:100;
                   height:300;
               },1000);
           }) */
           //--移动[2]
$("#bb").click(function(){
               $("#aa").animate({
                   left:110,
                   top:100
               },2000)
           })

           //在自身基础上移动
           $("#bb").click(function(){
               $("#aa").animate({
                   left:"+=4",
                   top:"+=10"
               },100)
           })

           })
       </script>
   </head>
   <body>
       <a style="text-decoration: none;" href="#">显示</a>
       <input type="button" value="点我试试" id="btn" />
       <button id="xx">显示</button>
       <button id="yy">隐藏</button>
       <button id="zz">显示/隐藏</button>
       <div id="aa"></div>
       <br />
       <br />
       <p>这是一巴掌</p>
   </body>
</html>