2021-02-27

jquery第七章

**

jQuery中的时间与动画

**
一，Jquery中的事件。
1.jquery中，事件总体分为两大类，基础事件和复合事件。
（1）.基础事件
语法：事件名=“函数名()”；
或者
DOM对象.事件名=函数；
在 JavaScript 课程的学习中，我们掌握了很多使用的事件，常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。那么，还有更多的事件可以参考 手册中的事件部分。
为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。我 们称它为简写事件。

简写事件绑定方法

方法名

触发条件

描述

click(fn)

鼠标

触发每一个匹配元素的 click(单击)事件

dblclick(fn)

鼠标

触发每一个匹配元素的 dblclick(双击)事件

mousedown(fn)

鼠标

触发每一个匹配元素的 mousedown(点击后)事件

mouseup(fn)

鼠标

触发每一个匹配元素的 mouseup(点击弹起)事件

mouseover(fn)

鼠标

触发每一个匹配元素的 mouseover(鼠标移入)事件

mouseout(fn)

鼠标

触发每一个匹配元素的 mouseout(鼠标移出)事件

mousemove(fn)

鼠标

触发每一个匹配元素的 mousemove(鼠标移动)事件

mouseenter(fn)

鼠标

触发每一个匹配元素的 mouseenter(鼠标穿过)事件

mouseleave(fn)

鼠标

触发每一个匹配元素的 mouseleave(鼠标穿出)事件

keydown(fn)

键盘

触发每一个匹配元素的 keydown(键盘按下)事件

keyup(fn)

键盘

触发每一个匹配元素的 keyup(键盘按下弹起)事件

keypress(fn)

键盘

触发每一个匹配元素的 keypress(键盘按下)事件

unload(fn)

文档

当卸载本页面时绑定一个要执行的函数

resize(fn)

文档

触发每一个匹配元素的 resize(文档改变大小)事件

scroll(fn)

文档

触发每一个匹配元素的 scroll(滚动条拖动)事件

focus(fn)

表单

触发每一个匹配元素的 focus(焦点激活)事件

blur(fn)

表单

触发每一个匹配元素的 blur(焦点丢失)事件

focusin(fn)

表单

触发每一个匹配元素的 focusin(焦点激活)事件

focusout(fn)

表单

触发每一个匹配元素的 focusout(焦点丢失)事件

select(fn)

表单

触发每一个匹配元素的 select(文本选定)事件

change(fn)

表单

触发每一个匹配元素的 change(值改变)事件

submit(fn)

表单

触发每一个匹配元素的 submit(表单提交)事件

注意：这里封装的大部分方法都比较好理解，我们没必要一一演示确认，重点看几个需

要注意区分的简写方法。

.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外 一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有 什么区别呢？手册上的说明是：.mouseenter() 和.mouseleave()这组穿过子元素不会触发， 而.mouseover()和.mouseout()则会触发。

//HTML 页面设置

//mouseover 移入

$(‘div’).mouseover(function () { //移入 div 会触发，移入 p 再触发

$(‘strong’).html(function (index, value) {
return value+‘1’;

});

});

//mouseenter 穿过

$(‘div’).mouseenter(function () { //穿过 div 或者 p

$(‘strong’).html(function (index, value) { //在这个区域只触发一次

return value+‘1’;

});

});

//mouseout 移出

$(‘div’).mouseout(function () { //移出 p 会触发，移出 div 再触发

$(‘strong’).html(function (index, value) {
return value+‘1’;

});

});

//mouseleave 穿出

$(‘div’).mouseleave(function () { //移出整个 div 区域触发一次

$(‘strong’).html(function (index, value) {
return value+‘1’;

});

});

.keydown()、.keyup()返回的是键码，而.keypress 返回的是字符编码。

$(‘input’).keydown(function (e) {
alert(e.keyCode); //按下 a 返回 65

});

$(‘input’).keypress(function (e) {
alert(e.charCode); //按下 a 返回 97

});

注意：e.keyCode 和 e.charCode 在两种事件互换也会产生不同的效果，除了字符还有一 些非字符键的区别。更多详情可以了解 JavaScript 事件处理那章。

.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()

和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

//HTML 部分

//focus 光标激活

$(‘input’).focus(function () { //当前元素触发

$(‘strong’).html(‘123’);

});

//focusin 光标激活

