7.JavaScript高级.ppt

JavaScript高级 姓名 马明电话 60889797QQ 44562586MAIL alex0018 DOM编程 二 DOM编程事件处理window对象document对象body对象form对象form表单字段元素对象 DOM面对面 文档 DOM中的 D 没有文档 DOM就无从谈起 当创建一个网页并把它加载到浏览器中 DOM就根据你编写的网页创建了一个文档对象 对象 DOM中的 O 我们把注意力放在浏览器对象上模型 DOM中的 M 当网页加载后 浏览器向我们提供了当前网页的模型 我们可以去提取这个模型 DOM把文档表示成一颗树 事件处理 事件是发生并得到处理的操作 事件 电话振铃 处理事件 JavaScript事件 JavaScript事件处理程序 JavaScript事件处理程序就是一组语句 在事件 如点击鼠标或移动鼠标等 发生时执行 事件 处理事件 事件处理程序的基本语法是 事件名 JavaScript代码或调用函数 例如 表示鼠标按下时 将调用执行函数check 如何编写事件处理程序 一 在事件源对象所对应的HTML标签上增加一个要处理事件属性 让事件属性值等于处理事件的函数名或程序代码 格式 例1 例2 functionshow varstr 建议浏览器的分辨率 800 x600 alert str 禁用浏览器右键 二 直接在JavaScript代码中 设置元素对象的事件属性 让事件属性值等于处理该事件的函数名或程序代码 格式 对象名 on事件 例1 document onload alert 建议浏览器的分辨率 800 x600 例2 functionshow varstr 建议浏览器的分辨率 800 x600 alert str document onload show 三 在一个专门的标签对中编写某个元素对象的某种事件处理程序代码 并用for属性指定事件源和用event属性指定事件名 这种标签中的脚本程序只在指定事件源的指定事件发生时才被调用执行 这种方式常用于网页文档中的各种插件对象的事件处理程序 window event returnValue false 浏览器对象简介 Window窗口对象 location地址对象 document文档对象 FORM表单对象 浏览器对象的分层结构 window document myform text1 window对象 window对象代表浏览器的整个窗口 编程人员可以利用window对象控制浏览器窗口的各个方面 如改变状态栏上的显示文字 弹出对话框 移动窗口的位置等 对window对象的属性和方法的引用 可以省略 window 这个前缀 例如 window alert 你好 可以直接写成alert 你好 Window对象 属性 Window对象 方法 window对象 方法 navigate方法setInterval方法clearInterval方法moveTo方法resizeTo方法showModalDialog方法showModelessDialog方法 Window对象 functionopenwindow window open google htm functionclosewindow window close 使用Open方法打开新窗口 使用Close方法关闭窗口 添加单击事件 因为window是最顶层的根 所以可以省略window open google htm 可简写为 open google htm close 方法也是如此 open 打开窗口的url 窗口名 窗口特征 窗口的特征如下 可以任意组合 height 窗口高度 width 窗口宽度 top 窗口距离屏幕上方的象素值 left 窗口距离屏幕左侧的象素值 toolbar 是否显示工具栏 yes为显示 menubar scrollbars表示菜单栏和滚动栏 resizable 是否允许改变窗口大小 yes或1为允许location 是否显示地址栏 yes或1为允许status 是否显示状态栏内的信息 yes或1为允许 Window对象 我们需要预先制作好广告页面 假设为adv htm 打开广告窗口的语句如下 open adv htm toolbars 0 scrollbars 0 location 0 statusbars 0 menubars 0 resizable 0 width 650 height 150 functionopenwindow open adv htm toolbars 0 scrollbars 0 location 0 statusbars 0 menubars 0 resizable 0 width 650 height 150 看看和我一起打开的广告窗口 Window对象 使用Open方法打开广告新窗口 添加页面加载事件 对窗口可以设置的可选参数 网页文件 window open information html blank top 0 left 0 width 200 height 200 toolbar no information html网页文件 window setTimeout window close 5000 通知5秒钟以后 这个窗口会自动关闭 test html网页文件 全屏 window open information html blank top 0 left 0 toolbar no fullscreen yes titlebar no information html网页文件 增大 window setTimeout window close 5000 window setInterval grow 100 functiongrow window resizeBy 5 5 通知5秒钟以后 这个窗口会自动关闭 window对象 属性 closed属性 opener属性 defaultstatus属性 status属性 screenTop属性 screenLeft属性 window html关闭子窗口varchild window open information html blank top 0 left 0 toolbar no fullscreen yes titlebar no functioncloseChild if child closed child close 文本在状态栏上显示 setInterval scroll 100 varspace num 0 vardir 1 functionscroll varstr space space num space num 1 dir if space num 40 space num information htmlwindow setTimeout window close 5000 window setInterval grow 100 functiongrow window resizeBy 5 5 functioncloseit window close opener start or window setTimeout window closeit 5000 通知5秒钟以后 这个窗口会自动关闭 window对象 事件 专用事件 onload 加载时执行 事件 onunload 事件 onbeforeunload事件通用事件 onclick事件 onmousemove事件 onmouseover事件 onmouseout事件 onmousedown事件 onmouseup事件 onkeydown事件 onkeyup事件 onkeypress事件 window event htmlalert ok2 helloalert ok3 alert ok1 window对象 对象属性 location对象 event对象 frames数组对象 screen对象 history对象 navigator对象 document对象 location对象 属性 location对象 方法 window location href 等效于window navigate location htmlwindow location replace window navigate window location href event对象 属性 eventobject html按下键盘事件functionwindow onkeypress alert window event keyCode 按ESC关闭窗口functionwindow onkeypress alert window event keyCode if window event keyCode 27 window close 其它属性functioncheckCancel if window event shiftKey window event cancelBubble true functionshowSrc if window event srcElement tagName toLowerCase img IMG要大写 alert window event srcElement src screen对象 属性 history对象 方法 document对象 属性 functionchangeDoc document bgColor blue document fgColor red document alinkColor yellow document vlinkColor 0 x00ff00 document linkColor gray 这是普通的文本这是一个超链接 document对象 无标题文档functionchange color document bgColor color 移过来我变色给你看看 变红色 变蓝色 变黄色 利用document对象的bgColor属性改变背景色 添加鼠标悬停事件 document对象的方法 方法 这是最初的内容document write 这是write方法动态写入的内容 functionupdatedoc document writeln abc document writeln def document close varowin window open blank owin document writeln xyz owin document close owin document write abc owin document write def owin document close 这是最初的内容document write 这是write方法动态写入的内容 functionupdatedoc document writeln abc document writeln def document writeln document writeln functionupdatedoc document writeln document writeln document writeln abc document writeln document writeln def document writeln document writeln document writeln document close document writeln abc document writeln def document close varowin window open blank owin document writeln xyz owin document close owin document write abc owin document write def owin document close document对象的集合 属性 访问方式 用document links 0 访问链接用document images 0 或document images imgName 访问图像用document forms 0 或document forms frm 访问表单用document images 0 src访问图像src属性 访问第一个图像元素的方式 document images sample 0 document images item sample或0 作为document属性document sample 0 srcdocument img1 src作为window属性window sample 0 srcsample 0 srcwindow img1 srcimg1 src DOM艺术的精髓 节点 文档是由节点构成的集合元素节点文本节点属性节点 开始DOM之旅 getElementById 返回一个与那个给定id属性相对应的对象getElementsByTagName 返回一个跟标签名相对应的对象数组getAttribute 查询对象的属性值setAttribute 设置对象的属性值 练习 检索一份文档 把所有的 title 属性的值全部提取出来给一个设置一个 title 属性 并检索出来改变的 title 属性 并检索出来设置完成后 查看源代码 发现是否修改文档内容我的美术馆 完善美术馆 childNodes属性从给定文档的节点树里把任何一个元素的所有子元素检索出来 返回一个数组 nodeType属性返回一个节点是什么类型的属性值元素节点的nodeType属性值是1 属性节点的nodeType属性值是2 文本节点的nodeType属性值是3 nodeValue属性用于检索和设置节点的值firstChild和lastChild属性返回第一个节点和最后一个节点 类似node childNodes 0 和node childNodes node childNodes length 1 练习 给每张图片添加一个描述描述内容提取自每个链接的 title 属性 动态创建HTML内容 createElement 创建一个元素节点appendChild 把新创建的节点插入某个文档中createTextNode 创建一个文本节点 练习 创建一个HTML内容Thisismycontent 把上面这个内容添加到一个中显示出来修改美术馆 把图片描述改成动态添加 重回美术馆 insertBefore 把一个新元素插入到一个现有元素的前面parentElem insertBefore new target parentNode属性返回目标节点的父节点nextSibling属性返回目标节点的下一个兄弟节点 HTML的动画效果 elem style position absolute elem style left 100px elem styple top 100px setTimeout clearTimeout 练习 移动的文字移动的图片通过链接浏览图片 1 插入一个层Layer1 z index 1 2 层中插入一幅图片 3 定时器函数setTimeout 的用法 setTimeout 调用的函数名 间隔的毫秒数 表示每隔多少毫秒 就循环调用某个函数来执行清除某个定时器 clearTimeout 方法 例如 varmyclock setTimeout move 500 if clearTimeout myclock 随机移动图片 functionmove document getElementById Layer1 style left Math random 500 document getElementById Layer1 style top Math random 500 setTimeout move 1000 随机漂浮的广告 随机移动图片 定义层图片移动的函数move 每隔1秒调用move 函数随机改变层的位置 从而实现随机漂浮的效果 getElementById ID名称 方法 根据ID名称获取HTML元素 这里表示获取层对象Layer1 left和top表示层Layer1的左边距和上边距 设定为随机的值 form对象 form对象最主要的功能就是能够直接访问HTML文档中的form表单 一个web页面可以有一个或多个from表单 使用document froms数组对象可以访问到各from表单 可以将对象的属性 来引用该表单字段元素所对应的对象 表单基础 method 浏览器发送方式GET POSTaction 表单所要提交到的URLenctype 向服务器发送数据时 数据使用的编码方式accept 当上传文件时 列出服务器能正确处理的mime类型accept charset 当提交数据时 列出服务器接受的字符编码 text 单行文本 radio 单选按钮 checkbox 复选按钮 file 文件上传文本框 password 密码输入框 button 产生自定义动作的按钮 submit 提交按钮 用于提交表单 reset 重置按钮 恢复表单默认值 hidden 隐藏表单域 不会显示在窗口中 image 图像 与提交按钮功能一样 其他 下拉列表 下拉列表选项 文本域rows和cols 事件处理程序和表单元素简介 当事件发生时 将执行与之相关的JavaScript代码 当发生特定事件时 事件处理程序指定要执行哪些JavaScript代码 事件处理程序和表单元素简介 当用户单击 注册 按钮时 将弹出一条消息 functionbutton click alert 请向本网站注册 文本框对象 文本框元素用于在表单中输入字 词或一系列数字可以通过将HTML的INPUT标签中的type设置为 text 以创建文本框元素 文本框对象 事件处理程序 文本框对象 card price number tot myform 练习 要求 当光标进入帐号文本框 清空里面所有内容当光标离开帐号文本框 检查输入内容是否为 10 开头 并且是数字 如果有误 弹出提示框单价文本框预设价钱25 00 设为只读当修改数量文本框时 计算总价 并显示在总价文本框中 命令按钮对象 命令按钮对象是网页中最常用的元素之一 按钮 事件处理程序 onSubmit事件处理代码 如果函数返回true 则向远程服务器提交表单 如果函数返回false 则取消提交 命令按钮事件处理程序 userName pass1 pass2 type reset type submit myform 练习 要求当点击注册按钮提交表单时 判断密码文本框内容和确认密码文本框内容是否相同 如果两个密码输入不同 则弹出提示框 停止表单提交相同再进行提交 复选框对象 当用户需要在选项列表中选择多项时 可以使用复选框对象要创建复选框对象 请使用标签 请选择您的爱好电影电影 复选框 事件处理程序 复选框 事件处理程序 checkbox1 checkbox2 checkbox3 设置复选框的值 checkbox4 myform 练习 要求当点击成交按钮时 检查每个复选框的选中情况 累计用户选中的商品弹出确认提示框 显示客户选中商品 询问客户是否确认购买如果客户点击确认 则在页面上显示详细购买信息 单选按钮对象 当用户只需要从选项列表中选择一个选项时 可以使用单选按钮对象要创建单选按钮对象 请使用标签 男女 单选按钮 事件和属性 单选按钮 事件处理程序 为了保证单选 两个单选按钮的名称都为myradio 组成了myradio数组 练习 要求根据用户身份的不同显示不同信息买家时 显示是否购买XXX商品卖家时 显示是否出售XXX商品 下拉列表框 请选择开户帐号的城市 北京市上海市重庆市天津市四川省山东省湖北省 下拉列表框 事件和属性 options 0 options 1 selectedIndex属性 表示被选中的索引号 3 value属性 被选中选项的值 下拉列表框 事件处理程序 下拉列表框 事件处理程序 userName myselect mycity myform 练习 要求判断下拉列表框改变时 是否选择的是直辖市 如果是 则在城市文本框中填入该直辖市的名字 如果不是 则什么都不填 点击注