1 BOM：通过js控制浏览器
代码块
弹出框：alert('hello,world')
打开一个新的窗口：window.open()
2 window子对象
2-1 navigator导航对象
代码块
获取浏览器全称：navigator.appName;
获取版本：navigator.appVersion;
获取客户端绝大多数信息：navigator.userAgent;
获取浏览器操作系统：navigator.platform;
2-2 location对象
代码块
获取当前页面的网址：location.href
跳转到指定的网址：location.href='http://www.sofo.com'
重新加载当前页面：location.reload()
2-3 弹出框
代码块
警告框：alert('are you sure ?')
确认框：confirm('你确定吗')
提示框：prompt('请输入提示内容','西红柿')
2-4 计时
代码块：多长时间后执行
setTimeout(function(){alert('hello')},4000);
3秒后执行launch函数
function launch(){
alert('hello');
}
setTimeout(launch,3000)
代码块：每隔一段时间做
定义一个函数
function auto(){
console.log('hello,world')
}
每隔一段时间，3秒执行打印
var res = setInterval(auto,3000)
清除打印，结束打印：clearInterval(res);
3 通过JS操作DOM
3-1 查找标签
代码块
通过ID获取标签：document.getElementById('d1')
根据类名class去找：document.getElementsByClassName('c1')
根据标签的名字去找：document.getElementsByTageName('p')
3-2间接查找
3-3 添加节点
代码块：创建一个标签，放到子节点最后
第一步：找到父节点
var father =document.getElementById('d2');
第二：生成子节点
var last_son =document.createElement('div');
第三：子节点文字
last_son.innerText='helloworld';
第四：插入正确位置
father.appendChild(last_son);
3-4 删除节点
4 属性attribute
4-1 属性的操作
代码块
HTML代码如下：
<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div标签</div>
<p>我是后面的P</p>
</div>
js代码如下：
var res =document.getElementById('d3');
拿到属性值：res.getAttribute('ec14');
"siyu"
设置新的属性值：res.setAttribute('ec14','wanjun');
查看属性值是否为新的：res.getAttribute('ec14');
"wanjun"
移除属性值：res.removeAttribute('ec14');
undefined
res.getAttribute('ec14');
null
4-2通过标签名操作属性
代码块：
HTML代码：
<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div标签</div>
<p>我是后面的P</p>
<span class='c1' dept='it center'>我是王思雨</span>
</div>
js代码：
拿到span标签：var res = document.getElementsByTagName('span');
是一个数组。
res[0].getAttribute('dept');
"it center"
res[0].setAttribute('dept','database');
undefined
res[0].getAttribute('dept');
"database"
res[0].remove('dept');
undefined
4-3 通过标签名操作图片的属性
代码块
HTML:
<img id='c1' src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2894487835,3534766040&fm=58&bpow=480&bpoh=640" alt="" />
JS:
res=document.getElementById('c1');
res.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569079312315&di=2851a676ef5ad078b2b9055b8249fa33&imgtype=0&src=http%3A%2F%2Fy.zdmimg.com%2F201702%2F07%2F5899a7e766f035068.jpg_e600.jpg');
4-4通过js操作表单的内容
代码块
HTML代码部分：
<body>
<input type="text" id='i1'>
<input type="password" id='i2'>
<select id='s1'>
<option value='杭州'>杭州</option>
<option value='上海'>上海</option>
</select>
<textarea id='t1' cols="60" rows="60">请输入内容：</textarea>
</body>
JS代码部分：
res1=document.getElementById('i1');
<input type="text" id="i1">
res1.value;
"王思雨"
"王思雨"
res2=document.getElementById('i2');
res2.value;
"qwehkkwjjkd"
res3=document.getElementById('s1');
<select id="s1">…</select>
res3.value;
"杭州"
res4=document.getElementById('t1');
res4.value;
"请输入内容：真正的猛男"
5样式操作
代码块
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.c1{
height:100px;
100px;
background-color:#F00;
border-radius:50%;
}
.c2{
background-color:#9F0;}
</style>
</head>
<body>
<div id='d1' class="c1 c2"></div>
</body>
</html>
JS代码如下：
d1ele=document.getElementById('d1');
d1ele.classList.remove('c2'); 移除c2的属性
d1ele.classList.add('c2'); 添加C2的属性
d1ele.classList.contains('c2'); 查询是否包含某个属性
来回切换属性值：
d1ele.classList.toggle('c2');
false
d1ele.classList.toggle('c2');
true
6 指定css的操作
代码块
d1ele;
<div id="d1" class="c1 c2"></div>
d1ele.style.backgroundColor='blue';
"blue"
d1ele.style.borderRadius='20px';
"20px"
7 js捆绑元素之获得焦点（直接在标签内绑定事件）
代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.c1{
height:100px;
100px;
background-color:#F00;
border-radius:50%;
}
.c2{
background-color:#9F0;}
</style>
</head>
<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' onclick="change()">点击我切换颜色</button>
<script>
function change(){
var d1ele=document.getElementById('d1');
d1ele.classList.toggle('c2');
}
</script>
</body>
</html>
8 通过在js代码中绑定事件控制样式
代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.c1{
height:100px;
100px;
background-color:#F00;
border-radius:50%;
}
.c2{
background-color:#9F0;}
</style>
</head>
<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' >点击</button>
<script>
var b1ele=document.getElementById('d1');
b1.onclick=function(){
var d1ele=document.getElementById('d1');
d1ele.classList.toggle('c2');
}
</script>
</body>
</html>
9 js常用事件
10：练习获得焦点和失去焦点输入框默认值的变化
代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type='text' value="请输入姓名：" id="i1">
<script>
resele=document.getElementById('i1');
//获得焦点：
resele.onfocus=function(){
this.value='';
}
resele.onblur=function(){
this.value='请输入姓名：';
}
</script>
</body>
</html>
11 js级联列表，选择省份，后面城市自动变化
代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习曲</title>
</head>
<body>
<label for="s1">省份：</label>
<select id='s1'>
<option>请选择省份</option>
</select>
<label for="c1">城市：</label>
<select id="c1">
<option>请选择城市</option>
</select>
<script>
var data = {
"北京": ["昌平区", "海淀区", "朝阳区"],
"上海": ["浦东区", "徐汇区", "浦东新区"],
"山东": ["烟台", "青岛", "威海"]
};
// 1. 拿到所有的省，在s1中生成对应的option选项
var s1ele=document.getElementById('s1');
var c1ele=document.getElementById('c1');
for (var i in data){
console.log(i);
// 2. 创建option标签,将i赋值给option,将option添加到父元素里面就OK
var tmp =document.createElement('option');
tmp.innerText=i;
s1ele.appendChild(tmp);
}
// 3.当用户选中某个省之后才做的事儿
s1ele.onchange=function(){
//清空之前选择省份添加的城市项
c1ele.innerHTML='';
//获取用户选择的省份
var p=this.value;
// 根据用户选择的省，去data中找省对应的城市数据
var c=data[p];
//将对应城市数据添加到option中
for (var m in c){
console.log(m);
var tmp1=document.createElement('option');
tmp1.innerText=c[m];
c1ele.appendChild(tmp1);
}
}
</script>
</body>
</html>