一、window
全局函数+动态跳转:window.location.href
<script text="text/javascript"> //第一大作用 //1.1 所有全局的变量都是window的属性 //1.2 所有的全局函数都是window的方法 //全局的变量 var age = 17; console.log(window.age); //全局的函数 function Dog() { var name = '张三'; console.log(name + '这是一条可爱的狗') } Dog(); window.Dog(); // window.alert('哈哈'); // window.console.log('Hello');//全局的 function Person() { console.log(this); } Person();//window Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …} new Person();//Person Person {} //第二大作用 //1.动态的跳转 alert(0);//阻断 window.location.href = 'http://www.baidu.com'; //2.交互 window.location.href = 'HK://openCamera?user=123&pwd=000'; </script>
二、document
2.1更改图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document的常用操作</title> <script text="text/javascript"> function changeImage() { //更改图片 //1.获取网页中的图像标签 //1.1 getElementsByClassName var img = document.getElementsByClassName('icon')[0]; console.log(img); //2.改变src 属性 img.src = './image/icon_02.png'; } </script> </head> <body> <img class="icon" src="./image/icon_01.png" alt=""> <p></p> <button onclick="changeImage();">更改图片</button> </body> </html>
2.2设置标签的显示与隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document的常用操作2</title> </head> <body> <img class="icon" src="./image/img_01.jpg" alt=""> <p id="word">这里风景很美</p> <p></p> <button>隐藏</button> <script type="text/javascript"> //1.1拿到所有要操作的标签 var icon = document.getElementsByClassName('icon')[0]; var p = document.getElementById('word'); var btn = document.getElementsByTagName('button')[0]; console.log(icon,p,btn); //1.2监听按钮的点击 btn.onclick = function () { if (btn.innerText == '隐藏') { //隐藏 css 属性 display p.style.display = 'none'; icon.style.display = 'none'; btn.innerText = '显示'; }else { //隐藏 css 属性 display p.style.display = 'block'; icon.style.display = 'inline-block'; btn.innerText = '隐藏'; } } </script> </body> </html>