成果黑马九期javascript

1、北京传智播客教育 JavaScript DOM讲师：蒋坤课前说明目标能使用JavaScript操作DOM进行DHTML的开发课程内容基本的DOM方法与属性常见的网页设计技巧与原则参考书：张孝祥JavaScript网页开发体验式学习教程犀牛书：JavaScript权威指南(比较枯燥)为什么要写DOM- HTML页面动态化- 提升用户的交互性- 提升用户体验- DOM将整个HTML页模拟成一个树DOM基础- DOM是HTML的页面模型- 如何分析DOM树(*)- DOM对于HTML就好比.NetFramework对C#- DOM就像WinForm一样有属性与事件- DHTML = CSS + DO

2、M(HTML) + JavaScript- 使用IETest或IE Collection进行IE上的调试- 火狐：FireDeBug- Chrome有自带工具常见Dom事件与方法- getElementById- getElementsByTagName- getAttribute- setAttribute- onclick- onload节点- HTML的成员在DOM中都是一个节点- 节点的常用属性- nodeType有12中取值，常用：1元素、2属性、3文本- nodeName- nodeValue控制文本节点- childNodes- firstChild- lastChild父节点.

3、firstChild美术馆案例(*)- 添加showPic方法- 点击不让图片跳转- 点击获得图片的链接- 点击图片切换到指定占位符中- 点击获得文本- 点击显示文本分离- 向CSS学习- 提高效率分工，如何协作？- 分离JavaScript- 让文档与JS之间只有id或class作为纽带- 例子分析- 为页面上所有连接添加onclick事件美术馆案例改版- 分离- 解决向后兼容性- 确保可理解- 步骤(可以优化连接为图片预览)- 添加一个prepareGallery的方法(js文件)- 解决id问题- 获得所有的a标签，得到里面的链接- 遍历添加onclick事件- JavaScript优化

4、- 不要做过多假设- 追加onload事件动态创建HTML内容- 常见的老技巧document.Write()方法.innerHTML属性- DOM提供的方法createElement()createTextNode()appendChild()DOM Core和HTML-DOM- 到此用过的方法getElementByIdgetElementsByTagNamegetAttributesetAttribute- 以上方法均为DOM Core的组成部分- 对于HTML-DOM也有许多简化document.formselement.srcinnerHTML还是操作Dom节点操作页面的元素的时候是

5、用innerHTML的方式还是createElement()、appendChild()与removeChild()的方式？1.对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的Dom操作(有专门用C或C+写的html解析器。)。先将页面的HTML代码写好，然后调用一次innerHTML,而不要反复调用innerHTML.2.对于使用innerHTML=的方式来删除节点，在某些情况下会存在内存问题。比如：div下面有很多其他元素，每个元素都绑定有事件处理程序。此时，innerHTML只是把当前元素从节点树上移除了，但是那些事件处理程序依然占用内存。设计DHTML的一个原则-

6、JavaScript效果是很好，但也有不适的时候- 对于页面，是要反应的内容- 主要的内容不应尝试有js来加入- 页面上应该保留主要内容，由js来优化HTML-DOM- DOM有一个HTML的专用版本- 使用VS快速高效的编辑事件-在DOM中有很多事件(演示事件)- onload页面加载完毕时触发- onunload页面卸载后触发- onbeforeunload页面卸载前触发window对象(DOM的第一个对象)- window相当于当前浏览器窗口- 使用window对象属性、方法时可以省略window(节约字节数)- 例如alert、document等window对象- confirmboo

7、l confirm(提示字符串);- window.navigate(url);winodw.location.href = url;- setInterval(code, delay);clearInterval(intervalId);案例：文本框自增- setTimeoutclearTimeout案例：延迟操作window对象属性- window.locationhrefreload()- window.eventevent.altKey、ctrlKey、shiftKeyevent.clientXevent.clientYevent.screenXevent.screenYevent.o

8、ffsetXevent.offsetYwindow对象- event.button- window.screen获取屏幕信息(width,height)- 剪贴板(clipboardData对象)clipboardData.setData(text, value);clipboardData.getData(text);clipboardData.clearData(text);oncopy事件、onpaste事件、oncut事件- 禁止复制、禁止粘贴、复制添加版权案例window对象- history属性window.history.back(); window.history.go(-1)

9、;window.history.forward();window.history.go(1);document属性- document.write()- document.writeln();- getElementById- getElementsByName- getElementsByTagName-案例点击按钮变“呜呜”，其余变“哈哈”十秒后允许点击加法计算器美女时钟事件冒泡- 写一个层- 层里面一个p- 里面一个按钮- 分别添加onclick事件取消事件冒泡： window.event.cancelBubble = true;动态创建table的另一种方法- 使用.insertRow

10、(-1);表示添加一行- 使用.insertCell(-1);表示添加一个单元格使用js操作样式- 可以添加class属性- 但是class是js的保留字，使用className属性- 可以通过style属性进行处理(style是一个对象).style. = - 案例练习案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。案例2：评分控件练习练习1：超链接的单选效果。练习2：点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。练习3：放若干文本框，获

11、得焦点的文本框黄色背景，其他控件背景颜色是白色练习4：点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。控制层的显示- 添加一个按钮与一个层- 注册点击事件，设置层的style.display = none- 设置表示默认- 需要注意样式的控制只可控制内联样式案例：鼠标放到超链接上的时候显示一个图片或文字案例：动态改变层的大小(平滑效果)事件范围- 所有元素均可以添加事件- 点击事件可以针对body也可以是document- 但是每个事件是有作用范围的案例：跟着鼠标移动的图片练习点击登录界面点击按钮弹出一个层，显示用户输入列表高亮显示一个列表，鼠标移上会高亮显示电子时钟一个电子表的案例搜索文本框没有获得焦点的时候，有灰色的文字，获得焦点后文字消失，等待用户输入，如果没有文字，失去焦点后出现灰色的提示文字form对象- 调用事件方法click()、focus()、blur()- 提交表单- 使用submit标签ss- 用button标签，调用submit标签的click方法- onsubmit事件- form对象的submit方法String正则表达式- 匹配test声明正则表达式对象(双斜线之间)reg.test方法- 提取execreg.exec方法- String提供的方法- 替换replace- 全局模式模拟trim方