《使用jQuery快速高效制作网页交互特效TP.pptx》由会员分享，可在线阅读，更多相关《使用jQuery快速高效制作网页交互特效TP.pptx（45页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、JavaScriptJavaScript对象对象第二章第二章回顾与作业点评回顾与作业点评在在HTML页面中如何引用页面中如何引用JavaScript？简述简述prompt()和和alert()方法的区别及应用场合。方法的区别及应用场合。如何定义和使用函数？如何定义和使用函数？2/45预习检查预习检查window对象常用的方法有哪些？并举例说明其对象常用的方法有哪些？并举例说明其用法用法定时函数有几种，其作用分别是什么？定时函数有几种，其作用分别是什么？如何在页面上实现前进、后退？如何在页面上实现前进、后退？提问提问提问提问3/45本章任务本章任务制作简易购物车页面制作简易购物车页面查看一年四季
2、的变化查看一年四季的变化制作复选框的全选制作复选框的全选/全不选效果全不选效果制作制作12进制的时钟特效进制的时钟特效4/45本章目标本章目标会使用会使用window对象的对象的open()方法制作广告窗方法制作广告窗口口会使用会使用getElement系列方法访问系列方法访问DOM元素元素会使用定时函数和会使用定时函数和Date对象制作时钟特效对象制作时钟特效5/45BOM模型模型BOM可实现功能可实现功能弹出新的浏览器窗口弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口的大小移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退页面的前进、后退整个整个BOM的核心的核心6/45Windo
3、w对象对象常用属性常用属性常用方法常用方法常用事件常用事件7/45Window对象的对象的常用属性常用属性属性名称属性名称说说明明history有关客户访问过的有关客户访问过的URL的信息的信息location有关当前有关当前URL的信息的信息常用的属性常用的属性语法语法语法语法window.属性名属性名=属性值属性值window.location=;示例示例示例示例表示跳转到搜狐主页表示跳转到搜狐主页8/45Window对象的对象的常用方法常用方法常用的方法常用的方法方法名称方法名称说说明明prompt()显示可提示用户输入的对话框显示可提示用户输入的对话框alert()显示带有一个提示信息
4、和显示带有一个提示信息和一个一个确定按钮的警示框确定按钮的警示框confirm()显示一个显示一个带有提示信息、确定和取消按钮的对话框带有提示信息、确定和取消按钮的对话框close()关闭浏览器窗口关闭浏览器窗口open()打开一个新的浏览器窗口，加载给定打开一个新的浏览器窗口，加载给定URL所指定的所指定的文档文档setTimeout()在指定的毫秒数后调用函数或计算表达式在指定的毫秒数后调用函数或计算表达式setInterval()按照指定的周期（以毫秒计）来调用函数或表达式按照指定的周期（以毫秒计）来调用函数或表达式9/45confirm()方法方法confirm()与与alert()、
5、prompt()区别区别confirm(对话框对话框中显示的纯中显示的纯文本文本)语法语法语法语法示例示例示例示例varflag=confirm(确认要删除此条信息吗？确认要删除此条信息吗？);if(flag=true)alert(删除成功！删除成功！);elsealert(你取消了删除你取消了删除);10/45open()方法方法window.open(弹出窗口的弹出窗口的url,窗口名称窗口名称,窗口特征窗口特征”)窗口特征窗口特征语法语法语法语法属性名称属性名称说说明明height、width窗口文档显示区的高度、宽度。以像素计。窗口文档显示区的高度、宽度。以像素计。left、top窗口
6、的窗口的x坐标、坐标、y坐标。以像素计坐标。以像素计toolbar=yes|no|1|0是否显示浏览器的工具栏。黙认是是否显示浏览器的工具栏。黙认是yes。scrollbars=yes|no|1|0是否显示滚动条。黙认是是否显示滚动条。黙认是yes。location=yes|no|1|0是否显示地址地段。黙认是是否显示地址地段。黙认是yes。status=yes|no|1|0是否添加状态栏。黙认是是否添加状态栏。黙认是yes。menubar=yes|no|1|0是否显示菜单栏。黙认是是否显示菜单栏。黙认是yes。resizable=yes|no|1|0窗口是否可调节尺寸。黙认是窗口是否可调节尺
7、寸。黙认是yes。titlebar=yes|no|1|0是否显示标题栏。黙认是是否显示标题栏。黙认是yes。fullscreen=yes|no|1|0是否使用全屏模式显示浏览器。黙认是是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式。处于全屏模式的窗口必须同时处于剧院模式。window.open(adv.html,height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0);弹出固定大小窗口弹出固定大小窗口,并且无菜单栏等并且无菜单栏等11/45Wind
8、ow对象的对象的常用事件常用事件常用的事件常用的事件名称名称说说明明onload一个页面或一幅图像完成加载一个页面或一幅图像完成加载onmouseover鼠标移到某元素之上鼠标移到某元素之上onlick当用户单击某个对象时调用的事件句柄当用户单击某个对象时调用的事件句柄onkeydown某个键盘按键被某个键盘按键被按下按下onchange域的内容被改变域的内容被改变12/45如何使用如何使用window对象对象弹出窗口、弹出固定大小且无菜单栏的窗口弹出窗口、弹出固定大小且无菜单栏的窗口当前页面全屏显示当前页面全屏显示弹出确认窗口弹出确认窗口关闭窗口关闭窗口演示演示示例示例1：window对象操
9、作窗口对象操作窗口示例示例示例示例13/45学员操作学员操作模拟简易购物车页面模拟简易购物车页面需求说明需求说明打开页面时，弹出广告页面，并且此页面可实现关打开页面时，弹出广告页面，并且此页面可实现关闭窗口功能闭窗口功能购物车页面可实现全屏显示购物车页面可实现全屏显示提交订单页面时，弹出确认窗口提交订单页面时，弹出确认窗口练习练习练习练习完成时间：完成时间：20分钟分钟14/45共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧共性问题集中讲解共性问题集中讲解共性问题集中讲解共性问题集中讲解15/45history对象对象常用方法常用方
10、法名称名称说说明明back()加载加载history对象列表中的前一个对象列表中的前一个URLforward()加载加载history对象列表中的下一个对象列表中的下一个URLgo()加载加载history对象列表中的某个具体对象列表中的某个具体URLhistory.back()history.forward()history.go(-1)history.go(1)等价等价浏览器中的浏览器中的“前进前进”浏览器中的浏览器中的“后退后退”等价等价16/45location对象对象常用属性常用属性名称名称说说明明host设置或返回主机名和当前设置或返回主机名和当前URL的端口号的端口号hostna
11、me设置或返回当前设置或返回当前URL的主机名的主机名href设置或返回完整的设置或返回完整的URL常用方法常用方法名称名称说说明明reload()重新加载当前文档重新加载当前文档replace()用新的文档替换当前文档用新的文档替换当前文档17/45location和和history对象对象的应用的应用主页面使用主页面使用href实现跳转和刷新本页实现跳转和刷新本页查看鲜花详情查看鲜花详情刷新本页刷新本页返回主页面返回主页面演示演示示例示例2：location和和history对象对象18/45学员操作学员操作查看一年四季变化查看一年四季变化需求说明需求说明制作查看一年四季变化的主页面制作查
12、看一年四季变化的主页面主页面实现链接到其他页面及刷新本页功能主页面实现链接到其他页面及刷新本页功能其他页面实现前进、后退和链接到其他页面功能其他页面实现前进、后退和链接到其他页面功能练习练习练习练习完成时间：完成时间：20分钟分钟19/45共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧共性问题集中讲解共性问题集中讲解共性问题集中讲解共性问题集中讲解20/45Document对象对象常用属性常用属性名称名称说说明明referrer返回载入当前文档的文档的返回载入当前文档的文档的URLURL返回当前文档的返回当前文档的URL语法语法语法
13、语法document.referrerdocument.URL21/45Document对象应用对象应用2-1praise.html页面页面login.html页面页面22/45Document对象应用对象应用2-2判断页面是否是链接进入判断页面是否是链接进入自动跳转到登录页面自动跳转到登录页面演示演示示例示例3：判断页面来源并跳转：判断页面来源并跳转varpreUrl=document.referrer;/载入本页面文档的地址载入本页面文档的地址if(preUrl=)document.write(您不是从领奖页面进入，您不是从领奖页面进入，5秒后将自动秒后将自动跳转到登录页面跳转到登录页面)
14、;setTimeout(javascript:location.href=login.html,5000);23/45Document对象的常用方法对象的常用方法2-1Document对象的常用方法对象的常用方法名称名称说说明明getElementById()返回对拥有指定返回对拥有指定idid的第一的第一个对象的引用个对象的引用getElementsByName()返回带有指定名称的对象返回带有指定名称的对象的集合的集合getElementsByTagName()返回带有指定标签名的对返回带有指定标签名的对象的集合象的集合write()向文档写文本、向文档写文本、HTML表表达式或达式或Ja
15、vaScript代码代码对象的对象的id唯一唯一相同相同name属性属性相同的元素相同的元素24/45Document对象对象访问页面元素访问页面元素动态改变层、标签中的内容动态改变层、标签中的内容访问相同访问相同name的元素的元素访问相同标签的元素访问相同标签的元素演示演示示例示例4：Document方法方法25/45Document对象的常用方法对象的常用方法2-2动态改变层、标签中的内容动态改变层、标签中的内容访问相同访问相同name的元素的元素访问相同标签的元素访问相同标签的元素document.getElementById(node).innerHTML=搜狐搜狐;varaInpu
16、t=document.getElementsByName(season);varsStr=;for(vari=0;iaInput.length;i+)sStr+=aInputi.value+;document.getElementById(s).innerHTML=sStr;varaInput=document.getElementsByTagName(input);varsStr=;for(vari=0;iaInput.length;i+)sStr+=aInputi.value+;document.getElementById(s).innerHTML=sStr;经验经验经验经验docume
17、nt对象常应用于复选框全选效果对象常应用于复选框全选效果26/45如何实现复选框的全选效果如何实现复选框的全选效果问题问题问题问题如何实现全选如何实现全选/全不选效果？全不选效果？27/45复选框的属性复选框的属性checked属性值属性值选中：选中：true未选中：未选中：false相同相同namename的复选框全部被同时的复选框全部被同时选中，选中，如何设置？如何设置？提问提问提问提问分析分析分析分析使用使用getElementsByName()getElementsByName()方法访问同名复选框方法访问同名复选框将将“全选全选”复选框的复选框的checkedchecked属性属性值
18、赋值给每个复值赋值给每个复 选框的选框的checkedchecked属性属性演示演示示例示例5：实现全选：实现全选/全不选效果全不选效果28/45学员操作学员操作制作复选框的全选制作复选框的全选/全不选效果全不选效果需求说明需求说明“全选全选”选中时，所有复选框被选中选中时，所有复选框被选中“全选全选”取消选中时，所有复选框也取消选中取消选中时，所有复选框也取消选中练习练习练习练习完成时间：完成时间：20分钟分钟29/45共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧共性问题集中讲解共性问题集中讲解共性问题集中讲解共性问题集中讲解3
19、0/45JavaScript内置对象内置对象Array：用于在单独的变量名中存储一系列的：用于在单独的变量名中存储一系列的值。值。String：用于支持对字符串的处理。：用于支持对字符串的处理。Math：用于执行常用的数学任务，它包含了：用于执行常用的数学任务，它包含了若干个数字常量和函数。若干个数字常量和函数。Date：用于操作日期和时间。：用于操作日期和时间。31/45Math对象对象常用方法常用方法方法方法说说明明示例示例ceil()对数进行上舍入对数进行上舍入Math.ceil(25.5);返回返回26Math.ceil(-25.5);返回返回-25floor()对数进行下舍入对数进行
20、下舍入Math.floor(25.5);返回返回25Math.floor(-25.5);返回返回-26round()把数四舍五入为最接近的数把数四舍五入为最接近的数Math.round(25.5);返回返回26Math.round(-25.5);返回返回-26random()返回返回01之间的随机数之间的随机数Math.random();例如：例如：0.6273608814137365variNum=Math.floor(Math.random()*98+2);提问提问提问提问如何实现返回的整数范围为如何实现返回的整数范围为299？32/45Date对象对象如何在页面中显示当前时间的小时、分钟
21、和秒如何在页面中显示当前时间的小时、分钟和秒？问题问题问题问题分析分析分析分析使用使用Date对象获得时、分、秒对象获得时、分、秒33/45Date对象对象var日期对象日期对象=newDate(参数参数)参数格式：参数格式：MMDD,YYYY,hh:mm:ssvartoday=newDate();/返回当前日期和时间返回当前日期和时间vartdate=newDate(september1,2013,14:58:12);语法语法语法语法示例示例示例示例34/45Date对象的方法对象的方法常用方法常用方法方法方法说说明明getDate()返返回回Date对对象象的的一一个个月月中中的的每每一一
22、天天，其其值值介介于于131之间之间getDay()返返回回Date对对象象的的星星期期中中的的每每一一天天，其其值值介介于于06之间之间getHours()返回返回Date对象的小时数，其值介于对象的小时数，其值介于023之间之间getMinutes()返回返回Date对象的分钟数，其值介于对象的分钟数，其值介于059之间之间getSeconds()返回返回Date对象的秒数，其值介于对象的秒数，其值介于059之间之间getMonth()返回返回Date对象的月份，其值介于对象的月份，其值介于011之间之间getFullYear()返回返回Date对象的年份，其值为对象的年份，其值为4位数位
23、数getTime()返返回回自自某某一一时时刻刻（1970年年1月月1日日）以以来来的的毫毫秒秒数数35/45functiondisptime()vartoday=newDate();/获得当前时间获得当前时间varhh=today.getHours();varmm=today.getMinutes();varss=today.getSeconds();document.getElementById(myclock).innerHTML=hh+:+mm+:+ss;制作时钟特效制作时钟特效示例示例示例示例使用使用Date对象的方法显示当前时间的小时、对象的方法显示当前时间的小时、分钟和秒。分钟和
24、秒。获得小时、分钟、秒数获得小时、分钟、秒数36/45Date对象对象制作的时钟特效示例中，时间为什么不改变？制作的时钟特效示例中，时间为什么不改变？问题问题问题问题分析分析分析分析由于时间在不停地走，所以应该每隔由于时间在不停地走，所以应该每隔1秒调用秒调用显示时间的方法显示时间的方法，如何解决？如何解决？使用使用setTimeout()方法或方法或setInterval()37/45定时函数定时函数setTimeout()setTimeout(调用的函数调用的函数,等待的毫秒数等待的毫秒数)如果如果要多次要多次调用，使用调用，使用setInterval()或者或者让让disptime()自
25、身再次调自身再次调用用setTimeout()varmyTimesetTimeout(disptime(),1000);varmyTimesetInterval(disptime(),1000);1秒秒(1000毫秒毫秒)之后执之后执行行函数函数disptime()一次一次每隔每隔1秒秒(1000毫秒毫秒)执执行函数行函数disptime()一次一次setInterval()setInterval(调用的函数调用的函数,间隔的毫秒数间隔的毫秒数)语法语法语法语法语法语法语法语法38/45清除函数清除函数clearTimeout()clearTimeout(setTimeOut()返回的返回的I
26、D值值)varmyTimesetTimeout(disptime(),1000);clearTimeout(myTime)；varmyTimesetInterval(disptime(),1000);clearInterval(myTime)；clearInterval()clearInterval(setInterval()返回的返回的ID值值)语法语法语法语法语法语法语法语法演示演示示例示例6：时钟特效：时钟特效39/45学员操作学员操作制作制作12小时的时钟特效小时的时钟特效2-1训练要点训练要点Date对象的使用对象的使用setInterval()方法的使用方法的使用需求说明需求说明制
27、作显示年、月、日、星期几并且显示上午制作显示年、月、日、星期几并且显示上午（AM）和下午（）和下午（PM）的）的12进制的时钟进制的时钟指导指导指导指导讲解需求说明讲解需求说明40/44学员操作学员操作制作制作12小时的时钟特效小时的时钟特效2-2实现思路实现思路1.获得年、月、日、时、分、秒获得年、月、日、时、分、秒2.按按12小时制显示小时小时制显示小时3.判断星期几判断星期几4.使用使用setInterval()定时显示当前时间定时显示当前时间如果如果hour(小时小时)12，则，则hour=hour-12完成时间：完成时间：20分钟分钟指导指导指导指导提示提示提示提示41/45共性问题
28、集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧共性问题集中讲解共性问题集中讲解共性问题集中讲解共性问题集中讲解42/45总结总结window对象实现弹出窗口、关闭当前窗口、弹对象实现弹出窗口、关闭当前窗口、弹出页面消息框等效果出页面消息框等效果Date对象获得当前系统的日期、时间对象获得当前系统的日期、时间定时函数：定时函数：setTimeout()和和setInterval()history和和location对象实现浏览器中对象实现浏览器中“后退后退”、“前进前进”和和“刷新刷新”document对象的方法对象的方法getElementById()getElementsByName()getElementsByTagName()43/45作业作业课后作业课后作业教员备课时根据班级情况在此添加内容，应区分教员备课时根据班级情况在此添加内容，应区分必做、选做内容，以满足不同层次学员的需求必做、选做内容，以满足不同层次学员的需求预习作业预习作业预习目标预习目标了解了解jQuery的语法结构以及的语法结构以及jQuery对象方法对象方法预习下一章学生用书，完成预习作业预习下一章学生用书，完成预习作业44/4545/45