JavaScript-05-内置对象window和document

一、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>

扫描二维码关注公众号，回复： 4726182 查看本文章

JavaScript-05-内置对象window和document

猜你喜欢