• Javascript外部对象




    Window 浏览器:

    - location:地址
    - history:历史
    - Document:文档
    - screen:窗口
    - navigator:帮助

    > 1.外部对象就是浏览器提供的API -- **BOM**
    > 2.这些对象由w3c规定,由浏览器开发者设计并开发
    > 3.这些对象分为2部分,其中BOM包含了DOM
    > 4.我们可以通过js访问这些对象



    # 外部对象

    > BOM (Browser Object Model)
        浏览器对象模型,用来访问和操纵浏览器窗口,是JavaScript有能力与浏览器对话。
    > DOM (Document Object Model)
        文档对象模型,用来操作文档。

    ##1.对话框
    - alert(str)
        - 提示对话框,显示str字符串的内容
    - confirm(str)
        - 确认对话框,显示str字符串的内容
        - 按"确定"按钮返回true,其他操作返回false

    >案例
        
        //调用window对象的属性或方法,可以省略"window."
        //1.弹出框
            //1)弹出框
            function f1(){
                alert("你好,小俊子");
            }
            //2)确认框
            function f2(){
                var v = confirm("你吃了吗?");
                //点击确定返回true,否则返回false
                console.log(v);
            }
            //3)输入框
            function f3(){
                var p = prompt("你吃的什么?");
                //点击取消返回null
                console.log(p);
            }

    ## 2. 定时器
    - 多用于网页动态时钟,制作倒计时,跑马灯效果
    - 周期性时钟
        - 以一定的间隔执行代码,循环往复
        - setInterval(exp,time);
        - 返回已经启动的定时器对象
    - 停止启动的定时器
        - clearInterval(tID) 
        - tID:启动的定时器对象
    - 一次性时钟
        - 在一个设定的时间间隔之后来执行代码,而不是在函数被调用后执行
        - setTimeout(exp,time);
    - 停止启动的定时器
        - clearTimeout(tID) 
        - tID:启动的定时器对象


    > 案例 

     1)周期性定时器
            //每隔N毫秒执行一次函数,反复执行,直到达到停止条件位置。
            function f4(){
                var n = 5;
                //启动定时器,返回定时器的ID,用来停止定时器 
                var id = setInterval(function(){
                    console.log(n);
                    
                    switch(n%4){
                        case 0: btn1();break;
                        case 3: btn2();break;
                        case 2: btn3();break;
                        case 1: btn4();break;
                        
                        default: ;
                    }
                    n++;
                },100);
                //启动定时器就相当于启动了一个支线程,当前方法f4相当于主线程。
                //2个线程并发执行,不互相等待,
                //因此主线程在启动完支线程后立刻向下执行,而支线程却需要在1秒后才执行
                console.log("蹦");
            }
        
        
        2)一次性定时器 
            //推迟N毫秒执行一次函数,执行完之后,自动停止,
            //也可以在未执行前手动停止
        var id;
        function f5(){
            //启动定时器,若想在未执行定时器前就将它停止,需要使用id
            id = setTimeout(function(){
                console.log("叮叮叮");
                f4();
            },3000);
        }
        
        function f6(){
            //若定时器已经执行,则取消无效; 若定时器还未执行,则可以取消
            clearTimeout(id);
            console.log("已停止!");
        }
       

    ## 3. 常用属性
    - screen 对象
        - 包含有关客户端显示屏幕的信息
        - 常用于获取屏幕的分辨率和色彩
        - 常用属性:
            - width height
            - availWidth availHeight

    -  history对象
        -  包含用户访问过的URL
            -  length属性:浏览器历史列表中的URL数量
        - 方法:
            - back();
            - forwird();
    - location对象
        - 包含有关当前URL的信息
            - 常用于获取和改变当前浏览的网址
        - href属性:当前窗口正在浏览的网址地址
        - 方法
            - reload():重新载入当前网址,相当于刷新    
    - navigator 对象
        - 包含有关浏览器的信息
            - 常用于获取客户端浏览器和操作系统的信息 


    > 案例

    //Location对象
        function f1(){
            var b = confirm("你真的要离开我吗?");
            if(b){
                location.href = "http://www.tmooc.cn";
            }
            
        }
        //刷新页面
        function f2(){
            location.reload();
        }
        //screen 对象: 获取屏幕宽高
        function f3(){
            console.log(screen.width);
            console.log(screen.height);
            console.log(screen.availWidth);
            console.log(screen.availHeight);
        }
        //history对象 
        function f4(){
            history.forward();
        }
        //navigator对象
        function f5(){
            console.log(navigator.userAgent);
        } 



    ## DOM
    ### DOM操作
    - 查找节点
    - 读取节点信息
    - 修改节点信息
    - 创建节点信息
    - 删除节点

    ### 读取、修改
    - 节点信息
        - nodeName:节点名称
        - nodeType:节点类型
    - (1) 读取节点
        - 读取节点的名称,类型
                
                <p id="p1">1.<b>读写</b>节点</p>
                <p id="p2">2.<b>查询</b>节点</p>
                <p id="p3">3.<b>增删</b>节点</p>

                var p1 = document.getElementById("p1");
                console.log(p1.nodeName);
                console.log(p1.nodeType);
        - 读写节点的内容
             - 双标签中间的文本叫内容,任何双标签都有内容
             - innerHTML:包括子标签信息
             - innerText:忽略子标签
                     
                    console.log(p1.innerHTML);
                    p1.innerHTML="1.<i>读写</i>节点";

                    console.log(p1.innerText);
        - 读写节点的值
            - 表单控件中的数据叫值,只有如下表单控件才有值:
            - input
            - select
            - textarea

  • 相关阅读:
    BootStrap练习
    表单控件练习
    K近邻算法原理
    CSS 边框和颜色
    SVG平移和旋转
    SVG进阶练习
    SVG路标(marker)
    SVG 曲线与文字
    python函数与异常处理
    if-elif-else分支判断语句(附加continue和break)---举例说明
  • 原文地址:https://www.cnblogs.com/hxliang/p/6139661.html
Copyright © 2020-2023  润新知