《Javascript浏览器对象和事件处理.ppt》由会员分享，可在线阅读，更多相关《Javascript浏览器对象和事件处理.ppt（27页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1学习目标n了解文档对象模型n掌握浏览器对象使用方法n掌握常见事件2文档对象模型(DOM)n什么是文档对象模型u为了方便组织众多的对象,可以将不同的对象进行归类,使之形成一整套类似于树行结构的模型u浏览器对象就是具有树行结构模型的对象其结构如下:3Window对象nWindow对象u文档对象模型层次图的最高层就是windows对象u窗口对象var窗口对象名=window.open(“网页名”,”窗口名字”,”窗口属性”)常见窗口属性:4Window对象nWindow对象qwindow.defaultStatus=某变量值设定状态栏所显示信息。其意义是当整个网页都读取完毕之后，状态栏所显示文字。
2、qwindow.status=某变量值设定状态栏所显示信息。但意义和上面的相区别，不再是永久性的状态栏所显示的文字，其值将在网页的读取过程中可以随时改变该属性。qwindow.location=”http:/”改变浏览器的链接。qwindow.status等价于self.status表示浏览器本身即当前窗口window对象。5Window对象nWindow对象的主要方法:qopen()和close():开,关一个窗口，关闭当前窗口如：window.close()qalert(警告话):弹出警告对话框qconfirm(“提示字符串”):弹出带有OK和cancle按钮的对话框，带返回值qpromp
3、t(“提示字符串”,”默认值”):弹出带有一个输入文本框的对话框，带返回值6Window对象nWindow对象的主要方法:qwindow.navigate(“网页地址”)改变当前窗口所链接的网页地址。qID=setTimeout(函数名称，时间间隔)经过一段时间间隔自动执行函数。qwindow.moveTo(x坐标,y坐标)将浏览器窗口的左上角直接移动到某指定位置。qwindow.resizeBy(水平距离,垂直距离)改变当前窗口的大小，包括水平及垂直距离。qwindow.resizeTo(宽度,高度)设定当前窗口的大小。7Window对象nWindow对象的主要事件:q1onLoadq当该网
4、页被用户端的浏览器所读取的时候发生的事件。一般放在body卷标中，如下：qq表示当该网页被用户端的浏览器一旦读取时，就执行该函数程序。q2onUnLoadq当该网页被用户关闭整个浏览器窗口的时候发生的事件。一般放在body卷标中，如下：qq表示当该网页被用户关闭时，就执行该函数程序。q另外，还有：qonResize事件：当浏览窗口的大小被用户改变时所触发的事件。qonMove事件：当用户利用鼠标将窗口移动时所触发的事件。8document对象document对象uanchor对象:由标识生成的对象ulinks对象:由标识生成的对象u表单对象:由标识间的表单类型所生成的对象,可以使用formn形
5、式来表示,也可以使用其名称来表示9document对象的属性ndocument对象的属性10document对象的方法ndocument对象的方法11history对象 nhistory.back()回到上一页重新浏览。无参数。nhistory.forword()回到刚才浏览过的网页重新浏览。无参数。nhistory.go()在网页中任意转移。可以带参数，0为当前网页重新读取，1为回到下一页，-1为返回到上一页。12location对象 nlocation.reload()当前网页将被浏览器重新读取一次，相当于刷新网页。nlocation.replace(新网页名)当前网页将被链接到新网页。1
6、3 image对象 ndocument.imagesindex.border表示某图片外围的边界宽度。ndocument.imagesindex.width表示某图片的宽度。ndocument.imagesindex.height表示某图片的高度。ndocument.图片名.属性名表示某图片的名称。可以通过该图片的名称对图片进行操作。只可以读取。ndocument.imagesindex.src表示某图片的读取。通过改变图片的文件名，可以达到动态改变图片的效果。可以修改。14form表单对象nform表单对象uform表单对象document.forms是一个数组，包含了文档中所有的表单（）。
7、要引用单个表单，可以用document.formsx，X为数组的索引值。也可以在标记中加上name=“.”属性，那么直接用document.”就可以引用uform表单对象的属性length返回该表单所含元素的数目uform表单对象的方法reset()重置表单。如document.表单名.reset()与按下“重置”按钮是一样的。submit()提交表单。这与按下“提交”按钮是一样的。15表单元素对象(1/6)n表单元素对象u每一个表单元素都对应一个对象u引用一个表单元素对象,可以使用u“.”u指在标记中的“name=”.“”属性的值。引用任意表单元素都可以用这种方法16表单元素对象(2/6)n
8、button按钮对象 u由“”指定u属性(submit与之相同)name返回/设定用指定的元素名称。value返回/设定用指定的元素的值(即按钮上显示值)form返回包含本元素的表单对象。nCheckbox复选框对象 u由“”指定u属性name返回/设定用指定的元素名称。value返回/设定用指定的元素的值。form返回包含本元素的表单对象。checked返回/设定该复选框对象是否被选中。这是一个布尔值。defaultChecked返回/设定该复选框对象默认是否被选中。这是一个布尔值。17表单元素对象(3/6)npassword密码输入区对象u由“”指定u属性(text,textarea与之相
9、同)name返回/设定用指定的元素名称。value返回/设定密码输入区当前的值。defaultValue返回用指定的默认值。form返回包含本元素的表单对象。18例nnnnnn在第一个文本框里输入的数据可表示为：document.abc.dd.valuen在第二个密码框里输入的数据可表示为：document.abc.ee.valuen在按钮上显示的数据可表示为：document.abc.ff.value19表单元素对象(4/6)nRadio单选域对象 u由“”指定。u一组Radio对象有共同的名称（name属性），这样的话，document.formName.radioName就成了一个数组。
10、要访问单个Radio对象就要用：document.formName.radioNamex。u属性name返回/设定用指定的元素名称。value返回/设定用指定的元素的值。form返回包含本元素的表单对象。checked返回/设定该单选域对象是否被选中。这是一个布尔值。defaultChecked返回/设定该对象默认是否被选中。这是个布尔值。20表单元素对象(5/6)nSelect 下拉菜单对象下拉菜单对象 u由“”指定u属性name返回/设定用指定的元素名称。length返回Select对象下选项的数目。selectedIndex返回被选中的选项的下标。这个下标就是在options数组中该选项
11、的位置。如果Select对象允许多项选择，则返回第一个被选中的选项的下标。form返回包含本元素的表单对象21表单元素对象(6/6)noptionsoption选择项对象uoption对象由“”下的“”指定uoptions是一个数组，包含了在同一个Select对象下的option对象u单个Option对象的属性text返回/指定Option对象所显示的文本value返回/指定Option对象的值，与一致。Index返回该Option对象的下标。对此并没有什么好说，因为要指定特定的一个Option对象，都要先知道该对象的下标。这个属性好像没有什么用。selected返回/指定该对象是否被选中。通
12、过指定true或者false，可以动态的改变选中项。defaultSelected返回该对象默认是否被选中。true/false22例qqqoneqtwoqqq则读取document.ss.sel.options0.text等于onentext：可读写：可读写,表示该选项的叙述文字，作用等表示该选项的叙述文字，作用等同在同在卷标后的文字。卷标后的文字。23Javascript的事件n事件驱动概述u鼠标或热键的动作称为事件u鼠标或热键引发的程序的执行动作,称为事件驱动u对时间进行处理的程序称为事件处理程序l事件驱动u鼠标单击事件:onClick当用户单击鼠标按钮时,产生onClick事件如:24
13、Javascript的事件u改变事件:onChange当在表单中输入文本或者下拉列表框中的元素发生改变时会触发此事件，如:u获得焦点事件:onFocus当对象获得焦点时触发此事件,如选中文本框如:n失去焦点：onBlur()当用户把输入处移出窗口对象上的动作，即把鼠标移到任意一个没有对象的地方，按下鼠标左键功能。刚好与上方法相反动作。适用于：text、textarea、password、select25Javascript的事件n选择文字：onSelect()q当用户拖动鼠标选择文字的动作。适用于：text、textarea、passwordnonMouseOver:鼠标选中事件q当鼠标放在对象上时触发此事件如:新闻导航uonMouseOut:鼠标离开事件q当鼠标离开对象时触发此事件26总结n了解文档对象模型n掌握浏览器对象使用方法n掌握常见事件27练习及提问时间练习及提问时间