jQuery（事件和动画-事件绑定移除、动画）

全栈开发日记

发布于 2022-05-12 13:01:02

2.4K00

代码可运行

文章被收录于专栏：全栈开发日记全栈开发日记

运行总次数：0

代码可运行

事件绑定和移除

在js中的函数调用的方式

①事件调用(onclick="")

<input type="button"value="show" onclick="fun1()"><input type="button"value="show" onclick="fun1()">

②直接在js中调用

<script>
    fun1();
</script>

③函数调用

<script>
  function a(){}
  function b(){
      a();
  }
</script>

使用匿名函数来表示事件

代码：

//onload body 
<script>
window.onload=function(){
  //所写的业务逻辑会在window.load事件被触发时调用
}

<!--jquery中也可以加载window load事件(jquery3.x没有效果)-->
$(window).load=function(){
    alert('$window.load')
}
</script>

jQuery新增事件

推荐将新增事件放置在ready事件中，保证你在添加事件时能够选择到元素。

作用：给选中的元素绑定事件。

$(function(){
  $(selector).event(function(){
    //event是jquery的基础事件，单击写click,双击dbclick
    //this可以获取到当前元素的js对象
  })
})

动态绑定事件

不需要一定放置在ready事件中。

作用：给选中的元素绑定事件。

$(选择器).bind('event',function(){
  //event是js的基本时间
  //this可以获取当前元素的js对象
})

移除绑定事件

作用：将click等基础事件移除。

$(selector).unbind('event');

注意：jquery大多数元素的事件都会使用新增事件或动态绑定的方式添加。

动画

animat

$(selector).animate(params,speed,fn);

参数属性：

①params：一组包含作为动画属性和终值的样式属性和及其值的集合（动画的目标样式）；

②speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)；

③fn:在动画完成时执行的函数，每个元素执行一次；

jQuery代码书写示例：

function fun2() {
  $("#b").animate({left:"200"},500,function () {
      alert("移动完成");
  })
}

让指定元素左右移动

$("#right").click(function(){
  $(".block").animate({left: '+50px'}, "slow");
});

$("#left").click(function(){
  $(".block").animate({left: '-50px'}, "slow");
});