| 2021/10/31 前端开发之JavaScript+jQuery入门 第十二章jQuery事件与动画 | 您所在的位置：网站首页 › faq问答列表 › 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.自定义动画 本章总结 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事件鼠标指针移至导航上时，当前导航背景颜色变化；鼠标指针离开导航时，背景颜色恢复，代码如下： 欢迎光临当当，请登录免费注册 购物车 我的订单 当当自出版 手机当当 我的当当 企业采购 客户服务
全部商品详细分类
尾品会
图书
电子书
服装
运动户外
婴孕童
家具
当当优品
电器城
当当超市
海外购
$(function(){
/*鼠标指针移至导航上时背景颜色加深*/
$(".nav-ul a").mousemove(function(){
$(this).css("background-color","#f01e28");
});
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
});
});
在方法内部，this指向调用这个方法的DOM对象，在上述代码中，this正好代表#nav a元素。
在Web应用中，鼠标事件非常重要，它们在改善用户体验方法功不可没。鼠标事件常常被用于网站导航，下拉菜单，选项卡，轮播广告和网页组件的交互制作中。 4.键盘事件键盘事件指当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键时都会产生事件。常用的键盘事件有keydown，keyup和keypress。 keydown事件发生在键盘被按下的时候，keyup事件发生在键盘被释放的时候，在keydown和keyup之间会触发另外一个事件——keypress事件。当按下键重复产生字符时，在keyup事件之前可能产生很多keypress事件。keypress是较为高级的文本事件，它的事件对象指定产生的字符，而不是按下的键。所以浏览器都支持keydown，keyup和keypress事件，常用的键盘事件方法如表所示。 示例：在密码框中输入内容时将激发三个键盘事件，并把发生的事件的内容显示在页面中， 会员登录 用户名： 密码： $(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("确定要提交吗？") } }); });从键盘事件的方法中，可以获取当前按键的值（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事件只适用于元素，当提交表单是触发 Title #a{ width: 300px; height: 300px; background-color: yellow; } #b{ width: 300px; height: 300px; background-color: red; border-radius: 50%; position: relative; } 点我啊 提交 点我显示 点我消失 第三种绑定事件 $(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") }); }); 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（）实现当当图书导航中“我的当当”二级菜单的显示和隐藏 $(function(){ $(".top-m .on").hover(function(){ $(".topDown").show(); }, function(){ $(".topDown").hide(); } ); });9.2 toggle()方法 在jQuery中，toggle()分为带有参数方法和不带有参数的方法，带参数的方法用于模拟鼠标连续click事件。第一次单击元素，触发指定的第一个函数(fn1)；当再次单击同一个元素时，则触发指定的第二个参数(fn2);如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数轮番调用，toggle()方法的语法格式如下： toggle(fn1,fn2,....fnN);示例：展示点击内容页面，页面背景按红，绿，蓝循环切换。 我一会显示一会隐藏 $(function(){ // $("input").toggle( // function(){$("body").css("background","#ff0000");}, // function(){$("body").css("background","#00ff00");}, // function(){$("body").css("background","#0000ff");} // ) });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.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()方法总是在一起使用，如选项卡，下拉菜单，提示信息等。 示例：演示隐藏和显示速度： $(function(){ $(".top-m .on").hover(function(){ $(".topDown").show("slow"); }, function(){ $(".topDown").hide("fast"); } ); }); 11.改变元素的透明度jQuery中提供的动画效果相对丰富，除了显示和隐藏元素外，还有改变元素透明度和高度，。 11.1 控制元素淡入 在jQuery中，如果元素是隐藏的，则可以使用fadeIn()方法控制元素淡入，它与show()方法相同，可以定义元素的淡入时的效果，如显示速度。fadeIn(）方法的语法格式如下。 $(selector).fadeIn([speed],[callback]);adeIn()方法的参数说明如下表所示：
10.2 控制元素的淡出 在jQuery中与fadein()方法对应的时fadeOut()方法，它们经常结合使用，该方法可以控制元素的淡出。该方法除了可以控制元素的淡出外，还能定义显示元素时的效果，如淡出速度。fadeOut（）方法语法如下 $(selector).fadeOut([speed],[callback]);其参数设置方式与fadeIn相同。 示例：实现单击按钮时图片的淡入和淡出 
$(function(){
$("input[name=fadein_btn]").click(function(){
$("img").fadeIn("slow");
});
$("input[name=fadeout_btn]").click(function(){
$("img").fadeOut(1000);
});
});
从代码上可以看到，单击“淡入”按钮以速度“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()方法制作，单击“窗边小豆豆”标题时，相关的文字说明先缓慢向上收起，然后缓慢向下展开。 窗边的小豆豆本书讲述了作者上小学的一段真实的故事。 作者因淘气被学校退学后，来到巴学园。在小林校长的爱护和引导下，一般人眼里"怪怪"的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。 这本书不仅给世界千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力，成为20世纪全球最具影响的作品之一。 $(function(){ $("h2").click(function(){ $(".txt").slideUp("slow"); $(".txt").slideDown(2000); }); });注意：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问答列表字母消除游戏 |
【本文地址】