JS BOM事件

作者: 越IT | 来源:发表于2017-02-07 21:28 被阅读89次

    ★【知识点】:

    1、掌握什么是BOM
    2、掌握BOM的核心-window对象
    3、掌握window对象的控制、弹出窗口方法

    一、什么是bom?

    BOM(browser object model)浏览器对象模型

    关于BOM:

    1.核心是window对象,所有的全局变量和全局函数都被归在了window上
    2.BOM是Browser Object Model的缩写,是浏览器对象模型


    二、window

    window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

    三、window对象的方法:

    1/window.alert("content")

    【语法】:

    window.alert("content")
    

    【功能】:
    显示带有一段消息和一个确认按钮的警告框

    window.alert("content")

    2/window.confirm("message")

    【语法】:

    window.confirm("message")
    

    【功能】:
    显示一个带有指定消息和OK及取消按钮的对话框

    【返回值】:
    如果用户点击确认按钮,则confirm()返回true
    如果用户点击取消按钮,则confirm()返回false

    【confirm案例1】:

    window.confirm.gif
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
      
      </style>
    </head>
    <body>
        <div id="box">
            <span>iphone6s</span>
            <input type="button" id="btn" value="删除">
        </div>
        <script>
        //confirm
        //获取按钮,绑定事件
        var btn=document.getElementById("btn");
        btn.onclick=function(){
          //弹出确认对话框
          var result=window.confirm("你确定要删除吗?");
          console.log(result);
        }
    
        </script>
    </body>
    </html>
    

    【confirm案例2】:

    confirm案例2.gif
    <!DOCTYPE html>
    <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title>输入框</title>
        </head>
        <body>
            <input type="button" value="点击" id="btn">
            <script type="text/javascript">
              //获取按钮对象
                var btn=document.getElementById("btn");
                //绑定鼠标事件
                btn.onclick=function(){
                    //写出确认框
                    var result=window.confirm("确认要删除吗?");
                    //对确认框的返回值进行判断,设置相应样式
                   if(result==true){
                       btn.style.color="#f00";
                   }else{
                       btn.style.color="#0f0";
                   }
                }
            </script>
        </body>
    </html>
    
    

    3/window.prompt(“text,defaultText")

    【语法】:

    window.prompt(“text,defaultText")
    

    【参数说明】:
    text:要在对话框中显示的纯文本(而不是HTML格式的文本)
    defaultText:默认的输入文本

    【返回值】:
    如果用户单击提示框的取消按钮,则返回null
    如果用户单击确认按钮,则返回输入字段当前显示的文本

    【案例】:

    window.prompt.gif
    <script>
      // 弹出输入框
           //var message=prompt("请输入您的星座","天蝎座");
           //console.log(message);
    </script>
    

    4/window.open(pageURL,name,parameters)

    【语法】:

    window.open(pageURL,name,parameters)
    

    【功能】:
    打开一个新的浏览器窗口或查找一个已命名的窗口

    【参数说明】:
    pageURL:子窗口路径
    name:子窗口句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
    parameters:窗口参数(各参数用逗号分隔)

    parameter设置

    【案例】:


    window.open.gif

    window.open


    window.open

    newwindow.html

    newwindow.html

    5/window.close()

    【语法】:

    window.close()
    

    【功能】:
    关闭浏览器窗口

    【案例】:

    window.close.gif
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>open</title>
    </head>
    <body>
        <input type="button" value="退 出" id="quit">
        <script>
           window.onload = function(){
              // 打开子窗口,显示newwindow.html
              window.open("newwindow.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
              var quit = document.getElementById("quit");
              // 点击关闭当前窗口
              quit.onclick = function(){
                  window.close();
              }
           }
        </script>
    </body>
    </html>
    

    【备注】\n

    \n 能够让alert 、confirm等弹出框上的提示文字实现换行

    ★【知识点】:

    1、掌握超时调用
    2、掌握间歇调用

    一、超时调用

    【语法】:

    setTimeout(code,millisec)
    

    【功能】:
    在指定的毫秒后调用函数或计算表达式

    【参数说明】:
    1、code:要调用的函数或要执行的JavaScript代码串
    2、millisec:在执行代码前需等待的毫秒数

    【说明】:
    setTimeout()只执行code一次。如果要多次调用,请使用setInterval()或者让code自身再次调用setTimeout()

    二、清除超时调用

    【语法】:

    clearTimeout(id_of_settimeout)
    

    【功能】:
    取消由setTimeout()方法设置的timeout

    【参数说明】:
    id_of_settimeout:由setTimeout()返回的ID值,该值标识要取消的延迟执行代码块。

    【案例】:


    三、间歇调用

    【语法】:

    setInterval(code,millisec)
    

    【功能】:
    每隔指定的时间执行一次代码

    【参数说明】:
    1、code:要调用的函数或要执行的代码串。
    2、millisec:周期性执行或调用code之间的时间间隔,以毫秒计

    四、清除间歇调用

    【语法】:

    clearInterval(id_of_setinterval)
    

    【功能】:
    取消由setInterval()方法设置的interval

    【参数说明】:
    id_of_setinterval:由setInterval()返回的ID值

    【案例】:

    【案例】:

    定时器案例.gif
    <!DOCTYPE html>
    <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title>闪烁的文字</title>
            <style type="text/css">
                div{
                    width:400px;
                    height:400px;
                    line-height:400px;
                    border:2px solid gray;
                    text-align:center;
                    color:red;
                }
            </style>
        </head>
    <body>
        <h3>会闪烁的文字</h3>
            <div id="text"> </div>
            <script type="text/javascript">
            //获取放置文本div中的内容
                var text=document.getElementById("text");
                //自定义一个变量,用来记录闪烁的值,初始值是0
                var star=0;
                //设置定时器,每500毫秒执行一下定时器里面的脚本
                /*定时器脚本判断:当闪烁变量的值是0时,闪烁变量的值设置为1,div里面的内容设置为::'☆☆☆今日特卖☆☆☆';当闪烁变量的值为1时,闪烁变量的值设置为0,div里面的内容设置为'★★★今日特卖★★★'*/
                setInterval(function(){
                    if(star==0){
                        star=1;
                        text.innerHTML="☆☆☆今日特卖☆☆☆"
                    }else{
                        star=0;
                        text.innerHTML='★★★今日特卖★★★'
                    }
                }
                    ,500);
            </script>
        </body>
    </html>
    
    

    【案例2】:num开始每间隔1s加1,到max停止

    定时器案例2.gif
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script>
           /* var intervalId=setInterval(function(){
               console.log("您好");
            },1000)
    
            // 10秒之后停止打印
            setTimeout(function(){
                clearInterval(intervalId);
            },10000);*/
            
            var num=1,
                max=10,
                timer=null;
           
           // 每隔1秒针num递增一次,直到num的值等于max清除
           //使用间歇调用实现
          /* timer=setInterval(function(){
               console.log(num);
               num++;
               if(num>max){
                  clearInterval(timer);
               }
           },1000)*/
    
           // 使用超时调用实现
           function inCreamentNum(){
               console.log(num);   // 1 2 3 10 
               num++;      
               if(num<=max){
                  setTimeout(inCreamentNum,1000);
               }else{
                  clearTimeout(timer);
               }
           }
           timer=setTimeout(inCreamentNum,1000);
        </script>
    </body>
    </html>
    

    本案例注意点:

    1.注意:此处为null不是空“”


    注意:此处为null不是空“”

    2.超时调用实现间歇调用效果的应用原理是让自身再次调用了set Timeout()


    Paste_Image.png

    ★【知识点】:

    1、掌握location对象
    2、掌握location对象的常用属性

    一、location对象☆

    location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航的功能,它既是window对象的属性,也是document对象的属性。

    二、location对象的常用属性

    1/location.href

    【语法】:

    location.href
    

    【功能】:
    返回当前加载页面的完整URL

    【说明】:
    location.href与window.location等价

    2/location.hash

    【语法】:

    location.hash
    

    【功能】:
    返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串。

    【案例】:

    返回顶部的跳转案例.gif
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
           .box1{height:400px;background:#ccc;}
           .box2{height:600px;background:#666;}
        </style>
    </head>
    <body>
        <div class="box1" id="top"></div>
        <div class="box2"></div>
        <input type="button" id="btn" value="返回顶部">
        <script>
           //console.log(location.href);
           //console.log(location.hash);
           var btn=document.getElementById("btn");
           btn.onclick=function(){
              location.hash="#top";
           }
           console.log(location.pathname);
        </script>
    </body>
    </html>
    

    3/location.host

    【语法】:

    location.host
    

    【功能】:
    返回服务器名称和端口号(如果有)

    【例如】:

    4/location.hostname

    【语法】:

    location.hostname
    

    【功能】:
    返回不带端口号的服务器名称。

    5/location.pathname

    【语法】:

    location.pathname
    

    【功能】:
    返回URL中的目录和(或)文件名。

    6/location.port

    【语法】:

    location.port
    

    【功能】:
    返回URL中指定的端口号,如果没有,返回空字符串。

    7/location.protocol

    【语法】:

    location.protocol
    

    【功能】:
    返回页面使用的协议。

    8/location.search

    【语法】:

    location.search
    

    【功能】:
    返回URL的查询字符串。这个字符串以问号开头。

    ★【知识点】:

    1、掌握位置操作
    2、掌握location.reaplace()
    3、掌握location.reload()

    一、位置操作

    改变浏览器位置的方法:

    location.href属性
    location对象其他属性也可改变URL:
    location.hash
    location.search

    二、location.replace()

    1/location.replace(url)

    【语法】:

    location.replace(url)
    

    【功能】:重新定向URL。

    【说明】:使用location.replace不会在历史记录中生成新纪录。

    2/location.reload()

    【语法】:

    location.reload()
    

    【功能】:
    重新加载当前显示的页面。

    【说明】:
    1、reload()有可能从缓存中加载
    2、 location.reload(true)从服务器重新加载

    ★【知识点】:

    1、掌握对象字面量表示法
    2、掌握编码与解码方法
    3、掌握解析地址栏中的参数

    一、对象字面量

    【语法】:

    var obj={key1:value1,key2:value2...}
    

    【功能】:
    使用对象字面量的形式创建一个对象

    【说明】:
    1、可以使用obj.key1或obj["key1"]的形式访问对象中的键值
    2、可以用obj.key1=value1的形式为obj添加值。

    二、encodeURI()

    【语法】:encodeURI(URIstring)
    【功能】:可把字符串作为URI进行编码。
    【参数】:必需。一个字符串,含有URI或其他要编码的文本。
    【说明】:
    1、 该方法不会对ASCII 字母和数字进行编码
    2、不会对ASCII 标点符号进行编码:-_ . ! ~ * ' ( ) 。
    3、如URI 组件中含有分隔符,如? 和#
    应使用encodeURIComponent() 方法分别对各组件进行编码

    三、decodeURI()

    【语法】:

    decodeURI(URIstring)
    

    【功能】:
    可对encodeURI()函数编码过的URI进行编码。

    【参数】:
    必需。一个字符串,含有要解码的URI或其他要解码的文本。

    四、encodeURIComponent()

    【语法】:

    encodeURIComponent(URIstring)
    

    【功能】:
    可把字符串作为URI组件进行编码。

    【参数】:
    必需。一个字符串,含有URI组件或其他要编码的文本。

    【说明】:
    1、不会对ASCII字母和数字进行编码
    2、也不会对这些ASCII标点符号进行编码:- _ . ! ~ * ' ( ) 。

    五、decodeURIComponent()

    【语法】:

    decodeURIComponent()函数编码的URI进行解码。
    

    【参数】:
    必需。一个字符串,含有编码URI组件或其他要解码的文本。

    ★【知识点】:

    掌握BOM中的history对象

    history历史对象

    1 /history.back()

    【语法】:

    history.back()
    

    【功能】:
    回到历史记录的上一步

    【说明】:
    想当于使用了history.go(-1)

    2/location.forward()

    【语法】:

    location.forward()
    

    【功能】:
    回到历史记录的下一步

    【说明】:
    相当于使用了history.go(1)

    3/history.go(-n)

    【语法】:

    history.go(-n)
    

    【功能】:
    回到历史记录的前n步

    4/history.go(n)

    【语法】:

    history.go(n)
    

    【功能】:
    回到历史记录的后n步

    ★【知识点】

    掌握Screen对象及其常用属性

    一、Screen对象属性

    1/screen.availWidth

    【语法】:

    screen.availWidth
    

    【功能】:
    返回可用的屏幕宽度

    2/screen.availHeight

    【语法】:

    screen.availHeight
    

    【功能】:
    返回可用的屏幕高度

    【参考案例】:

    【注意区别】:


    ★【知识点】:

    1、掌握Navigator对象的userAgent属性
    2、掌握如何判断浏览器的类型
    3、掌握如何判断设备的终端是移动还是PC

    例如:
    appCodeName:获取浏览器名称
    appName:获取完整的浏览器名称

    Navigator

    UserAgent:用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。

    浏览器判断的封装

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Navigator</title>
    </head>
    <body>
        <script>
           //console.log(navigator.userAgent);
           // 判断浏览器
           function getBrowser(){
               var explorer = navigator.userAgent,browser;
               if(explorer.indexOf("MSIE")>-1){
                  browser = "IE";
               }else if(explorer.indexOf("Chrome")>-1){
                  browser = "Chrome";
               }else if(explorer.indexOf("Opera")>-1){
                  browser = "Opera";
               }else if(explorer.indexOf("Safari")>-1){
                  browser = "Safari";
               }
               return browser;
           }
           var browser = getBrowser();
           console.log("您当前使用的浏览器是:"+browser);
           // 判断终端
           function isPc(){
              var userAgentInfo = navigator.userAgent,
                  Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
                  flag = true,i;
                  console.log(userAgentInfo);
               for(i=0;i<Agents.length;i++){
                  if(userAgentInfo.indexOf(Agents[i])>-1){
                     flag = false;
                     break;
                  }
               }
               return flag;
           }
           var isPcs = isPc();
           console.log(isPcs);
        </script>
    </body>
    </html>
    
    知识点回顾,indexOf返回的为num

    相关文章

      网友评论

        本文标题:JS BOM事件

        本文链接:https://www.haomeiwen.com/subject/zsfmittx.html