1.jQuery中的事件

1.1 事件的组成

1.2 基础事件

2.载入事件

3.鼠标事件

4.键盘事件

5.浏览器事件

6.表单事件

7.绑定事件

8.移除事件

9.复合事件

10.控制元素显示与隐藏

11.改变元素的透明度

12.改变元素的高度

13.自定义动画

本章总结

1.jQuery中的事件

在jQuery中事件总共分为两大类；基础事件和复合事件。jQuery中的简单事件，与javaScript中的事件几乎一样，都含有鼠标事件，键盘事件，裁件事件等，只是其对应的方法名称有略微不同，复合事件则是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。

1.1 事件的组成

1.第一部分$("#button"):表示事件主体。

2.第二部分click:表示事件的类型，如click为鼠标单击事件。

3.第三部分function(){}:表示事件处理函数。

1.2 基础事件

根据触发事件的类型，jQuery事件可以划分为载入事件丶鼠标事件丶键盘事件丶浏览器事件和表单事件。

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

2.载入事件

所谓载入事件，也就是window事件表示当用户执行某些会影响浏览器的操作时，而触发的事件。例如，打开网页时加载页面，关闭窗口，调节窗口大小，移动窗口等操作引发的事件处理。在jQuery中，常用的window事件有文档载入事件，它对应的方法是ready()。

3.鼠标事件

鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时而产生的事件。

从表中可以看到，jQuery中的事件的方法名称与javaScript的事件方法名称不一样，如单击事件，在javascript中写作onclick，而在jQuery中为click；鼠标指针移至元素上事件，在javascript中写作onmouseover，在jQuery中写作mouseover，

示例：使用jQuery事件鼠标指针移至导航上时，当前导航背景颜色变化；鼠标指针离开导航时，背景颜色恢复，代码如下：

<body><div class="top"><div class="wrap"><div class="top-l left">欢迎光临当当，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div><ul class="top-m right"><li><a href=""><i class="top-car left"></i>购物车</a></li><li class="line"></li><li><a href="">我的订单</a></li><li class="line"></li><li><a href="">当当自出版</a></li><li class="line"></li><li><a href=""><i class="top-tel left"></i>手机当当</a></li><li class="line"></li><li><a href="" class="menu-btn">我的当当</a></li><li class="line"></li><li><a href="" class="menu-btn">企业采购</a></li><li class="line"></li><li><a href="" class="menu-btn">客户服务</a></li><li class="line"></li></ul><div class="clearfix"></div></div></div><div class="wrap"><a href=""><img src="data:images/logo.jpg"/></a></div><div class="nav-box"><div class="wrap"><ul class="nav-ul"><li class="all"><a href="">全部商品详细分类</a></li><li><a href="">尾品会</a></li><li><a href="">图书</a></li><li><a href="">电子书</a></li><li><a href="">服装</a></li><li><a href="">运动户外</a></li><li><a href="">婴孕童</a></li><li><a href="">家具</a></li><li><a href="">当当优品</a></li><li><a href="">电器城</a></li><li><a href="">当当超市</a></li><li><a href="">海外购</a></li><div class="clearfix"></div></ul></div></div><script src="js/jquery-1.12.4.js"></script><script>$(function(){/*鼠标指针移至导航上时背景颜色加深*/$(".nav-ul a").mousemove(function(){$(this).css("background-color","#f01e28");});$(".nav-ul a").mouseout(function(){$(this).css("background-color","#ff2832");});});</script></body>

在方法内部，this指向调用这个方法的DOM对象，在上述代码中，this正好代表#nav a元素。

在Web应用中，鼠标事件非常重要，它们在改善用户体验方法功不可没。鼠标事件常常被用于网站导航，下拉菜单，选项卡，轮播广告和网页组件的交互制作中。

4.键盘事件

键盘事件指当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键时都会产生事件。常用的键盘事件有keydown，keyup和keypress。

keydown事件发生在键盘被按下的时候，keyup事件发生在键盘被释放的时候，在keydown和keyup之间会触发另外一个事件——keypress事件。当按下键重复产生字符时，在keyup事件之前可能产生很多keypress事件。keypress是较为高级的文本事件，它的事件对象指定产生的字符，而不是按下的键。所以浏览器都支持keydown，keyup和keypress事件，常用的键盘事件方法如表所示。

