使用jQuery快速高效制作网页交互特效、第七章

d.z(h)_9.9

于 2021-03-02 20:40:07 发布

阅读量410

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/cdx_xingxingxing/article/details/114292109

版权

一：基础事件
常用的基础事件有鼠标事件、键盘事件、window事件、表单事件
语法：

事件名="函数名()";
或者
DOM 对象.事件名=函数;

1、载入事件
所谓载入事件，就是window事件的一种，window事件表示当用户执行某些会影响浏览器的操作时，而触发的事件。
2、鼠标事件
当用户在文档上移动或者单击鼠标时而产生的事件

在这里插入图片描述
mouseenter()和mouseover()区别：

mouseover():鼠标指针进入被选元素时会触发mouseover事件，如果鼠标指针在其被选元素的子元素上来回进入时也会触发mouseover事件。
mouseenter():鼠标指针进入被选元素时会触发mouseenter事件，如果鼠标指针在其被选元素的子元素上来回进入时不会触发mouseenter事件。

mouseout()和mouseleave()区别：

mouseout():鼠标指针进入被选元素时会触发mouseout事件，如果鼠标指针在其被选元素的子元素上来回进入时也会触发mouseout事件。
mouseleave():鼠标指针进入被选元素时会触发mouseleave事件，如果鼠标指针在其被选元素的子元素上来回进入时不会触发mouseleave事件。

3、键盘事件
在这里插入图片描述
4、浏览器事件
在调整窗口大小时，页面会有一些变化，这些都是通过JQuery中的resize()方法触发resize事件，进而处理相关函数，来完成页面的一些特效的。
语法：
$(selector).resize();

二：绑定与移除事件
1、绑定事件
语法：

bind(type,[data],fn)

在这里插入图片描述
①绑定单个事件
语法:

$(selector).bind(事件类型,function(){
	代码
});

②绑定多个事件
语法：

$(selector).bind({事件类型:function(){
	代码
	},事件类型:function(){
		代码
		}
})；

2、移除事件
语法：

unbind([type],[fn])

三：复合事件
1、hover()方法

用于模拟鼠标指针移入和移出事件，当鼠标指针移至元素上时，会触发指定的第一个函数(enter)；当鼠标指针移出这个元素时，会触发指定的第二个函数(leave)，该方法相当于mouseenter和mouseleave事件的组合。

语法：

hover(enter,leave);

2、toggle()方法

toggle()分为带参数的方法和不带参数的方法；带参数的方法用于模拟鼠标连续click事件。第一次单击元素，触发指定的第一个函数(fn1);当再次单击同一个元素时，则触发指定的第二个元素(fn2);如果有更多函数，依次触发，直到最后一个。随后的每次单击都重复对这几个函数轮番调用。

语法：

toggle(fn1,fn2,...,fnN);

语法：

toggle();

3、toggleClass()

语法：

toggleClass(className);

四：控制元素显示与隐藏
1、控制元素显示
show()除了可以控制元素的显示外，还能定义显示元素时的效果，如显示速度。
语法：

$(selector).show([speed],[callback])

在这里插入图片描述
2、控制元素隐藏
hide()除了可以控制元素的隐藏外，还能定义隐藏元素时的效果，如隐藏速度。
语法：

$(selector).hide([speed],[callback])

五：改变元素的透明度
1、控制元素淡入
如果元素是隐藏的，则可以使用fadeln()方法控制元素淡入，可以定义元素淡入时的效果，如显示速度。
语法：

$(selector).fadeIn([speed],[callback])

fadeIn()方法的参数说明

参数	描述
speed	可选。规定元素从隐藏带完全可见的速度。默认为“0”。可能值：毫秒（如1000）、slow、normal、fast。在设置速度的情况下，元素从隐藏带完全可见的过程中，会逐渐地改变其透明度，给视觉以淡入的效果
callback	可选。fadeIn函数执行完之后，要执行的函数。除非设置了speed参数，否则不能设置该参数

2、控制元素淡出
与fadeIn()方法对应的时fadeOut()方法，它们经常结合使用，该方法除了控制元素淡出外，还能定义显示元素时的效果，如淡出速度。
语法：

$(selector).fadeOut([speed],[callback])

其参数设置方式与fadeIn()方法相同。

六：改变元素高度
若元素的display属性值为none，当调用slideDown()方法时，这个元素会从上向下延伸显示，而slideUp()方法正好相反，元素从上到下缩短直至隐藏
语法：

$(selector).slideUp([speed],[callback])
$(selector).slideDown([speed],[callback])

其参数设置方式与fadeIn()方法相同。

七：自定义动画
语法：

$(selector).animate({params},speed,callback)

关注