Javascript与DOM交互.ppt

* * * * * * * * * 演示DEMO在… * event对象 在IE下，window对象下面还有一个event对象. 代表事件发生时的状态，如激发事件的元素，键盘状态，鼠标位置和鼠标按钮状态。 * event对象 srcElement属性 设置或获取触发事件的对象。 示例：点击按钮，在事件处理函数中获取点击的按钮 input id=button1 type=button value=Button onclick=clickbutton(); / div id=result/div function clickbutton() { var event = window.event; document.getElementById(result).innerHTML = tagName = + event.srcElement.tagName + br/‘ + id = + event.srcElement.id; } * event对象 srcElement属性 设置或获取触发事件的对象。 示例：点击链接地址中含baidu字符串不跳转，其他跳转 a href=/ onclick=return clicklink();链接到科大讯飞/a a href=/ onclick=return clicklink();链接到百度/a function clicklink() { if (window.event.srcElement.href.indexOf(baidu) 0) { alert(此次链接跳转被取消); return false; } return true; } * event对象 keyCode属性 设置或获取事件关联按键的 Unicode 按键代码。 ctrlKey 设置或获取 Ctrl 键的状态。 altKey 设置或获取 Alt 键的状态。 shiftKey 设置或获取 Shift 键的状态。 * event对象 keyCode属性 示例：捕获在文本框中的按键 . input type=text onkeypress=showkey(); value=点击按键会有提示.. / function showkey() { var result = keyCode = + window.event.keyCode; if (window.event.ctrlKey) { result += \r\n您同时按下了Ctrl键; } if (window.event.altKey) { result += \r\n您同时按下了Alt键; } if (window.event.shiftKey) { result += \r\n您同时按下了Shift键; } alert(result); } * 答疑 Q A * * * * * * * * * * * * * * * * * * * * * * * * * * * Javascript与DOM交互 leizhang5@ 课程目标 掌握Javascript的基础知识 掌握Javascript与DOM的交互 掌握jQuery类库的使用 * 单元目标 掌握window对象的使用（重点） 掌握document对象的使用（重、难点） * 前置知识 《HTTP基础》 《HTML基础》 《CSS基础》 * 单元目录 window对象 event对象 docuemnt对象 * window对象 JavaScript 层级中的顶层对象。window对象会呈现一个浏览器窗口。 每当 body 或者 frameset 标签出现，window 对象就会被自动创建。 * window对象 事件 onload事件 在浏览器加载所有对象后立即触发。（包括图片等资源） onunload 在关闭窗口时触发。（包括F5刷新） window.onload = function() { alert(window onload.); } * window对象 属性 status 设置或获取位于窗口底部状态栏的信息。 window.onload = function() { window.status = “window onload.”; } 示例：鼠标移动到图片时，在底部状态栏提示图片的信息 img src=../images/silverlight2.jpg alt=silverlight2.jpg width=1024px onmouseover=window.status=Silverlight是跨浏览器、跨平台的技术。; / * wi