js的内置对象
2017-07-16 本文已影响9人
阿凡提说AI
1.window对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// window
// 1.所有全局的变量都是它的属性
// 2.所有全局的函数都是它的函数
// console.log(age);
// console.log(window.age+ '------');
// function sum(){
// var age = 18;
// console.log(age);
// }
// sum();
// window.sum();
// console.log('000000');
// window.console.log('111111');
// function dog(){
// console.log(this);
// }
//
// //
// dog()
//
// var dog1 = new dog();
// window.location.href = 'http://www.baidu.com';
location.href = 'http://www.520it.com';
</script>
</body>
</html>
2.document对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
// document
// 1.动态的获取网页中所有的节点
// 2.可以动态的对节点进行CRUD
// 3.CRUD是指在做计算处理时的增加(Create)、读取(Retrieve)（重新得到数据）、更新(Update)和删除(Delete)
// document.write('hello world');
// document.write('<button>百度一下</button>');
// document.write('');
// getElementById id名
// getElementsByClassName className
// getElementsByName 根据标签的内部属性name
// getElementsByTagName
function change(){
var img = document.getElementsByTagName('img')[0];
img.src = 'img/img_02.jpg';
}
</script>
</head>
<body>
<p></p>
<button onclick="change();">改变图片</button>
<div class="test1"></div>
</body>
</html>
3.来回切换图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
// document
// 1.动态的获取网页中所有的节点
// 2.可以动态的对节点进行CRUD
// 3.CRUD是指在做计算处理时的增加(Create)、读取(Retrieve)（重新得到数据）、更新(Update)和删除(Delete)
// document.write('hello world');
// document.write('<button>百度一下</button>');
// document.write('');
// getElementById id名
// getElementsByClassName className
// getElementsByName 根据标签的内部属性name
// getElementsByTagName
function change(){
var img = document.getElementsByTagName('img')[0];
img.src = 'img/img_02.jpg';
}
</script>
</head>
<body>
<p></p>
<button onclick="change();">改变图片</button>
<div class="test1"></div>
</body>
</html>
4.Dom操作-2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input value="hello world">
<script>
var img = document.getElementsByTagName('img')[0];
img.onmousemove = function(){
console.log('在图片上移动');
}
img.onmouseover = function(){
console.log('进入图片');
}
img.onmouseout = function(){
console.log('移出图片');
}
var input = document.getElementsByTagName('input')[0];
input.onfocus = function(){
input.style.outline = 'none';
input.style.width = '300px';
input.style.height = '400px';
input.style.fontSize = '30px';
}
input.onselect = function(){
alert(input.value);
}
</script>
</body>
</html>
5.DOM操作-3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="word">12311121221212112</p>
<p></p>
<button id="btn">隐藏</button>
<script>
var img = document.getElementById('icon');
var p = document.getElementById('word');
var btn = document.getElementById('btn');
btn.onclick = function(){
if(btn.innerHTML == '隐藏'){
btn.innerHTML = '显示';
img.style.display = 'none';
p.style.display = 'none';
}else{
btn.innerHTML = '隐藏';
img.style.display = 'inline-block';
p.style.display = 'block';
}
}
</script>
</body>
</html>
