jquery中的事件和动画

第一步毋庸置疑，引入jquery.js

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

jQuery中的事件

针对下面的代码（点击标题，找到内容元素；如果内容显示，则隐藏；如果内容隐藏，则显示）

<div id="panel">
    <div class="head">什么是jquery?</div>
    <div class="content-text">最常用的选择器，主要通过id,class,标签等查找dom元素。每个ID名称只能用一次，class允许重复使用。</div>
</div>

——事件绑定

//事件类型：blur focus load click mousedown change select submit......
$(function(){
    $("#panel .head").bind('click',function(){
        $(this).next().show();
    })
})

//加强效果

$(function(){
    $("#panel .head").bind('click',function(){
        //加强效果 如果内容显示
      if($(this).next().is(":visible")){
          $(this).next().hide();
      }else{
          $(this).next().show();
      }
    })
})

//代码优化 $(this).next()被使用多次，建议定义局部变量

$("#panel .head").bind('click',function(){
    var $content=$(this).next()
  if($content.is(":visible")){
      $content.hide();
  }else{
      $content.show();
  }
})

//简写绑定事件

$(function(){
    $("#panel .head").onmouseover(function(){
        $(this).next().show();
    }).onmouseout(function(){
        $(this).next().hide();
    })
})

——合成事件

jquery中有两个合成事件——hover()方法和toggle()方法。

//hover()方法

$(function(){
    $("#panel .head").hover(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();
    })
})

//toggle()方法

$(function(){
    $("#panel .head").toggle(function(){
        $(this).next().show();
    },function(){
        $(this).next().hide();
    })
})

——事件冒泡

事件会按照dom的层次节后像水泡一样不断向上直至顶端。

<div id="content">
    外层div
    <span>内层span元素</span>
    外层div元素
</div>
<div id="msg"></div>

<script>
    $(function(){
        //span元素绑定click
       $("span").click(function(){
           var text=$("#msg").html()+"<p>内层span元素被单击</p>";
           $("#msg").html(text)
       })
        //div元素绑定click
        $("#content").click(function(){
            var text=$("#msg").html()+"<p>外层div被单击</p>";
            $("#msg").html(text)
        })
        // body元素绑定click
        $("body").click(function(){
            var text=$("#msg").html()+"<p>body被单击</p>";
            $("#msg").html(text)
        })
    })
</script>

当单击span元素，会出发span元素的点击事件，会输出三条记录。单击span的同时，也单击包含了span元素的div元素和包含div元素的body，并且每一个元素都会按照特定的顺序响应click事件。

冒泡过程：

——移除事件

unbind(时间类型，要移除的函数)

<button id="btn">单击按钮</button>
<button id="delAll">移除按钮</button>
<div id="test"></div>

同一个元素绑定多个事件：

$("#btn").bind('click',function(){
    $("#test").append("<p>我的绑定函数1</p>")
}).bind('click',function(){
    $("#test").append("<p>我的绑定函数2</p>")
}).bind('click',function(){
    $("#test").append("<p>我的绑定函数3</p>")
});

//删除所有元素的click

 $("#delAll").click(function(){
            $("#btn").unbind("click")
 })

//移除其中的一个方法

 $("#btn").bind('click',myfun1=function(){
    $("#test").append("<p>我的绑定函数1</p>")
 }).bind('click',myfun2=function(){
    $("#test").append("<p>我的绑定函数2</p>")
 }).bind('click',myfun3=function(){
    $("#test").append("<p>我的绑定函数3</p>")
 });

 $("#delAll").click(function(){
    $("#btn").unbind("click",myfun2)
 })

jQuery中的动画

——show()和hide()，与设置属性dispalye为block/none对应

——fadeIn方法和fadeOut方法，淡入和淡出

——slideUp方法和slideDown方法，下拉和收起

注意：jQuery中的任何动画，都可以指定三种速度参数：slow,normal,fast(事件长度分别为0.6s,0.4s,0.2s)，当使用关键字要加引号,比如show("slow");如果用梳子作为时间参数就不需要加引号，比如show(1000)

——自定义动画animate()

animate(params,speed,callback)

• params:一个包含样式及属性的映射
• speed：速度，可选
• callback：在动画完成执行的函数，可选。

 停止动画stop()

形如：

$("#panel").hover(function(){
  $(this).stop().animate({height:"150",width:"300"},200)
},function(){
  $(this).stop().animate({height:"22",width:"60"},300)
})

判断是否处于动画状态

if(!$(this).is(":animated")){
    //如果当前没有进行动画，则添加新动画
}

延迟动画

.delay(1000)

——其他动画方法

• toggle(speed,[callback])
• slideToggle()
• fadeTo()
• fadeToggle()

 

总结

方法名	说明
show()和hide()	同时修改多个样式属性即高度、宽度、不透明度
fadeIn()和fadeOut()	只改变不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
toggle(speed,[callback])	用来代替show()和hide()，所以会同时修改多个样式属性即高度、宽度、不透明度
slideToggle()	用来代替slideUp()和slideDown()，所以只能改变高度
fadeToggle()	用来代替fadeIn()和fadeOut()，所以只改变不透明度
animate()	属于自定义动画