BOM,DOM
1.BOM
1.window对象
1.location
1.location.href
2.location.href='地址' --->跳转
3.location.reload() --->重新加载
2.计时器:
1.一段时间后做什么事.
1.setTimeout('JS语句',毫秒)
2.clearTimeoutl()
2.每隔一段时间做什么
1.setInterval('JS语句',毫秒)
2.clearInterval()
2.DOM
1.查找标签
1.直接查找
1.document.getElementById() -- 根据ID标签查找
2.document.getElementByClassName() -- 根据class属性查找
3.document.getElementByTagName() -- 根据标签名获取标签集合
.间接查找
1.parentElement --- 父标签标签元素
2.children --- 所有的子标签
2.文档的操作
1.创建标签
1.var s1Ele = document.createElement('option')
3.文档内容
1.innerText
2.innerHTML --> 可以认识HTML标签
4.获取用户输入标签的值 (input/select/textarea)
1.value
5.样式的操作
1.classList
1.add
2.remove
3.contains
4.toggle
2.直接操作style
1.obj.style.backgroundColor = 'red'
6.时间
1.绑定方式
1.直接在HTML中写属性
2.使用JS绑定事件
常用事件
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。
计时器例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>计时器示例</title>
<!--<script>-->
<!--// var i1Ele = document.getElementById('i1')-->
<!--// alert(i1Ele)-->
<!--//当文档加载完之后才执行-->
<!--var i1Ele = document.getElementById('d1');-->
<!--alert(d1Ele.innerText)-->
<!--</script>-->
</head>
<body>
<input type="text" id="i1">
<input type="button" id="start" value="开始">
<input type="button" id="stop" value="结束">
<div id="d1">傻逼</div>
<script>
// var i1Ele = document.getElementById('d1');
// alert(d1Ele.innerText)
//把当前事件塞到I1标签中
function setTime(){
//1找到标签
var i1Ele = document.getElementById('i1')
//2拿到当前时间
var now = new Date()
//3设置i1标签的value属性为now时间
i1Ele.setAttribute('value',now.toLocaleString())
}
setTime();
//定义一个存放计时器ID的全局变量
var t;
//点击开始按钮,让i1标签中的时间动起来
//1.找到开始按钮,绑定点击事件
var startBtn = document.getElementById('start');
startBtn.onclick = function() {
//要做的事
if(t === undefined){
//一秒钟执行一次设置value动作
t = setInterval(setTime,1000);}
}
//点击结束按钮,终止设置时间的定时任务
//找到结束按钮,绑定点击事件
var stopBtn = document.getElementById('stop');
stopBtn.onclick = function(){
//清除上面的定时器
clearInterval(t);
t = undefined
}
</script>
</body>
</html>
事件例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>两个select联动</title>
</head>
<body>
<select id="s1">
<option value="">请选择省</option>
</select>
<select id="s2">
</select>
<script>
var data = {
'广东省': ['广东市', '深圳市', '惠州'], '北京': ['朝阳区', '海定区']
, '山东': ['威海', '大连']
}
var s1Ele = document.getElementById('s1');
//页面一刷新,把所有的省加载到第一个select标签内
for (var i in data) {
console.log(i);
//创建一个option
var op = document.createElement('option');
// 设置文本
op.innerText = i;
// 把创建好的标签塞到第一个select标签内部
s1Ele.appendChild(op);
//给第一个select标签绑定一个值发生变化的事件
var s2Ele = document.getElementById('s2');
s1Ele.onchange = function () {
//获取当前select选中的值
var value = s1Ele.value;
//1去data里找对应的地区信息
var data2 = data[value];
//2清空第二个select标签的内容
s2Ele.innerText = '';
//3把对应的地区信息追加到第二个select标签内
for (var j = 0; j < data2.length; j++) {
var op = document.createElement('option');
//设置文本
op.innerText = data2[j]
//把创建好的标签塞到第二个select标签中
s2Ele.appendChild(op);
}
}
}
</script>
</body>
</html>