示例：在密码框中输入内容时将激发三个键盘事件，并把发生的事件的内容显示在页面中，

<body>
<fieldset><legend>会员登录</legend><dl><dt>用户名：</dt><dd><input id="userName" type="text" /></dd></dl><dl><dt>密码：</dt><dd><input id="password" type="password" /></dd></dl><dl><dt></dt><dd><input type="submit" value="登 录" /> </dd></dl><span id="events"></span>
</fieldset>
<script src="js/jquery-1.12.4.js"></script>
<script>$(function(){$("[type=password]").keyup(function(){$("#events").append("keyup");}).keydown(function(e){$("#events").append("keydown");}).keypress(function(){$("#events").append("keypress");});$(document).keydown(function(event){if(event.keyCode==13){ //按Enter键alert("确定要提交吗？")}});});
</script>
</body>

从键盘事件的方法中，可以获取当前按键的值（keyCode），识别按下了哪个键。以上示例展示了这种用法，需要注意所用的方法中要定义一个参数，表示当前的事件对象。另外从该示例中可以看出，这三个键盘事件的执行顺序依次是keydown，keypress，keyup。

5.浏览器事件

在浏览网页时，大家经常会调整浏览器窗口大小，在调整窗口大小或拖动滚动条。如果在调整过程中执行特定操作，可以使用jQuery提供的浏览器事件。

jQuery中常用的浏览器事件方法

方法	描述	执行时机
resize([function])	将事件处理函数附加到resize事件	浏览器窗口尺寸发生改变时
scroll([function])	将事件处理函数附加到scroll事件	滚动条或可滚动的元素滚动时

6.表单事件

表单在网页中主要负责，如登录丶注册丶问卷调查和论坛发帖等页面，都离不开表单。

常用的表单事件方法

方法	描述	执行时机
focus([function])	将事件处理函数附加到focus事件	元素获得焦点时
blus([function])	将事件处理函数附加到blus事件	元素失去焦点时
change([function])	将事件处理函数附加到change事件	元素的值发生改变时
submit([function])	将事件处理函数附加到submit事件	submit事件只适用于<form>元素，当提交表单是触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.js"></script><style>#a{width: 300px;height: 300px;background-color: yellow;}#b{width: 300px;height: 300px;background-color: red;border-radius: 50%;position: relative;}</style>
</head>
<body>
<button id="bt1">点我啊</button><input type="text" id="name">
<form><button type="submit" id="submit">提交</button>
</form>
<div id="a"></div>
<button id="op">点我显示</button>
<button id="cl">点我消失</button><div id="b"></div>
<button id="o">第三种绑定事件</button></body>
<script>$(function () {//第二种 主动添加事件//鼠标事件$("#bt1").mousemove(function () {alert(111);})//输入框 带有输入性质的 或者整个 网页//键盘事件 按键对应akec码//keydown 键盘按下事件  keyup 键盘释放事件  keypress 产生可打印字符时// $("body").keyup(function (event) {//     //如何实现检测你按的是那个键//     if(event.keyCode==37){//         alert("往左移动！")//     }else if(event.keyCode==38){//         alert("往上移动！")//     }else if(event.keyCode==39){//         alert("往右移动！")//     }else if(event.keyCode==40){//         alert("往下移动！")//     }// });//表单事件//focus元素获得焦点时  blur元素失去焦点时  change元素的值发生改变时  submit表单提交事件$("input").val("请输入留言");         //初始化值$("input").focus(function (){       //当输入框获取焦点var ly= $("input").val();if(ly=="请输入留言"){            //且输入框内容等于请输入留言时改为空$("input").val("");}})$("input").blur(function (){        //当输入框失去焦点var ly= $("input").val();if(ly==""){                     //且输入框内容等于空时改为请输入留言$("input").val("请输入留言");}})$("form").submit(function () {//将表单提交事件取消不刷新网页return false;});//show hide$("#op").click(function () {$("#a").slideDown(2000);});$("#cl").click(function () {$("#a").slideUp(2000);});//动画本质就是在一定时间内，慢慢的达到目标效果$('body').keydown(function (event) {if(event.keyCode==37){$("#b").animate({'left':'-=100px'},1);}else if(event.keyCode==38){$("#b").animate({'top':'-=100px'},1);}else if(event.keyCode==39){$("#b").animate({'left':'+=100px'},1);}else if(event.keyCode==40){$("#b").animate({'top':'+=100px'},1);}else if(event.keyCode==32){$("#b").animate({'top':'-=500px'},100);$("#b").animate({'top':'+=500px'},100);}});//绑定事件的三种方式//第一种是在标签里面加事件//第二种是在js里面写添加事件 可以通过jQuery的连点添加多个事件//第三种是通过.on绑定事件  若一次绑定多个事件执行同一个事情，事件名应采用空格进行分割$("#o").on("click",function () {alert("aaa")});});
</script>
</html>

7.绑定事件

在实际开发中，有时需要为一个元素添加多个事件处理程序。例如，鼠标指针移入时改变元素样式，鼠标指针移出时改变元素内容。使用jQuery提供的on()方法可以为指定元素添加一个或多个事件处理程序。语法如下：

$(selector).on(event[,childSelector][,data],function);

其中，selector表示被匹配元素的选择器表达式，on()方法接收四个参数，具体说明如下。

event为必需参数，表示事件类型，如click丶mouseover丶mouseout等。若一次绑定多个事件，且执行相同事件处理程序，event应采用空格进行分割。
childSelector为可选参数，用于过滤触发事件所选元素的后代元素。
data为可选参数，作为event.data属性值传递给事件对象。
function为必需参数，用于绑定触发事件后执行的函数。

//使用on()方法实现提交表单丶
//当页面大小发生改变或滚动滚动条时丶
//文本框获取焦点与失去焦点的操作
$(function(){//代码1$("form").on("submit",function(){//提交表单alert("提交成功！")})//代码2$("window").on("resize" "scroll",function(){//当页面大小发生改变或滚动滚动条时$("body").css("background","red");})//代码3$("#name").on({//获取焦点时focus：function(){$("#name").var("");},//失去焦点时blur：function(){if(  $("#name").var()==""){$("#name").var("请输入用户名");}}})
})

8.移除事件

off()方法可以从指定元素上移除一个或者多个事件处理程序。

$(selector).off(event[,childSelector],function);

其中，selector表示被匹配元素的选择器表达式，off()方法接收三个参数，具体说明如下。

event为必需参数，表示事件类型，如click丶mouseover丶mouseout等。若一次绑定多个事件，且执行相同事件处理程序，event应采用空格进行分割。
childSelector为可选参数，用于过滤触发事件所选元素的后代元素。
function为可选参数，先前为event事件附加的处理函数。

$(function(){//解除submit事件绑定$("form").off("submit");//解除文本框focus与blur事件绑定$("#name").off("focus blur");//解除id为name元素的所有事件$("#name").off();
})

9.复合事件

在jQuery中有两个复合事件方法——hover（）和toggle（）方法，这两个方法与ready()类似，都jQuery自定义的方法。

9.1 hover（）方法
在jQuery中 hover()方法用于模拟鼠标指针移入移出事件。当鼠标指针移至元素上时，会触发指定的第一个函数(enter);当鼠标指针移出这个元素时，会触发指定的第二个参数(leave),该方法相当于mouseenter和mouseleave事件的组合。语法格式如下：

hover(enter,leave)

示例：下面使用hover（）实现当当图书导航中“我的当当”二级菜单的显示和隐藏

 <script>$(function(){$(".top-m .on").hover(function(){$(".topDown").show();},function(){$(".topDown").hide();});});</script>

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

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

示例：展示点击内容页面，页面背景按红，绿，蓝循环切换。

<body>
<input type="button" value="点我吧">
<p>我一会显示一会隐藏</p>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
//    $("input").toggle(
//            function(){$("body").css("background","#ff0000");},
//            function(){$("body").css("background","#00ff00");},
//            function(){$("body").css("background","#0000ff");}
//    )});
</script>
</body>

toggle()不带参数时，与show（）和hide（）方法一样，切换元素的可见状态，如果元素是可见的则切换为隐藏状态，如果元素是隐藏的，则切换为可见状态，语法：

toggle();

与jQuery中的toggle（）方法一样，toggleClass()可以对样式进行切换，实现事件触发时某元素在“加载某个样式” 和 “移除某个样式” 之间切换，语法如下：

toggleClass(classname);

在上面示例基础上增加样式代码如下所示：

 .red{font-size: 28px;color: red;}

改变示例中的代码，单击按钮，p标签中的字体在加载类样式red和移除类样式red之间切换代码如下

  $("input").click(function(){$("p").toggleClass("red");});

综上所述 toggle（）和toggleClass（）方法的总结如下图：

10.控制元素显示与隐藏

10.1 控制元素的显示

在jQuery中，可以使用show()方法控制元素的显示，show()等同于$(selector).css(“display”,“block”)，除了可以控制元素的显示外，他还能定义显示元素时的效果，如显示速度。show()的语法如下：

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

show()参数说明如表所示：

10.2 控制元素的隐藏
在jQuery()，与show()方法对应的时hide()方法，该方法可以控制元素的隐藏。hide()方法等同于$(selector).css(“display”,“none”);除了可以控制元素的隐藏外，它还能定义隐藏元素时的效果，如隐藏速度，语法如下：

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

其参数设置方式与show()方法相同，绝大多数情况下，hide()方法与show()方法总是在一起使用，如选项卡，下拉菜单，提示信息等。

示例：演示隐藏和显示速度：

 <script>$(function(){$(".top-m .on").hover(function(){$(".topDown").show("slow");},function(){$(".topDown").hide("fast");});});</script>

11.改变元素的透明度

jQuery中提供的动画效果相对丰富，除了显示和隐藏元素外，还有改变元素透明度和高度，。

11.1 控制元素淡入

在jQuery中，如果元素是隐藏的，则可以使用fadeIn()方法控制元素淡入，它与show()方法相同，可以定义元素的淡入时的效果，如显示速度。fadeIn(）方法的语法格式如下。

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

adeIn()方法的参数说明如下表所示：

10.2 控制元素的淡出

在jQuery中与fadein()方法对应的时fadeOut()方法，它们经常结合使用，该方法可以控制元素的淡出。该方法除了可以控制元素的淡出外，还能定义显示元素时的效果，如淡出速度。fadeOut（）方法语法如下

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

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

示例：实现单击按钮时图片的淡入和淡出

<body> <img src="data:images/ad.jpg"  /><br/>
<input name="fadein_btn" type="button" value="淡入" />
<input name="fadeout_btn" type="button" value="淡出" />
<script src="js/jquery-1.12.4.js"></script>
<script>$(function(){$("input[name=fadein_btn]").click(function(){$("img").fadeIn("slow");});$("input[name=fadeout_btn]").click(function(){$("img").fadeOut(1000);});});
</script>
</body>

从代码上可以看到，单击“淡入”按钮以速度“slow”显示图片，单击“淡入”按钮以“1000”毫秒的速度显示图片。

12.改变元素的高度

在jQuery中，用于改变元素高度的方法是slideUp()和slideDown()。如元素的display属性值为none，当调用slideDown()方法时，这个元素会从上向下延伸显示，而slideUp（）方法正好相反，元素从下到上缩短直至隐藏，语法格式如下：

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

与fadeIn()和fadeOut()方法中的参数一样，speed为可选参数，用来规定改变元素高度的时长，它的取值也是slow，fast或毫秒。
callback为可选参数，表示改变元素高度完成后执行的函数名称，这个参数在实际网页开发中应用并不是很多。

示例：使用slideUp()和slideDown()方法制作，单击“窗边小豆豆”标题时，相关的文字说明先缓慢向上收起，然后缓慢向下展开。

<body> <div id="box"><h2>窗边的小豆豆</h2><div class="txt"><p>本书讲述了作者上小学的一段真实的故事。</p><p>作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。</p><p>这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。</p></div></div>
<script src="js/jquery-1.12.4.js"></script>
<script>$(function(){$("h2").click(function(){$(".txt").slideUp("slow");$(".txt").slideDown(2000);});});
</script>
</body>

注意：jQuery中的所有动画效果，都可以设置三种速度参数，即slow，normal，fast(三者对应的事件分别为0.6秒，0.4秒和0.2秒)。
当使用关键字作为参数时，需要使用双引号印起来，日fadeIn(“slow”);而使用时间数值作为参数时，则不需要使用双引号，如fadeIn(500)。需要注意的是，当使用时间数值作为参数时，其单位为毫秒，而不是秒。

13.自定义动画

在jQuery中，除了以上的几种动画，还可以创建自定义动画，实现各种比较复杂的动画。
语法：

$(selector).animated({params},speed,callback);

与show()和hide()中的参数一样，自定义动画方面aimate()的参数说明如下。

params:必须，定义形成动画的css属性
speed：可选，规定效果时长，取值，毫秒，fast，slow。
callback：可选，滑动完成后执行的函数名称。

示例：自定义动画让小球移动弹跳

     //动画本质就是在一定时间内，慢慢的达到目标效果$('body').keydown(function (event) {if(event.keyCode==37){$("#b").animate({'left':'-=100px'},1);}else if(event.keyCode==38){$("#b").animate({'top':'-=100px'},1);}else if(event.keyCode==39){$("#b").animate({'left':'+=100px'},1);}else if(event.keyCode==40){$("#b").animate({'top':'+=100px'},1);}else if(event.keyCode==32){$("#b").animate({'top':'-=500px'},100);$("#b").animate({'top':'+=500px'},100);}});

本章总结

在jQuery中，事件由三部分组成：事件主体丶事件的类型和事件处理函数。
jQuery基础事件包括载入事件丶鼠标事件丶键盘事件丶浏览器事件和表单事件。
使用on()和off()方法绑定/移除一个或多个事件处理程序。
jQuery提供的hover()方法用于模拟鼠标指针进入和离开事件，相当于mouseenter和mouseleave事件的组合。
jQuery常用的动画方法根据动画效果分为控制元素显示与隐藏，改变元素透明度和改变元素高度。
jQuery提供的animate()方法用于创建自定义动画。

练习小作业：

改造简易留言板
制作心食谱菜单
制作FAQ问答列表
字母消除游戏

2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画相关推荐

2021/11/1 前端开发之JavaScript+jQuery入门第十三章表单效验
目录 1.JavaScript验证表单内容 2.表单选择器 3.表单属性过滤选择器 4.正则表达式 4.1 正则表达式的定义 4.2 表达式规则 4.3 正则表达式的使用方式 5.HTML5表单验证 ...
BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数
BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数 4.2 函数 4.2.1 什么是函数类似于Java中的方法,是完成特定任务的代码语句块特点使用更 ...
BCSP-玄子前端开发之JavaScript+jQuery入门CH13_表单校验
BCSP-玄子前端开发之JavaScript+jQuery入门CH13_表单校验 4.13 表单验证 4.13.1 为什么要表单验证保证输入的数据符合要求减轻服务器的压力 [外链图片转存失败,源站 ...
jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
前端开发之JavaScript基础篇一
主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换 ...
web前端开发之JavaScript
文章目录一.JavaScript 简介 1. 为什么学习 JavaScript? 2. JavaScript 组成 3. 引入方式 3.1 内部方式 3.2 外部方式 3.3 行内方式 4. 注释 ...
前端开发之JavaScript基础篇四
主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1 ...
web前端开发之div+css教程精华收集二
11个让你代码整洁的原则 http://www.xinran001.com/bbs/thread-73231-1-1.html HTML 实体字符 http://www.xinran001.com/b ...
date javascript 时区_第23节 Datejs 日期库-Web前端开发之Javascript-零点程序员-王唯
Datejs 是一个开源的JavaScript库,用来解析.格式化和处理日期数据,支持多种语言的日期格式处理:官网:www.datejs.com/ Moment.js 是一个简单易用的轻量级JavaS ...

2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画

1.jQuery中的事件

1.1 事件的组成

1.2 基础事件

2.载入事件

3.鼠标事件

4.键盘事件

5.浏览器事件

6.表单事件

7.绑定事件

8.移除事件

9.复合事件

10.控制元素显示与隐藏

11.改变元素的透明度

12.改变元素的高度

13.自定义动画

本章总结

2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画相关推荐

最新文章

热门文章

2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画

1.jQuery中的事件

1.1 事件的组成

1.2 基础事件

2.载入事件

3.鼠标事件

4.键盘事件

5.浏览器事件

6.表单事件

7.绑定事件

8.移除事件

9.复合事件

10.控制元素显示与隐藏

11.改变元素的透明度

12.改变元素的高度

13.自定义动画

本章总结

2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画相关推荐

最新文章

热门文章

2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画

2021/10/31 前端开发之JavaScript+jQuery入门第十二章jQuery事件与动画相关推荐