1. Dom作用
JavaScript最终是要操作Html页面,让Html变为DHtml,而操作Html就要用到Dom。Dom就是把Html页面模拟成一个对象。就像XDocument一样,把XML模拟成了一个对象,
提供了操作各个节点的方法,直接调用就可以了。
如果JavaScript只是执行一些计算、循环等操作,而不能操作Html,
也就失去了存在的意义
2. Dom入门
Dom就是Html页面的模型,将每个标签都做成一个对象,JavaScript通过调用Dom中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。
比如通过操作文本框的Dom对象,就可以读取文本框中的值、设置文本框中的值。
JavaScript-->Dom 就相当于 c#-->.Net Framework没有.Net,c#就只能for, while,连writeline messagebox都不行
Dom就是一些让JavaScript能操作Html页面控件的类、函数
Dom也像winform一样,通过事件、属性、方法进行编程
3. 顶级对象
这个网页就是一个window对象--window是顶级对象,window对象代表当前浏览器窗口使用window对象的属性、方法时可以省略window
能不写window就不要写,这样可以减少js文字的字节数
document并不是顶级对象
<head>
<title></title>
<script type="text/javascript">
//方法1
window.onload = function () {
document.getElementById('btn2').onclick = f2; //如果写成f2() 则表示直接调用
//而不是点击调用
};
//获取页面的按钮并注册事件
//方法2
function f1() {
//this代表window
alert(this.id);
}
function f2() {
//this是代表按钮
alert(this.id);
}
</script>
</head>
<body>
<!--如果在标签中直接让事件执行什么方法,必须加括号-->
<input type = "button" name = "name" value = "第一个" id = "btn1" onclick = "f1()"/>
<input type = "button" name = "name" value = "第二个" id = "btn2" />
</body>
4. document 和 body范围
document 范围大body范围 只是body所在区域
页面的点击事件有两个
body的onclick --只限于在body中点击才触发
document.onclick --整个页面内点击都可以触发
5. 对话框 转跳
window.alert('大家好'); // 警告对话框
window.confirm('确定要删除吗?'); // 确定取消对话框window.navigate(url) // 将网页重新导航到url,只支持IE
window.location.href = 'http://www.baidu.com' //支持大多数浏览器
6. 计时器
window.setInterval(code,delay) //每隔一段时间执行一次指定的代码类似于winform中的Timer控件
var setId = setInterval(function () {
alert('haha')
}, 1000);
//清除计时器
clearInterval(setId);
因为setInterval可以设定多个定时器,所以clearInterval要指定哪个定时器
即setInterval的返回值
7. 一次性计时器
setTimeout(code,delay)clearTimeout(timeoutID)