到目前为止,我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法,并没有和浏览器有任何交互。
也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知识。
JavaScript分为 ECMAScript,DOM,BOM。
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。
DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。
Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write()可以简写成:document.write()。
window对象
通过id找到该id下的所有html文档
如:
原html文档内容
通过document.getElementById(‘s1’)可获取对应的文档内容
新建便签并添加到一个父便签中
如:
原文件如下
通过document.createElement('标签名’)
和父文档.appendChild(变量名)
来创建标签和添加文本和添加到父标签内。
在标签中增加属性
在便签中删除属性
如
原文件如下
事件
常用事件
- setTimeout(绑定的事件,时间(毫秒))
timeout:时间到了
清除事件
clearTimeout(事件id) - setInterval(事件,时间(毫秒))
Interval:间隔,每隔设定的事件就触发一次设定点的事件。
清除事件
clear
方法一:通过console给定的id值清除
方法二:通过赋值对象清除
绑定方式
- 方式一
- 方式二
事件示例
- 搜索框实例
计时器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id = 'i1'>
<input type="button" id = 'start' value="开始">
<input type="button" id = 'stop' value="停止">
<script>
function setTime() {var i1Ele = document.getElementById('i1'); var now = new Date(); i1Ele.setAttribute('value', now.toLocaleString())} setTime();
var t;
var startBtn = document.getElementById('start');
startBtn.onclick = function() {if (t === undefined) {t = setInterval(setTime, 1000);}};
var stopBtn = document.getElementById('stop'); stopBtn.onclick = function () {clearInterval(t); t = undefined;}
</script>
</body>
</html>
思路
1. 插入三个form格式的输入框,第一个显示点击开始的时间,第二个是点击按钮,第三个是停止按钮。<input type="text" id = 'i1'> <input type="button" id="start" value="开始"> <input type="button" id="stop" value="停止">
2. 定义一个在输入框中显示当前时间的函数.
2.1 找到第一个输入框 var i1Ele = document.getElementById('i1');
2.2 新建一个时间对象 var now = new Date();
2.3 在标签中插入属性value和属性值 i1Ele.setAttribute('value', now.toLocaleString())}
2.4 立即执行该函数
3. 找到开始按钮 var starBtn = document.getElementById('start')
4. 点击开始按钮时触发的事件 starBtn.onclick = function() {if (t === undefined) {t = setInterval(setTime, 1000);}}
5. 点击结束按钮时触发的事件
5.1 找到该标签 var stopBtn = document.getElementById('stop');
5.2 设置事件 stopBtn.onclick = function() {clearTnterval(t); t = undefined;} //把t设置为undefined的目的是点击开始按钮时可重新赋值新的时间。
- select联动
显示效果:当点击第一个选项框时,第二个选项框的值随着变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="s1"><option value="">请选择省</option></select>
<select name="" id="s2"></select>
<script>
var date = {"广东省": ["广州市", "深圳市", "惠州"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}
var s1Ele = document.getElementById('s1');
var s2Ele = document.getElementById('s2');
for (var i in date) {console.log(i); var op = document.createElement('option');op.innerText = i; s1Ele.appendChild(op);}
s1Ele.onchange = function() {var value = s1Ele.value; var date2 = date[value];s2Ele.innerText = ''; for (var j=0;j<date2.length;j++) {var op = document.createElement('option'); op.innerText = date2[j]; s2Ele.appendChild(op)}}
</script>
</body>
</html>
解题思路:
解题思路:
1 先在html文档中添加两个select便签,一个是选择省份标签,一个选择市区标签。第一个标签:<select id="s1"><option>请选择省</option></select> ;第二个标签:<select id="s2"></select>
2 在script标签内定义一个自变量,需要的数据 var date = {"广东省": ["广州市", "深圳市", "惠州"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}
3 找到第一个选项的所以html文档,并赋值给一个变量 var s1Ele = document.getElementById('s1')
4 找到第二个选项的所有html文档,赋值给一个变量 var s2Ele = document.getElementById('s2')
5 当点击第一个选择框时出现的所有option添加到s1中
5.1 循环遍历date。 for (var i in date)
5.2 新建一个option标签,并赋值给op变量 {var op = document.createElement('option')}
5.3 在新建的option标签中插入文本 op.innerText = i;
5.4 把op添加到s1便签中
6 当选中某个省时,右边的选择框出现该省下的市区 s1Ele.onchange =
6.1 获取选中的省并赋值给value。 var value = s1Ele.value;
6.2 获取value在date中对应的值的索引值。 var date2 = date[value]
6.3 把选项2中的值设置为空。 s2Ele.innerText = ''
6.4 根据索引值对应的值,把每个值一一添加进第二个选项中。 for (var j=0; j < date2.length; j++) {var op = document.createElement('option'); op.innerText = date2[j]; s2Ele.appendChild(op)}