$(‘div’).focusin(function () { //绑定的是 div 元素，子类 input 触发

$(‘strong’).html(‘123’);

});

注意：.blur()和.focusout()表示光标丢失，和激活类似，一个必须当前元素触发，一个可 以是子元素触发。

三．复合事件

jQuery 提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功 能、智能加载等。

复合事件

方法名

描述

ready(fn)

当 DOM 加载完毕触发事件

hover([fn1,]fn2)

当鼠标移入触发第一个 fn1，移出触发 fn2

toggle(fn1,fn2[,fn3…])

已废弃，当鼠标点击触发 fn1,再点击触发 fn2…

//背景移入移出切换效果

$(‘div’).hover(function () {
$(this).css(‘background’, ‘black’); //mouseenter 效果

}, function () {
$(this).css(‘background’, ‘red’); //mouseleave 效果，可省略

});

注意：.hover()方法是结合了.mouseenter()方法和.mouseleva()方法，并非.mouseover()

和.mouseout()方法。

.toggle()这个方法比较特殊，这个方法有两层含义，第一层含义就是已经被 1.8 版废用、

1.9 版删除掉的用法，也就是点击切换复合事件的用法。第二层函数将会在动画那章讲解到。 既然废弃掉了，就不应该使用。被删除的原因是：以减少混乱和提高潜在的模块化程度。

但你又非常想用这个方法，并且不想自己编写类似的功能，可以下载 jquery-migrate.js

文件，来向下兼容已被删除掉的方法。

//背景点击切换效果(1.9 版删除掉了)

$(‘div’).toggle(function () { //第一次点击切换

$(this).css(‘background’, ‘black’);

}, function () { //第二次点击切换

$(this).css(‘background’, ‘blue’);

}, function () { //第三次点击切换

$(this).css(‘background’, ‘red’);

});
二，jquery中的动画
(一). show()方法和hide()方法
show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为"none"
//用如下代码隐藏element元素
$(“element”).hide();

//与用css()的方法设置display属性效果相同
$("element").css("display","none");

1
2
3
4
5
当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态(“block"或"inline"或其它除了"none"之外的值)
$(“element”).show();
1
通过show()和hide()方法可以控制"内容"的显示和隐藏
hide()方法在将"内容"的display属性值设置为"none"之前，会记住原先的display属性值(“block"或"inline"或其它除了"none"之外的值)。当调用show()方法，就会根据hide()方法记住的display属性值来显示元素
$().ready(function(){
$(”#panel h5.head”).bind(“mouseover”,function(){
$(this).next().show();
}).bind(“mouseout”,function(){
$(this).next().hide();
})
})
//当光标滑过的时候，就触发事件
//光标滑过标题后，相应的内容将被显示；滑出标题后，相应的内容则被隐藏
/“内容"的display属性的值是"block”，当单击"标题"连接执行hide()方法的时候，hide()方法会做两步动作，首先记住"内容"的display属性的值"block"，然后把display属性的值设置为"none"/
1
2
3
4
5
6
7
8
9
10

(二). show()方法和hide()方法让元素动起来
show()方法和hide()方法在不带任何参数的情况下，相当于css(“display”,“none/block/inline”),作用是立即隐藏或显示匹配的元素，不会有任何动画
如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数
指定一个速度关键字或者为显示速度指定一个数字（单位是毫秒）
$(“element”).show(“slow”);
1
$().ready(function(){
$("#panel h5.head").hover(function(){
$(this).next().hide(600);
},function(){
$(this).next().show(600);
})；
/从代码执行过程中，可以发现hide(600)方法会同时减少"内容"的高度、宽度和不透明度，直至这3个属性的值都为0，最后设置该元素的CSS规则为"display:none"/
/同理，show(600)方法则会从上到下增大"内容"的高度，从左到右增大"内容"的不透明度，直至新闻的内容完全显示/
})
1
2
3
4
5
6
7
8
9

二、fadeIn()方法和fadeOut()方法
与show()方法不同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度
fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(“display:none”);fadeIn()方法则相反
$().ready(function(){
$("#panel h5.head").hover(function(){
$(this).next().fadeIn(“slow”);
},function(){
$(this).next().fadeOut(“slow”);
});
/如果只想改变"内容"的不透明度，就可以使用fadeOut()方法/
})
————————————————
版权声明：本文为CSDN博主「杏仁璐」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41218152/article/details/82805727