[jQuery] 事件和动画详解

2020-05-17 06:27:48易采站长站整理

$("#delAll").click()(
$("#btn").unbind("click");
);

one()方法的结构与bind()方法类似,使用方法也与bind()方法相,语法结构如下:


one(type[,data],fn);

使用one()方法为元素帮定事件后,只在第一次触发时执行,之后毫无作用。

 1.7 模拟操作

有时需要通过模拟用户操作,来达到单击效果,可以使用trigger()方法完成,例如:


$("#btn").trigger("click");

也可以直接用简化写法click()来达到同样的效果。

trigger(type[,data])方法有两个参数,第二个参数是要传递给事件处理函数的附加数据,以数组形式传递。

trigger()方法触发事件后,会执行浏览器默认操作,例如:


$("input").trigger("focus");

以上代码不仅会触发focus事件,也会使input元素本身得到焦点,如果不想执行浏览器默认操作,可以使用另一个类似的方法triggerHandler()方法。

 2. 动画

 2.1 show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的动画方法。为一个元素调用hide()方法,会将该元素的display样式改为”none”,例如:


$("#mydiv").hide();

当把元素隐藏后,可以使用show()方法将元素的display样式设置为先前的显示状态,例如:


$("#mydiv").show();

show()方法可以指定一个速度参数,例如,指定一个速度关键字”slow”,例如:


$("#mydiv").show("slow");

运行该代码后,元素将在600毫秒内慢慢显示,其他的速度关键字还有”normal”和”fast”,不仅如此,还可以为显示速度指定一个数字,单位是毫秒。

 2.2 fadeIn()方法和fadeOut()方法

与show()方法不同的时,fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定时间内降低元素的不透明度,直到元素完全消失。fadeIn()方法则相反,例如:


$("#mydiv").fadeOut();

2.3 slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为”none”,当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由下到上缩短隐藏,例如:


$("#mydiv").slideDown();

2.4 自定义动画方法animate()

如果需要采取一些高级的自定义动画来解决更多控制的问题,可以使用animate()方法来自定义动画,语法结构为: