前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery(事件和动画-事件绑定移除、动画)

jQuery(事件和动画-事件绑定移除、动画)

作者头像
全栈开发日记
发布2022-05-12 21:01:02
2.3K0
发布2022-05-12 21:01:02
举报
文章被收录于专栏:全栈开发日记全栈开发日记

事件绑定和移除

在js中的函数调用的方式

①事件调用(onclick="")

代码语言:javascript
复制
<input type="button"value="show" onclick="fun1()"><input type="button"value="show" onclick="fun1()">

②直接在js中调用

代码语言:javascript
复制
<script>
    fun1();
</script>

③函数调用

代码语言:javascript
复制
<script>
  function a(){}
  function b(){
      a();
  }
</script>

使用匿名函数来表示事件

代码:

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

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

jQuery新增事件

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

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

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

动态绑定事件

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

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

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

移除绑定事件

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

代码语言:javascript
复制
$(selector).unbind('event');

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

动画

animat

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

参数属性:

①params:一组包含作为动画属性和终值的样式属性和及其值的集合(动画的目标样式);

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

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

jQuery代码书写示例:

代码语言:javascript
复制
function fun2() {
  $("#b").animate({left:"200"},500,function () {
      alert("移动完成");
  })
}

让指定元素左右移动

代码语言:javascript
复制
$("#right").click(function(){
  $(".block").animate({left: '+50px'}, "slow");
});

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

注意:

可以用stop();方法来停止动画;

也可以通过上面的绑定或解除事件来停止;如

show(); hide(); fadeIn(); fadeOut(); slideUp(); slideDown();

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈开发日记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 事件绑定和移除
  • 动画
    • 让指定元素左右移动
      • 注意:
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档