• 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>

     

     

     

     

  • 相关阅读:
    Oracle/PLSQL: RTRIM Function-from cyber
    Oracle/PLSQL: LTRIM Function-from cyber
    Oracle AnyData Data Type Version 11.1-from cyber
    用 Sqlplus 创建用户的详细步骤 (centos 6.0,Oracle 11g)
    SQL_Plus操作命令-引自网络
    Linux下scp的用法-引自网络
    非学习型单层感知机的java实现(日志三)
    N维法向量与N维超平面的关系的简单证明(日志二)
    R语言分析(二)——薛毅R语言第二章后面习题解析
    R语言分析(一)-----基本语法
  • 原文地址:https://www.cnblogs.com/StevenHuSir/p/10203104.html
Copyright © 2020-2023  润新知