window，所有全局变量都是它的属性，所有全局的函数都是它的函数。
var age = 18;
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');
动态跳转
window.location.href = 'http://www.baidu.com';
location.href = 'http://www.520it.com';
document,动态获取网页中的所有的节点，可以动态的对节点进行增删改查。
document.write('hello world');
document.write('<button>百度一下</button>');
document.write('img src="https:www.baidu.com/img/bg_logo1.png" width="200">');
动态修改图片
<script>
getElementById id名
getElementsByClassName className
getElementsByName 根据标签的内部属性name
getElementsByTagName
function change(){
var img = document.getElementsByName('test2')[0];
img.src = 'img/img_02.jpg';
}
</script>
<body>
<p></p>
<button onclick = "change();">改变图片</button>
<div class="test1"></div>
</body>
动态切换图片
<body>
<img src = 'img/img_01.jpg'>
<p></p>
<button name="btns">切换图片</button>
<script>
var img = document.getElementsByTagName('img')[0];
var btn = document.getElementsByName('btns')[0];
btn.onclick = function(){
//lastIndexOf('img_01.jpg')如果有，任一正数，如果没有，返回-1
if(img.src.lastIndexOf('img_01.jpg') != -1){
img.src = 'img/img_02.jpg';
}
else{
img.src = 'img/img_01.jpg';
}
}
</script>
</body>
鼠标移动
<body>
<img src = 'img/img_01.jpg'>
<input>
<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.heigtht = '400px';
}
input.onselect = function(){
alert(input.value);
}
</script>
</body>
显示隐藏图片交替
<body>
<img id = 'icon' src = 'img/img_01.jpg'>
<p id = 'word'>helloworld!</p>
<button id = 'btn'>隐藏</button>
<script>
var img = document.getElementById('icon');
var p = document.getElementById('word');
var btn = documentlgetElementById('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>
最后编辑于 ：2017.12.08 23:58:03
©著作权归作者所有,转载或内容合作请联系作者
