window作用
- 所有全局的变量都是window的属性
- 所有全局的函数都是window的方法
window的应用
<script>
//window作用
//1.所有全局的变量都是window的属性
//2.所有全局的函数都是window的方法
//全局的变量
var age = 17;
// console.log(window.age);
//全局函数
function Dog() {
console.log('这是一直够');
}
function Person() {
console.log(this);
}
Person();//window
new Person();//Person 因为哥么变成了构造函数了!!所属类就是Person类!!
//第二大作用
//动态跳转
window.alert(0);
window.location.href = 'http://OC:我爱你';
</script>
Document作用
- 可以动态获取网页中所有的标签(节点)
- 可以对获取到的标签CRUD(增删改查)
Document的应用
案例一：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用操作1</title>
<script>
function changeImag() {
//1.拿到图片
var img = document.getElementsByClassName('icon')[0];
//2.修改src属性!
img.src = 'imgs/img_02.jpg'
}
</script>
</head>
<body>
<img class="icon" src="imgs/img_01.jpg">
<p></p>
<button onclick="changeImag();">更换图片</button>
</body>
</html>
案例二：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<img class="icon" src="imgs/img_01.jpg">
<p id="word">这里的风景真的好美!!欢迎来潭州!!!</p>
<p></p>
<button >隐藏</button>
<script>
//1.1拿到所有要操作的标签
var icon = document.getElementsByClassName('icon')[0];
var p = document.getElementById('word');
var btn = document.getElementsByTagName('button')[0];
console.log(btn);
//1.2 监听按钮的点击
btn.onclick = function () {
if(btn.innerText == '隐藏'){
//隐藏 css属性 style display
icon.style.display = 'none';
p.style.display = 'none';
btn.innerText = '显示';
}else {
icon.style.display = 'block';
p.style.display = 'inline-block';
btn.innerText = '隐藏';
}
}
</script>
</body>
</html>