计算机应用技术第10章-jQuery中的事件.pptx

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,二级,三级,四级,五级,第,9,章,jQuery,中的事件,回顾,1.,在,jQuery,中使用什么方法,获取和设置属性,？,2.$(“div”).,append,(“DOM,操作,”),表示什么含义？,3.$(“ul li:first”).,detach(),与,$(“ul li:first”).empty(),有何区别,？,学会使用简写事件,掌握事件对象的使用,掌握合成事件的使用,学习目标,01,03,04,了解事件冒泡,02,本章任务,任务,1,：微博字数统计,任务,2,：,制作图片提示效果,任务,3,：制作横向菜单效果,任务,1,微博字数统计,任务描述,在页面中，允许用户在文本域输入,100,个字符，当用户每输入一个字符，提示文字则显示还可以输入多少个字符，如图所示，当用户输入的字符长度超过,100,时，提示用户输入的字符超长了，并使文本域不可用。,演示任务,1,：微博字数统计,任务分析,1.,完成静态页面设计，,标识文本域和提示部分,。,2.,加载,DOM,后添加处理函数。,3.,按键弹起事件,触发时，统计文本域中字符长度。,4.,在提示字符数处显示还可以输入,（,100-,文本域长度）,个字符，此处添加判断，若用户输入,长度大于,100,时，提示用户输入的字符超长了，并通过,attr,方法,设置文本域为只读,。,掌握,jQuery,中的,常用事件,加载,DOM,$(document).ready(),是整个,jQuery,运行的核心。,window.onload,1.,执行时机：必须等待网页中,所有的内容加载完毕后,才能执行。,2.,不能,同时编写,多个,3.,对应,jQuery,代码：,$(window).load(),$(document).ready(),1.,执行时机：网页,形成整个,DOM,树,之后执行。,2.,能,同时编写多个,3.,可以简写成,$(),事件绑定,语法：,$(selector).,bind(type,data,function),type,为事件类型,包括：,blur,、,focus,、,load,、,resize,、,scroll,、,unload,、,click,、,dblclick,、,mousedown,、,mouseup,、,mousemove,、,mouseover,、,mouseout,、,mouseenter,、,mouseleave,、,change,、,select,、,submit,、,keydown,、,keypress,、,keyup,、,error,等。,data,为方法传递的参数,可以忽略,.,function,是用来绑定的处理函数,.,示例,事件绑定,为,id,为,hot,的,div,的元素绑定单击事件,$(“#hot”).,bind,(“click”,function(),alert(“,层被点击”,);,),事件移除,$(“#mydiv”).,unbind,(“mouseout”);,语法：,$(selector).,unbind,(type,data,function),示例,移除,id,为,mydiv,对象上的,mouseout,事件,简写事件,方法名,触发条件,描述,click(fn),鼠标,触发,每一个匹配元素的,click(,单击,),事件,dblclick(fn),鼠标,触发,每一个匹配元素的,dblclick(,双击,),事件,mousedown(fn),鼠标,触发,每一个匹配元素的,mousedown(,点击后,),事件,mouseup(fn),鼠标,触发,每一个匹配元素的,mouseup(,点击弹起,),事件,mouseover(fn),鼠标触发,每一个匹配元素的,mouseover(,鼠标移入,),事件,mouseout(fn),鼠标触发,每一个匹配元素的,mouseout(,鼠标移出,),事件,mousemove(fn),鼠标触发,每一个匹配元素的,mousemove(,鼠标移动,),事件,为了使开发者更加方便的绑定事件，,jQuery,封装,了常用的事件以便节约更多的代码，称它为,简写事件,方法名,触发条件,描述,mouseenter(fn),鼠标触发,每一个匹配元素的,mouseenter(,鼠标穿过,),事件,keydown(fn),键盘触发,每一个匹配元素的,keydown(,键盘按下,),事件,keyup(fn),键盘触发,每一个匹配元素的,keyup(,键盘按下弹起,),事件,keypress(fn),键盘触发,每一个匹配元素的,keypress(,键盘按下,),事件,focus(fn),表单,触发每一个匹配元素的,focus(,焦点激活,),事件,blur(fn),表单,触发每一个匹配元素的,blur(,焦点丢失,),事件,change(fn),表单,触发每一个匹配元素的,change(,值改变,),事件,$(h2).,mouseover,(function(),$(this).next().hide(););,$(h2).,mouseout,(function(),$(this).next().show(););,示例,当鼠标滑过“标题”时，参考书信息显示；当鼠标滑出“标题”时，参考书信息隐藏。,简写事件,任务实现,关键代码,$(document).ready(function(),var text=$(#edit_myfrom textarea).val();/,获取文本域内容,var counter=text.length;/,获取文本域内容长度,$(#numtj var).text(100-counter);/,提示还有多少,$(document).keyup(function,()/,按键弹起时触发,var text=$(#edit_myfrom textarea).val();/,重新获取文本域内容,var counter=text.length;/,重新获取文本域内容长度,if(counter=100),$(#numtj var).text(,对不起，输入的字符超长了！,);/,文本域长度大于,100,时提示,$(“#edit_myfrom textarea”).attr(“readonly”,true);/,设置文本域为只读,else,$(#numtj var).text(100-counter),;,););,练一练,根据所给素材，完成如图所示的页面，文本框获得焦点时提示文字消失，如果用户没有输入内容，在文本框失去焦点时，默认的提示文字显示在文本框中,；,（,1,）设置文本框初始值，并设置文字颜色为“,#ccc”,。,（,2,）文本框获得焦点时，如果文本框的值为默认值，则清空文本框内容。,（,3,）文本框失去焦点时，如果文本框的值为空，则让文本框的值重新设置为默认值。,实现思路,练习,任务,2,制作图片提示效果,任务描述,当鼠标移动到小图时，显示该图片的大图片及图片的标题，如图所示，当鼠标在小图范围内移动时，提示图片跟随鼠标移动；当鼠标移出小图片时，提示的大图片不显示。,演示任务,2,：图片提示效果,任务分析,1.,当鼠标滑入超链接时,创建一个,元素,，,元素的内容为,title,属性的值。,2.,将创建的,元素,追加,到文档中。,3.,设置新建的,元素的,x,坐标和,y,坐标,，使它显示在鼠标位置的旁边。,4.,当鼠标滑出超链接时，,移除,元素,。,1.,使用,DOM,编程创建,div,并追加到页面,2.,使用,事件对象,设置,div,的,x,、,y,坐标,事件对象,当触发事件时,事件对象就被创建了,在程序中使用事件只需要为函数添加一个参数，,该事件对象只有事件处理函数才能访问到,事件处理函数执行完毕后,事件对象就被销毁了,1,2,3,什么是事件对象？,事件对象是用来记录“,事件发生时一些相关的信息,”。但由于浏览器的兼容性，开发者总是需要做兼容方面的处理,jQuery,在封装的时候，解决了这些问题，并且还创建了一些非常好用的属性和方法,事件对象的属性,事件冒泡,如果在页面中,重叠了多个元素,，并且重叠的这些元素,都绑定了同一个事件,，那么就会出现,冒泡问题,示例,网页上有两个元素按钮和,div,，其中按钮嵌套在,div,里,并且都被绑定了,click,事件，同时页面文档上也绑定了,click,事件。,当单击按钮时，会输出,三条,记录，这就是由,事件冒泡,引起的。,$(input).click,(function(),$(“#msg”).html($(“#msg”).html()+“,按钮被触发了！,”););,$(div).click,(function(),$(#msg).html($(#msg).html()+div,层被触发了！,););,$(document).click,(function(),$(“#msg”).html($(“#msg”).html()+“,文档页面被触发了！,”););,阻止事件冒泡,事件冒泡可能会引起,预料之外,的效果，所以需要,阻止事件,冒泡,阻止事件冒泡：,event.stopPropagation(),；,阻止默认行为：,e.preventDefault(),；（补充）,可以使用,return false,上述两个方法实现相应功能,任务实现,关键代码,$(a.tooltip).,mouseover,(function(e),var tooltip=+this.title+;/,创建,div,元素,$(body).append(tooltip);/,把它追加到文档中,$(#tooltip),.css(top:(,e.pageY+y,)+px,left:,(e.pageX+x,)+px,).show(fast);/,设置,x,坐标和,y,坐标，并且显示,).,mouseout,(function(),$(#tooltip).remove();/,移除,).,mousemove,(function(e),$(#tooltip),.css(top:(,e.pageY+y,)+px,left:(,e.pageX+x,)+px,););,练一练,根据所给素材，制作如所示页面，当鼠标移到小图片上，则提示相应图片的大图，鼠标在小图片上移动时，提示图片跟随鼠标移动，当鼠标移开图片时，提示图片消失,。,（,1,）当鼠标移入时创建一个,元素，并将,元素追加到文档中。,（,2,）设置新建的,元素的,x,坐标和,y,坐标，使它显示在鼠标位置的旁边。,（,3,）,当鼠标滑出超链接时，移除,元素,。,实现思路,练习,任务,3,制作横向菜单效果,任务描述,在页面顶部导航菜单，当光标移入办公时，办公的二级菜单显示，当鼠标移出时，办公二级菜单内容隐藏。类似的，鼠标移入“王丽”和“更多“时，显示相应二级菜单内容，移出时隐藏二级菜单内容。,演示任务,3,：横向菜单效果,任务分析,1.,为“办公”、“王丽”和“更多”绑定,mouseover,或,mouseenter,事件，鼠标移入时，将层内容显示。,2.,鼠标移出时绑定,mouseout,或,mouseleave,事件，将刚显示的内容隐藏。,3.,使用,jQuery,封装的,合成事件,实现上面两步。,掌握,jQuery,中的,合成事件,合成事件,hover,语法：,$(selector).,hover(enter,leave),作用：,用于模拟光标悬停事件,.,当光标,移动到元素上,时,会触发指定的,第一个函数,当光标,移出这个元素,时,触发指定的第二个函数,示例,使用,hover,合成事件改善下例,特殊事件,one,语法：,$(selector).,one(event,data,function),作用：,one(),事件只执行一次则被删除,示例,单击“人在珠海”,div,时，弹出一次“欢迎来到珠海！”,人在珠海,$(document).ready(function(e),$(#city).one,(click,function(),alert(“,欢迎来到珠海！”,);,任务实现,关键代码,$(.def-nav,.info-i).,hover,(function(),$(this).find(.pulldown-nav).addClass(hover);,$(this).find(.pulldown).show();,function(),$(this).find(.pulldown).hide();,$(this).find(.pulldown-nav).removeClass(hover);,);,拓展,:,模拟操作,trigger,语法：,$(selector).,trigger(,模拟事件,),作用：,触发被选元素的指定事件类型,示例,$(“#pos”).click(function(),$(“#btn”).,trigger,(“click”);/,模拟操作触发的,#btn,的,click,事件,.),此时，单击,id,为,pos,的对象，将触发,id,为,btn,的单击事件,练一练,根据所给素材，应用,CSS,样式制作如图,3,所示页面，使用,j,Query,的,hover,事件实现横向导航菜单效果,。,（,1,）使用,hover,实现导航菜单。,（,2,）设置,hover,第一个函数为鼠标移入时显示菜单，第二函数为鼠标移出隐藏菜单。,实现思路,练习,总 结,使用,bind,方法可以为元素绑定事件，使用,unbind,方法可以删除事件。,JQuery,中的,event,对象封装了很多非常好用的属性和方法。,如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，就会出现冒泡问题，可以使用,stopPropagation,方法或,return false,阻止冒泡。,hover,实际是,mouseenter,和,mouseleave,的合成事件；特殊事件,one,只会触发一次就删除。,模拟操作,trigger(),方法可以模拟用户的操作。,