精华内容
下载资源
问答
  • https://blog.csdn.net/weixin_43409765/article/details/91347154?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control https://blog.csdn.net/sweetllh/article/details/73927752 浏览器对象模型(BOM)...可以使我们通过JS来操作浏览器 在BOM中为我们提供了一组对象,用来完成对浏览器的操作 概览 1.Window:代表的是整个浏览器的窗口,同时它也是网页中的全局对象。 2.Navigator:代表的是...

    原文:https://blog.csdn.net/weixin_43409765/article/details/91347154?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control

    https://blog.csdn.net/sweetllh/article/details/73927752

    浏览器对象模型(BOM)

    可以使我们通过JS来操作浏览器
    在BOM中为我们提供了一组对象,用来完成对浏览器的操作

    概览

    1.Window:代表的是整个浏览器的窗口,同时它也是网页中的全局对象。

    2.Navigator:代表的是当前浏览器的信息,通过该对象可以来识别不同的浏览器。

    3.Location:代表当前浏览器的地址信息,通过该对象可以获取地址信息,或者操作浏览器跳转页面。

    4.History:代表浏览器的历史纪录,可以通过该对象来操作浏览器的历史纪录。由于隐私原因,该对象不能获取到具体的历史纪录,只能操作浏览器向前或向后翻页,而且该操作只在当此访问时有效

    5.Screen:代表我们用户屏幕的信息,通过该对象可以获取到用户的显示器的相关信息。

    这些BOM对象在浏览器中作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用。

    介绍

    1.window对象
    BOM的核心对象是window,它表示浏览器的一个实例,它也是ECMAScript规定的Globle对象,也就是说网页中任何一个对象都是在window这个对象里面的。如果有用到框架(frameset),那么每个框架都有自己的window对象.
    如下例子:

    var  a = "666";
    
    aler(a);  //666
    alert(window.a)  //666
    

    两条alert都是弹出相同的结果。

    Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。例如,可以只写document,而不必写 window.document,同样,可以把当前窗口对象的方法当作函数来使用,如只写 alert(),而不必写 Window.alert()
    window 对象常用方法
    1、alert() 显示带有一段消息和一个确认按钮的警告框
    2、setTimeout(code,millisec) // 指定millisec时间后执行一次code,这个最常用在写时钟
    clearTimeout(id) // 停止执行setTimeout 所调用的方法
    3、setInterval(code,millisec) // 周期性执行调用code代码串 返回一个clearInterval() 从而取消对 code 的周期性执行的值。
    clearInterval(id) //clearInterval() 方法可取消由 setInterval() 设置的 timeout

    <html xmlns="http://www.w3.org/1999/xhtml">  
    	<head>  
    		<script language="javascript" type="text/javascript">  
    		var cid=self.setInterval("clock()",50)  
    			function clock(){  
    				document.getElementById("btn").value=new Date;  
    			}  
    		</script>  
    	</head>  
    	<body>  
    		<input id="btn" type="button" name="test" onclick="clearInterval(cid)">  
    	</body>  
    </html> 
    

    4、closed() 关闭浏览器窗口
    5、moveBy(x,y) 把窗口右移x像素 下移y像素
    6、moveTop(x,y) 把窗口左上角移动到制定位置

    <html xmlns="http://www.w3.org/1999/xhtml">  
    	<head>  
    		<script language="javascript" type="text/javascript">  
    			var win = window.open("http://www.baidu.com","新窗口","width:500,height:300");  
    			function move(){  
    				win.moveBy(50,50);  
    			}  
    		</script>  
    	</head>  
    	<body>  
    		<input id="btn" type="button" name="test" value="移动" onclick="move()">  
    	</body>  
    </html>  
    

    7、open(URL,name,features) 用于打开一个新的浏览器窗口或查找一个已命名的窗口,URL为打开地址,name窗口名称, features属性值:
    8、print() 方法用于打印当前窗口的内容,调用本地打印设备

    2.location对象
    提供了与当前窗口中加载的文档有关的信息,还有一些导航功能,值得注意的是location既是window对象的属性,又是document对象的属性,既window.location和document.location 引用的是同一个对象。

    比较实用的方法是location.assign();

    window.location = "http://www.666.com";    //页面跳转到该网址
    location.href = "http://www.666.com";      //页面跳转到该网址
    location.assign("http://www.666.com");     //页面跳转到该网址
    

    前两种方法其实底层也是调用了location.assign(),即三者结果是一样的。
    注:这三种方法跳转之后可以通过后退按钮返回到跳转之前的页面。

    location.replace("http://www.666.com");   //页面跳转到该网址,跳转之后不可返回前一页面
    

    3.navigator对象
    该对象里面保存着浏览器的各种信息,判断浏览器的各种信息就是从该对象里的属性来读取,具体属性如下图:
    在这里插入图片描述
    cookicEnablcd:判断是否启用cookic
    userAgent:判断浏览器的名称和版本号
    plugins:保存浏览器中所有插件信息的集合

    4.screen对象
    目前没遇到用screen对象的场景,所以就不在此介绍。如果有什么神奇的作用还请大腿评论告知。

    5.history对象
    该对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。出于安全考虑,开发人员不能知道用户浏览过的网址的具体url,但是我们可以通过下面方法在不知道具体历史url的情况下控制用户页面前进或后退。

    history.go(-1);   //页面后退一页
    history.go(1);    //页面前进一页
    history.go(0):刷新
     <a href="javascript:history.go(1);">前进一次</a>
    history.go("666");   //跳转到距当前页面最近的包含666字符串的页面,可能前进可能后退。
    
    //下面这两个方法对应history.go()的前进和后退。
    history.back(1);  //后退一页
    history.forward(1)  //前进一页
    
    展开全文
  • BOM是browser object model的缩写,简称浏览器对象模型 ,提供了独立于内容而与浏览器窗口进行交互的对象; 1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性; 2、document对象,文档对象; ...

    BOM是browser object model的缩写,简称浏览器对象模型 ,提供了独立于内容而与浏览器窗口进行交互的对象;

    1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;

    2、document对象,文档对象;

    3、location对象,浏览器当前URL信息;

    4、navigator对象,浏览器本身信息;

    5、screen对象,客户端屏幕信息;

    6、history对象,浏览器访问历史信息;

    展开全文
  • 概念: BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是...

    1.BOM

    概念: BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

    通俗理解: 把浏览器当做对象,通过访问对象的属性,实现操作浏览器的一组方法

    2. 页面加载事件

    2.1 load事件

    window.onload = function () {
      
      // 当页面加载完所有内容(包括图像、脚本文件、CSS 文件等)执行
    }

    2.2 unload事件

    window.onunload = function () {
      // 当用户退出页面时执行(关闭页面)
    }

    小结:

    window.onload事件 是页面所有资源加载完成时触发

    window.onunload事件 是用户退出页面时触发

    3.location对象

    location 相当于浏览器地址栏的抽象, 通过window.location可以访问到,window可以忽略不写

    我们学习location对象,目的是为了操作地址栏里面的url地址

    3.1 URL

    3.1.1 什么是url

    概念:统一资源定位符 (Uniform Resource Locator, URL)

    通俗理解: 互联网中的地址

    3.1.2 URL的组成

    • scheme:通信协议

      常用的http,ftp,maito等

    • host:主机 (找计算机)

      服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

    • port:端口号 (找软件)

      整数,可选,省略时使用方案的默认端口,如http的默认端口为80。

    • path:路径

      由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。

    • query:查询

      可选,用于给动态网页传递参数,可有多个参数,用'&'符号隔开,每个参数的名和值用'='符号隔开。

    例如:name=zs

    fragment: 信息片断

    字符串,锚点.

    3.2 location有哪些成员?

    成员: 属性和方法又叫做成员

    • href 返回地址栏的整个url,设置值的时候,也可以起到跳转页面的作用

    • hash 返回地址栏url的fragment

    • host 返回地址栏url的主机名

    • search 返回地址栏url的键值对参数(query)

    • reload() 设置页面刷新

                     语法: location.reload([boolean])

    参数是一个布尔值,不传参数则默认是false. 普通刷新,可能会从缓存拿数据

    传true的话,是强制刷新.强制浏览器去服务器获取数据

     

     

    • assign() 设置页面跳转,记录历史

                     语法: location.assign('url地址')

    • replace() 设置页面跳转,不记录历史

                     语法:location.replace('url地址')

    • href属性赋值,也可以是想页面跳转的新效果,跟assign类似
     location.href = 'http://www.itheima.com';

    小结:

    • location对象代表浏览器的地址栏.

    • 学习location的目标主要是为了操作地址栏的url地址

    • 网络中的地址我们称为url

    4.history对象

    • back() 返回上一个页面

      语法: history.back();

    • forward() 前进到下一个页面

      语法: history.forward();

    • go(1/-1) 前进/ 返回

      语法: history.go(number);

      正数是前进,负数是后退.

      history.go(1); //前进一步
      history.go(2); //前进两步
      history.go(-3); //后退三步

    5.navigator对象

    • userAgent 返回识别客户端设备和浏览器的字符串

      语法: navigator.userAgent

    6. 定时器

    6.1 设置定时器

    6.1.1 setTimeout()

    作用: 到达间隔时间之后,只调用一次回调函数

    语法: window.setTimeout(回调函数, 间隔时间)

    • window可以省略

    • 间隔时间以毫秒为单位

    • 返回这个定时器的标识符,是数字类型

    // 创建一个定时器,1秒后执行
    // timerId指向这个定时器的标识符
    var timerId = setTimeout(function () {
      console.log('Hello World');
    }, 1000);

    6.1.2 setInterval()

    作用: 每隔一个间隔时间,就调用一次回调函数

    语法: window.setInterval(回调函数, 间隔时间)

    • window可以省略

    • 间隔时间以毫秒为单位

    • 返回这个定时器的唯一标示符,是数字类型

    // 创建一个定时器,每隔1秒调用一次
    //timerId 指向这个定时器的标识符
    var timerId = setInterval(function () {
      var date = new Date();
      console.log(date.toLocaleTimeString());
    }, 1000);

    6.2 清除定时器

    6.2.1 clearTimeout()

    作用: 清除以setTimeout方法设置的定时器

    语法: widnow.clearTimeout(定时器的标识符) window可以忽略

    6.2.2 clearInterval()

    作用: 清除以setInterval方法设置的定时器

    语法: widnow.clearInterval(定时器的标识符) window可以忽略

    小结:

    • 设置定时器 setTimeout 和 setInterval

    • 清除定时器 clearTimeout 和 clearInterval

    简单动画案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #box{
                width:100px;
                height:100px;
                background-color:red;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <button id="btn">点击盒子移动到400</button>
        <div id="box"></div>
    </body>
    </html>
    <script>
        
        //需求: 点击按钮,让box从左往右移动400px
    //    1. 获取元素 btn, box
            var btn = document.getElementById('btn');
            var box = document.getElementById('box');
            var pos = 400; //最终位置
            var timeid; //一定要写在外面,用于存储定时器的id
    //    2. 给btn注册点击事件
            btn.onclick = function(){
                
                    //为了避免添加多个定时器的问题,所以每一次设置新的定时器之前,要先把原来的 清除掉
                if(timeid){
                    clearInterval(timeid);
                }
                
                //    3. 在事件处理函数中让box动起来
                   //如果要让box自己动起来,需要把代码放到定时器里执行
                timeid = setInterval(function(){
                    //     3.1 先获取当前的位置在哪
                    var current =  box.offsetLeft;
                    //     3.2 在当前位置的基础上加几个像素
                    var target = current + 7;
                    box.style.left = target + 'px';
                    
                    //3.3 判断一下是否到达了目标位置,如果到达了目标位置,就清除定时器
                    if(target >= pos){
                        clearInterval(timeid);
                        //如果超出了目标就直接拉回去(直接设置最终位置)
                        box.style.left = pos + 'px';
                        console.log(box.offsetLeft);
                    }
                    
                }, 15);
            }
    
    </script>

    倒计时案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style type="text/css">
        .time-item {
          width: 430px;
          height: 45px;
          margin: 0 auto;
        }
        
        .time-item strong {
          background: orange;
          color: #fff;
          line-height: 49px;
          font-size: 36px;
          font-family: Arial;
          padding: 0 10px;
          margin-right: 10px;
          border-radius: 5px;
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .time-item > span {
          float: left;
          line-height: 49px;
          color: orange;
          font-size: 32px;
          margin: 0 10px;
          font-family: Arial, Helvetica, sans-serif;
        }
        
        .title {
          width: 260px;
          height: 50px;
          margin: 200px auto 50px auto;
        }
      </style>
    </head>
    <body>
        <h1 class="title">距离毕业,还有</h1>
    
        <div class="time-item">
                <span>
                    <span id="day">00</span>天</span>
          <strong>
            <span id="hour">00</span>时</strong>
          <strong>
            <span id="minute">00</span>分</strong>
          <strong>
            <span id="second">00</span>秒</strong>
        </div>
        <script>
    
        // 需求:每隔一秒钟,就展示距离目标还差多长时间
       //  获取元素:
           var d = document.getElementById('day');
           var h = document.getElementById('hour');
           var m = document.getElementById('minute');
           var s = document.getElementById('second');
      
    
        // 5.让1-4步每隔一秒钟执行一次
        fn();
        setInterval(fn,1000);
        function fn() {
    
        // 1.获取到当前时间
             var date = +new Date();
        // 2.获取到目标事件
           var target = +new Date('2020-04-10 00:00:00');
        // 3.计算当前和目标的事件差
           var time = target - date;    //毫秒
           time /= 1000;    //把毫秒转换成秒
        // 4.根据时间差,计算还差多少天,小时,分,秒
         day = Math.floor(time/60/60/24);
         hour = Math.floor(time/60/60%24);
         minute = Math.floor(time/60 %60);
         second = Math.floor(time % 60);
    
        //  给元素的文本重新赋值
          d.innerText = day;
          h.innerText = hour;
          m.innerText = minute;
          s.innerText = second;
        }
    
        // 计算时间差的代码
        // 先获得总共还有多少秒,然后计算天,小时,分,秒
        //  day = Math.floor(interval/60/60/24);
        //  hour = Math.floor(interval/60/60%24);
        //  minute = Math.floor(interval/60 %60);
        //  second = Math.floor(interval % 60);
         
        </script> 
    </body>
    </html>

    6. 课后综合练习

    钟表案例

    7. 扩展内容@

    7.1 name 和top 的特殊性:

    ​ name 和 top 是window 对象本身存在的属性

    ​ name 是字符串,给name赋值为其他类型,也会转换成字符串

    ​ top 是只读的属性,指向window对象,不可写

    注意:   在全局申明变量,不要使用name 或者top

    //  name top
    // console.log(window.name); //默认是一个空的字符串
    // console.log(window.top); //指向window本身
      
    //  var a = 1;// 在全局申明一个变量,其实就相当于给window增加了一个属性
    //  window.a = 1;
    //  console.log(window.a);
      
     var name = 1;
     var name = false; //如果全局有name变量,不管你赋值的是什么数据类型,都会转成字符串
     var top = 1; //如果全局有top变量,不管你赋值是什么,top永远指向window
     console.log(name);
     console.log(top);
      
    //  结论: 在全局,不要使用name和top

    8. 特效

    8.1 offset系列

    • offsetParent 用于获取定位的父级元素

    • offsetLeft 距离定位父元素的左偏移量

    • offsetTop 距离定位父元素的上偏移量

    • offsetWidth 当前元素的宽度           content+padding+border

    • offsetHeight 当前元素的高度          content+padding+border

    以下操作均是错误的:

    son.offsetWidth = 300;
    son.offsetWidth = '300px';
    son.offsetLeft = 200;
    son.offsetLeft = '200px';
    son.offsetParent = document.body;
    console.log(son.offsetParent);
    //结论: offset系列不能赋值,只能获取

    小问题:

       offsetParent和parentNode的区别?

    • offsetParent 返回的是离自己最近的定位父元素

    • parentNode 返回的是直接父元素

    8.2. client系列

    • clientWidth 元素可视区的宽度                    content+padding

    • clientHeight 元素可视区的高度                   content+padding

    client系列也不可以赋值: 

    son.clientWidth = 300;
    son.clientWidth = '300px';
    //  client系列同样也不可以赋值

    8.3. scroll系列

    • scrollLeft 元素中内容左侧滚动出去的距离

    • scrollTop 元素中内容顶部滚动出去的距离

    • scrollWidth 元素中内容的宽度

    • scrollHeight 元素中内容的高度

    scroll事件 ,监听滚动条滚动的事件

     far.onscroll = function(){
    //  console.log(1);
       console.log('left :' + far.scrollLeft);
       console.log('top :' + far.scrollTop);
     }

     scrollLeft 和 scrollTop 可以赋值,并且不需要写单位

    //  far.scrollWidth = 600;
    //  far.scrollWidth = '600px';
    //  console.log(far.scrollWidth);
        far.scrollLeft  = 100;
        far.scrollTop  = 100;
        console.log(far.scrollLeft);
        console.log(far.scrollTop);
      //结论: scrollLeft 和 scrollTop 可以赋值,并且不需要写单位

    小结:

    • offset, client, scroll系列返回的都是数字类型(Number)

    • 返回的值是所有样式渲染到页面上的最终结果

    8.4. 获取浏览器可视区的大小(不可以被赋值)

    • window.innerWidth 浏览器可视区的宽度

    • window.innerHeight 浏览器可视区的高度

    8.5.获取页面滚动出去的距离(也不可以被赋值)

    • window.pageYOffset 顶部滚动出去的距离

    • window.pageXOffset 左侧滚动出去的距离

    9. 扩展内容@

    9.1 client系列其他

    • clientLeft 返回元素左边框的宽度

    • clientTop 返回元素上边框的宽度

    9.2 window.innerWidth 和 window.innerHeight的兼容问题

    ie8及以下不支持

    ie8及以下的浏览器中:

    window.innerWidth ===> document.docuementELement.clientWidth

    window.innerHeight ===> document.docuementELement.clientHeight

    9.3 window.pageXOffset 和window.pageYOffset 的兼容问题

    ie8及以下不支持

    ie8及以下的浏览器中:

    window.pageXOffset ===> document.docuementELement.scrollLeft

    window.pageYOffset ===> document.docuementELement.scrollTop

    拖拽案例:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        
        .nav {
          height: 30px;
          background: #036663;
          border-bottom: 1px solid #369;
          line-height: 30px;
          padding-left: 30px;
        }
        
        .nav a {
          color: #fff;
          text-align: center;
          font-size: 14px;
          text-decoration: none;
          
        }
        
        .d-box {
          width: 400px;
          height: 300px;
          border: 5px solid #eee;
          box-shadow: 2px 2px 2px 2px #666;
          position: absolute;
          top: 40%;
          left: 40%;
          background-color: white;
          
          /* 不让文字被选中 */
          -webkit-user-select:none;
          -moz-user-select:none;
          -ms-user-select:none;
          user-select:none;
        }
        
        .hd {
          width: 100%;
          height: 25px;
          background-color: #7c9299;
          border-bottom: 1px solid #369;
          line-height: 25px;
          color: white;
          cursor: move; /*将鼠标编程移动标示*/
        }
        
        #box_close {
          float: right;
          cursor: pointer;
        }
      </style>
    </head>
    <body>
    <div class="nav">
      <a href="javascript:void(0);" id="register">注册信息</a>
    </div>
    <div class="d-box" id="d_box">
      <div class="hd" id="drop">注册信息 (可以拖拽)
        <span id="box_close">【关闭】</span>
      </div>
      <div class="bd"></div>
    </div>
    </body>
    </html>
    <script>
    
       //需求: 鼠标在drop上按下的时候,鼠标移动d-box跟着移动
    //  1. 获取元素 drop d-box
        var drop = document.getElementById('drop');
        var d_box = document.getElementById('d_box');
    //  2. 给drop注册鼠标按下事件  mousedown
        drop.onmousedown = function(e){
    //      4.2 获取鼠标按下的时候的坐标
            var downX = e.clientX;
            var downY = e.clientY;
          
            //4.4 获取鼠标按下的一瞬间,d_box所处的位置
            var posX = d_box.offsetLeft;
            var posY = d_box.offsetTop;
          
          //  3. 在按下的事件中注册鼠标移动的事件 mousemove
          document.onmousemove = function(e){
            console.log(1);
            //  4. 在鼠标移动的事件处理函数中,给d-box设置位置
    //        4.1 获取到鼠标浏览器可视区的坐标
              var x = e.clientX;
              var y = e.clientY;
            
    //        4.3 计算鼠标移动了多少  鼠标移动的坐标 - 鼠标按下的坐标
              var instanceX = x - downX;
              var instanceY = y - downY;
            
    //        4.5 计算d_box移动时,应该处于的位置  按下时的初识位置 + 鼠标移动的距离
              var targetX = posX + instanceX;
              var targetY = posY + instanceY;
            
              d_box.style.left = targetX + 'px';
              d_box.style.top = targetY + 'px';
          }
        }
        
        //5.鼠标松开,d_box不在移动  mouseup  
        document.onmouseup = function(){
          document.onmousemove = null;
        }
           
    </script>

    弹出层拖拽案例:

    <!DOCTYPE html>
    <html>
    
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
        .login-header {
          width: 100%;
          text-align: center;
          height: 30px;
          font-size: 24px;
          line-height: 30px;
        }
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
          padding: 0px;
          margin: 0px;
        }
    
        .login {
          width: 512px;
          height: 280px;
          position: absolute;
          border: #ebebeb solid 1px;
          left: 50%;
          right: 50%;
          background: #ffffff;
          box-shadow: 0px 0px 20px #ddd;
          z-index: 9999;
          margin-left: -256px;
          margin-top: 140px;
          display: none;
        }
    
        .login-title {
          width: 100%;
          margin: 10px 0px 0px 0px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          font-size: 18px;
          position: relative;
          cursor: move;
          -moz-user-select: none;
          /*火狐*/
          -webkit-user-select: none;
          /*webkit浏览器*/
          -ms-user-select: none;
          /*IE10*/
          -khtml-user-select: none;
          /*早期浏览器*/
          user-select: none;
        }
    
        .login-input-content {
          margin-top: 20px;
          -moz-user-select: none;
          /*火狐*/
          -webkit-user-select: none;
          /*webkit浏览器*/
          -ms-user-select: none;
          /*IE10*/
          -khtml-user-select: none;
          /*早期浏览器*/
          user-select: none;
        }
    
        .login-button {
          width: 50%;
          margin: 30px auto 0px auto;
          line-height: 40px;
          font-size: 14px;
          border: #ebebeb 1px solid;
          text-align: center;
          -moz-user-select: none;
          /*火狐*/
          -webkit-user-select: none;
          /*webkit浏览器*/
          -ms-user-select: none;
          /*IE10*/
          -khtml-user-select: none;
          /*早期浏览器*/
          user-select: none;
        }
    
        .login-bg {
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0px;
          left: 0px;
          background: #000000;
          filter: alpha(opacity=30);
          -moz-opacity: 0.3;
          -khtml-opacity: 0.3;
          opacity: 0.3;
          display: none;
        }
    
        a {
          text-decoration: none;
          color: #000000;
        }
    
        .login-button a {
          display: block;
        }
    
        .login-input input.list-input {
          float: left;
          line-height: 35px;
          height: 35px;
          width: 350px;
          border: #ebebeb 1px solid;
          text-indent: 5px;
        }
    
        .login-input {
          overflow: hidden;
          margin: 0px 0px 20px 0px;
        }
    
        .login-input label {
          float: left;
          width: 90px;
          padding-right: 10px;
          text-align: right;
          line-height: 35px;
          height: 35px;
          font-size: 14px;
        }
    
        .login-title span {
          position: absolute;
          font-size: 12px;
          right: -20px;
          top: -30px;
          background: #ffffff;
          border: #ebebeb solid 1px;
          width: 40px;
          height: 40px;
          border-radius: 20px;
        }
      </style>
    </head>
    
    <body>
      <div class="login-header">
        <!--如果a的href属性值中.协议名是javascript. 那么点击a标签的时候,就会执行:后面的代码-->
        <a id="link" href="javascript:;">点击,弹出登录框</a>
      </div>
      <div id="login" class="login">
        <div id="title" class="login-title">登录会员
          <span>
            <a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a>
          </span>
        </div>
        <div class="login-input-content">
          <div class="login-input">
            <label>用户名:</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
          </div>
          <div class="login-input">
            <label>登录密码:</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
          </div>
        </div>
        <div id="loginBtn" class="login-button">
          <a href="javascript:void(0);" id="login-button-submit">登录会员</a>
        </div>
      </div>
      <!-- 遮盖层 -->
      <div id="bg" class="login-bg"></div>
    </body>
    </html>
    <script>
      
      // 获取元素
      var link = document.getElementById('link'); //点击的文字
      var bg = document.getElementById('bg'); //遮盖层
      var login = document.getElementById('login'); //登录框
      var title = document.getElementById('title'); //登录框的标题
      var closeBtn = document.getElementById('closeBtn');
    //  需求:
    //      1.点击文字,展示遮盖层和登录框
    //        1.1获取元素
    //        1.2 给link注册点击事件
            link.onclick = function(){
              //1.3 在事件处理函数中,让login和bg展示出来
              login.style.display = 'block';
              bg.style.display = 'block';
            }
    //      2. 鼠标在登录框的头部按下时,可以拖动
    //      2.1 给title注册mousedown事件
            title.onmousedown = function(e){
    //          2.4 获取鼠标在title上按下的坐标
              var downX = e.clientX;
              var downY = e.clientY;
              
    //          2.6 获取鼠标按下时,login的初始位置
              var posX = login.offsetLeft;
              var posY = login.offsetTop;
              
              // 2.2 在mousedown中给document注册mousemove事件
              document.onmousemove = function(e){
                //2.3 获取鼠标移动的坐标
                var x = e.clientX;
                var y = e.clientY;
                
    //            2.5 计算鼠标移动了多少  移动的坐标- 按下的坐标
                var instanceX = x - downX;
                var instanceY = y - downY;
                
                //2.7 计算login最终处于的位置   鼠标移动的距离 + login初始的位置
                var targetX = instanceX + posX;
                var targetY = instanceY + posY;
      
                // 3. 限制登录框的位置
    //              3.1 获取最小距离和最大距离
                    var maxX = window.innerWidth - login.offsetWidth -21; //可视区的宽度 - login的宽度
                    var maxY = window.innerHeight - login.offsetHeight; //可视区的宽度 - login的宽度
    //              3.2 判断target是否小于最小距离或者大于最大距离
                    if(targetX < 0){
                      targetX = 0;
                    }
                    if(targetY < 21){
                      targetY = 21;
                    }
    
                    if(targetX > maxX){
                      targetX = maxX;
                    }
    
                    if(targetY > maxY){
                      targetY = maxY;
                    }
                //由于target算出来的就是login应该处于的位置,但是在最后渲染的一瞬间,css中的margin又作用到了login的身上,
                // 导致位置发生了变化,为了抵消掉css中margin的值,所以应该在最后赋值的那一刻,把margin减掉
                login.style.left = targetX + 256 + 'px';
                login.style.top = targetY - 140 + 'px';
              }
            }
            
        //2.8 松手,login不在移动
        document.onmouseup = function(){
          document.onmousemove = null;
        }
    </script>

     

     

    展开全文
  • BOM(浏览器对象模型)

    千次阅读 多人点赞 2019-06-06 14:49:28
    所有浏览器都支持 window 对象,它表示浏览器窗口 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员 全局变量是 window 对象的属性,全局函数是 window 对象的方法 甚至 HTML DOM 的 document ...

    Window对象

    所有浏览器都支持 window 对象,它表示浏览器窗口
    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
    全局变量是 window 对象的属性,全局函数是 window 对象的方法
    甚至 HTML DOM 的 document 也是 window 对象的属性之一
    window尺寸
    window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
    window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
    window方法
    window.open() - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo() - 移动当前窗口
    window.resizeTo() - 调整当前窗口的尺寸

    定义全局变量与在 window 对象上直接定义属性差别
    1、全局变量不能通过 delete 操作符删除;而 window 属性上定义的变量可以通过 delete 删除

    var num=123;
    window.str="string";
    delete num;
    delete str;
    console.log(num); //123
    console.log(str); //str is not defined
    

    //全局变量不能通过 delete 删除,因为通过 var 定义全局变量会有一个名为 [Configurable] 的属性,默认值为 false,所以这样定义的属性不可以通过 delete 操作符删除
    2、访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的变量是否存在。

    var newValue=oldValue; // 报错:oldValue is not defined
    var newValue=window.oldValue; // 不会报错
    console.log(newValue); // undefined
    

    3、有些自执行函数里面的变量,想要外部也访问到的话,在 window 对象上直接定义属性

    Window Screen

    window.screen 对象包含有关用户屏幕的信息
    Window Screen
    window.screen对象在编写时可以不使用 window 这个前缀。
    一些属性:
    screen.availWidth - 可用的屏幕宽度
    screen.availHeight - 可用的屏幕高度
    Window Screen 可用宽度
    screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏

    返回您的屏幕的可用宽度:

    <script>
    document.write("可用宽度: " + screen.availWidth);
    </script>
    

    Window Screen 可用高度
    screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
    返回您的屏幕的可用高度:

    <script>
    document.write("可用高度: " + screen.availHeight);
    </script>
    
    <script>
    document.write("总宽度/高度: ");
    document.write(screen.width + "*" + screen.height);
    document.write("<br>");
    document.write("可用宽度/高度: ");
    document.write(screen.availWidth + "*" + screen.availHeight);
    document.write("<br>");
    document.write("色彩深度: ");
    document.write(screen.colorDepth);
    document.write("<br>");
    document.write("色彩分辨率: ");
    document.write(screen.pixelDepth);
    </script>
    

    在这里插入图片描述
    Window Location
    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
    Window Location
    window.location 对象在编写时可不使用 window 这个前缀。

    属性描述
    location.hostname返回 web 主机的域名
    location.pathname返回当前页面的路径和文件名
    location.port返回 web 主机的端口 (80 或 443
    location.protocol返回所使用的 web 协议(http: 或 https:)
    location.href返回当前页面的 URL
    location.assign()方法加载新的文档

    返回(当前页面的)整个 URL:

    <script>
    document.write(location.href);
    </script>
    

    加载一个新的文档:

    <script>
    function newDoc(){
        window.location.assign("https://www.yjn.cn/doc/index.txt")
    }
    </script>
    <body>
    <input type="button" value="加载新文档" onclick="newDoc()">
    </body>
    

    Window History

    window.history 对象包含浏览器的历史。
    window.history对象在编写时可不使用 window 这个前缀。
    为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
    一些方法:
    history.back() - 与在浏览器点击后退按钮相同
    history.forward() - 与在浏览器中点击向前按钮相同
    Window History Back
    history.back() 方法加载历史列表中的前一个 URL。
    这与在浏览器中点击后退按钮是相同的:
    在页面上创建后退按钮:

    <script>
        function goBack()
        {
            window.history.back()
        }
    </script>
    <body>
    <input type="button" value="Back" onclick="goBack()">
    </body>
    </html>
    

    history forward() 方法加载历史列表中的下一个 URL。
    这与在浏览器中点击前进按钮是相同的:
    在页面上创建一个向前的按钮:

    <script>
    function goForward()
    {
        window.history.forward()
    }
    </script>
    <body>
    <input type="button" value="Forward" onclick="goForward()">
    </body>
    

    除此之外可以用 history.go() 这个方法来实现向前,后退的功能。

    function a(){
        history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
    }
    function b(){
        history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
    }
    

    Window Navigator

    window.navigator 对象包含有关访问者浏览器的信息。
    window.navigator 对象在编写时可不使用 window 这个前缀。

    <div id="example"></div>
    <script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
    </script>
    

    来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
    navigator 数据可被浏览器使用者更改
    一些浏览器对测试站点会识别错误
    浏览器无法报告晚于浏览器发布的新操作系统

    JavaScript 弹窗

    可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
    警告框
    警告框经常用于确保用户可以得到某些信息。
    当警告框出现后,用户需要点击确定按钮才能继续进行操作。

    window.alert("sometext");
    window.alert() 方法可以不带上window对象,直接使用alert()方法。
    

    确认框
    确认框通常用于验证是否接受用户操作
    当确认卡弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作
    当你点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。

    window.confirm("sometext");
    window.confirm() 方法可以不带上window对象,直接使用confirm()方法。
    var r=confirm("按下按钮");
    if (r==true)
    {
        x="你按下了\"确定\"按钮!";
    }
    else
    {
        x="你按下了\"取消\"按钮!";
    }
    

    提示框
    提示框经常用于提示用户在进入页面前输入某个值。
    当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
    如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

    window.prompt("sometext","defaultvalue");
    window.prompt() 方法可以不带上window对象,直接使用prompt()方法。
    var person=prompt("请输入你的名字","Harry Potter");
    if (person!=null && person!="")
    {
        x="你好 " + person + "! 今天感觉如何?";
        document.getElementById("demo").innerHTML=x;
    }
    

    弹窗使用 \ + “n”(\n) 来设置换行。

    JavaScript 计时事件

    通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
    在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
    setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    setTimeout() - 在指定的毫秒数后执行指定代码。
    注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法
    setInterval() 方法
    window.setInterval(“javascript function”,milliseconds);
    window.setInterval() 方法可以不使用 window 前缀,直接使用函数 setInterval()。
    setInterval() 第一个参数是函数(function)。
    第二个参数间隔的毫秒数
    注意: 1000 毫秒是一秒。
    每三秒弹出 “hello” :

    setInterval(function(){alert("Hello")},3000);
    

    实例展示了如何使用 setInterval() 方法,但是每三秒弹出一次对用户体验并不好。
    以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码,就是手表一样。

    显示当前时间

    var myVar=setInterval(function(){myTimer()},1000);
     
    function myTimer()
    {
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
    }
    

    如何停止执行?
    clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

    window.clearInterval(intervalVariable)
    window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()

    要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:
    myVar=setInterval(“javascript function”,milliseconds);
    然后你可以使用 clearInterval() 方法来停止执行。

    <p id="demo"></p>
    <button onclick="myStopFunction()">停止</button>
    <script>
    var myVar=setInterval(function(){myTimer()},1000);
    function myTimer(){
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
    }
    function myStopFunction(){
        clearInterval(myVar);
    }
    </script>
    

    setTimeout() 方法
    语法
    myVar= window.setTimeout(“javascript function”, milliseconds);
    setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
    setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 “alert(‘5 seconds!’)”,或者对函数的调用,诸如 alertMsg。
    第二个参数指示从当前起多少毫秒后执行第一个参数。
    等待3秒,然后弹出 “Hello”:
    setTimeout(function(){alert(“Hello”)},3000);
    如何停止执行?
    clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
    window.clearTimeout(timeoutVariable)
    window.clearTimeout() 方法可以不使用window 前缀。
    要使用clearTimeout() 方法, 你必须在创建超时方法中(setTimeout)使用全局变量:
    myVar=setTimeout(“javascript function”,milliseconds);
    如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。
    以下是同一个实例, 但是添加了 “Stop the alert” 按钮:

    var myVar;
     
    function myFunction()
    {
        myVar=setTimeout(function(){alert("Hello")},3000);
    }
     
    function myStopFunction()
    {
        clearTimeout(myVar);
    }
    

    JavaScript Cookie

    Cookie 用于存储 web 页面的用户信息。
    什么是 Cookie?
    Cookie 是一些数据, 存储于你电脑上的文本文件中。
    当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
    Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
    当用户访问 web 页面时,他的名字可以记录在 cookie 中。
    在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
    Cookie 以名/值对形式存储,如下所示:
    username=John Doe
    当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
    使用 JavaScript 创建Cookie
    JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
    JavaScript 中,创建 cookie 如下所示:
    document.cookie=“username=John Doe”;
    您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:
    document.cookie=“username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT”;
    您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
    document.cookie=“username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/”;
    使用 JavaScript 读取 Cookie
    在 JavaScript 中, 可以使用以下代码来读取 cookie:
    var x = document.cookie;
    Note document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;
    使用 JavaScript 修改 Cookie
    在 JavaScript 中,修改 cookie 类似于创建 cookie,如下所示:
    document.cookie=“username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/”;
    旧的 cookie 将被覆盖。
    使用 JavaScript 删除 Cookie
    删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:
    document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;
    注意,当您删除时不必指定 cookie 的值。
    Cookie 字符串
    document.cookie 属性看起来像一个普通的文本字符串,其实它不是。
    即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。
    如果您设置了新的 cookie,旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中,所以如果您重新读取document.cookie,您将获得如下所示的数据:
    cookie1=value; cookie2=value;
    显示所有 Cookie 创建 Cookie 1 创建 Cookie 2 删除 Cookie 1 删除 Cookie 2
    如果您需要查找一个指定 cookie 值,您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。
    JavaScript Cookie 实例
    在以下实例中,我们将创建 cookie 来存储访问者名称。
    首先,访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。
    访问者下一次访问页面时,他会看到一个欢迎的消息。
    在这个实例中我们会创建 3 个 JavaScript 函数:
    设置 cookie 值的函数
    获取 cookie 值的函数
    检测 cookie 值的函数
    设置 cookie 值的函数
    首先,我们创建一个函数用于存储访问者的名字:

    function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    

    函数解析:
    以上的函数参数中,cookie 的名称为 cname,cookie 的值为 cvalue,并设置了 cookie 的过期时间 expires。
    该函数设置了 cookie 名、cookie 值、cookie过期时间。
    获取 cookie 值的函数
    然后,我们创建一个函数用户返回指定 cookie 的值:

    function getCookie(cname)
    {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for(var i=0; i<ca.length; i++) 
      {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
      }
      return "";
    }
    

    函数解析:
    cookie 名的参数为 cname。
    创建一个文本变量用于检索指定 cookie :cname + “=”。
    使用分号来分割 document.cookie 字符串,并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(’;’))。
    循环 ca 数组 (i=0;i<ca.length;i++),然后读取数组中的每个值,并去除前后空格 (c=ca[i].trim())。
    如果找到 cookie(c.indexOf(name) == 0),返回 cookie 的值 (c.substring(name.length,c.length)。
    如果没有找到 cookie, 返回 “”。
    检测 cookie 值的函数
    最后,我们可以创建一个检测 cookie 是否创建的函数。
    如果设置了 cookie,将显示一个问候信息。
    如果没有设置 cookie,将会显示一个弹窗用于询问访问者的名字,并调用 setCookie 函数将访问者的名字存储 365 天:

    function checkCookie()
    {
      var username=getCookie("username");
      if (username!="")
      {
        alert("Welcome again " + username);
      }
      else 
      {
        username = prompt("Please enter your name:","");
        if (username!="" && username!=null)
        {
          setCookie("username",username,365);
        }
      }
    }
    
    展开全文
  • JavaScript Window - 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。 浏览器对象模型 (BOM): 浏览器对象模型(Browse...
  • 浅谈浏览器对象——Performance API

    千次阅读 2017-04-25 09:49:16
    为了得到脚本运行的精确耗时,需要...2) getTime方法只能获取脚本运行过程中的时间进度,无法知道一些后台事件的时间进度,比如浏览器用了多少时间从服务器加载网页。 为了解决这两个不足之处,ES 5引入高精度时间戳—
  • 1 浏览器端数据库概述 1.1 IndexedDB具有以下特点 1.1.1 键值对储存 1.1.2 异步 1.1.3 支持事务 1.1.4 同域限制 1.1.5 储存空间大 1.1.6 支持二进制储存 2 indexedDB.open方法 3 indexedDB实例对象的方法 ...
  • location 对象2.1 location对象属性2.2 location对象方法2.3 获取字符串参数3. navigator 对象4. screen 对象5. history 对象 前言: JavaScript 由三部分构成:ECMAScript,DOM和BOM。 ECMAScript :描述了...
  • 浏览器对象模型浏览器渲染与布局在网页的加载开始到结束这期间,浏览器需要建立三棵树: DOM俗称节点树,它是浏览器根据HTML结构经过各种处理(特别是容错处理)生成的树,它代表了整个网页的结构。 CSSOM样式规则树...
  • BOM 浏览器对象模型

    千次阅读 2021-10-22 19:54:31
    BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性 1.2 BOM的构成 window对象...
  • JavaScript 的内容,包含...BOM(浏览器对象模型):提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。 一. ECMAScript ECMAScript 规定了 JavaScript 脚本的核心语法,如 数据类型、关键字、保留字、...
  • 浏览器对象模型 Browser Object Model,在下图中管A-D区,是为了操作浏览器出现的API,window是其的一个对象;文档对象模型 Document Object Model,在下图中管E区,是为了操作浏览器出现的API,document是其的一个...
  • JavaScript的浏览器对象详解  一、浏览器对象层次及其主要作用 二、文档对象功能及其作用  三、范例  使用浏览器的内部对象系统, 可实现与HTML文档进行交互。它的作用是将相关元素组织...
  • 浏览器对象层次及其主要作用

    千次阅读 2007-06-29 10:58:00
    它的作用是将相关元素组织...一、浏览器对象层次及其主要作用除了前面提到过的文档document对象外,Navigator浏览器中还提供了窗口(Window)对象以及历史(History)和位置(Location)对象。●浏览器对象(Navigator
  • 浏览器对象全检测

    2017-03-17 10:22:22
    Javascript window对象下面有个对象: Navigator 包含几个有用的属性: appName 浏览器类型 appVersion 当前浏览器代理版本,注意并不是浏览器版本 appCodeName 浏览器代码名称,全兼容,所有已Netscape的浏览器...
  • Java基础知识面试题(2020最新版)

    万次阅读 多人点赞 2020-02-19 12:11:27
    都是面向对象的语言,都支持封装、继承和多态 Java提供指针来直接访问内存,程序内存更加安全 Java的类是单继承的,C++支持多重继承;虽然Java的类可以多继承,但是接口可以多继承。 Java有自动内存管理机制,...
  • html Dom 参考手册:http://www.w3school.com.cn/htmldom/ 菜鸟的Javascript笔记 http://www.cainiao8.com/web/js_note.html BOM 浏览器对象模型 ...
  • 浏览器对象(宿主对象)时JavaScript钟定义而由浏览器提供的对象,浏览器对象的属性和方法可能会因为浏览器的不同而出现差异。常见的浏览器对象为: window:代表浏览器对象。 document:代码浏览器当前浏览的HTML...
  • 【综合篇】浏览器的工作原理:浏览器幕后揭秘

    千次阅读 多人点赞 2020-01-21 18:18:13
    web(给达达前端加星标,提升前端技能)了解浏览器是如何工作的,能够让你站在更高的角度去理解前端浏览器的发展历程的三大路线,第一是应用程序web化,第二是web应用移动化,第三是web操...
  • html5 history微信浏览器返回刷新

    万次阅读 2017-06-02 13:35:23
    History API与浏览器历史堆栈管理:移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由,这种实现存在兼容性问题,但是...
  • JSP隐式对象

    2018-04-01 22:21:17
    JSP隐式对象分为四个类别:1:输入输出相关的:request , response , out2:与作用范围相关的:pageContext , request , session ,application3:与servlet相关的:page , config4:异常相关的:exception表单元素和...
  • 浏览器同源政策之ajax请求能发送

    千次阅读 2018-05-06 10:01:22
    同源政策(same-origin policy)是浏览器安全的基石 同源指的是三个相同 限制范围 (1) Cookie、LocalStorage 和 IndexDB 无法读取。 (2) DOM 无法获得。 (3) AJAX 请求能发送。 下面重点讲解AJAX ...
  • window对象属性

    千次阅读 2019-06-28 23:08:15
    每个对象对应一种操作,可以理解为将浏览器操作分为了好多部分,每个对象管理一个部分。这些对象,我们会一一学习,看看他们到底分管的那个部分。 /获取常用对象:这里的每个对象都是一个完整的体系,都要掌握/ ...
  • Python语言的特点有哪些Python 是目前最...Python 语言主要有以下特点:1) 简单:Python 是一种代表简单主义思想的语言。阅读一个良好的 Python 程序就感觉像是在读英语一样,尽管这个英语的要求非常严格。Python ...
  • 浏览器存储 的几种方式

    千次阅读 2020-04-06 14:57:48
    2.属于浏览器对象模型 localStorage,sessionStorage,indexDB 一.cookie h5之前,存储主要用cookie,缺点是请求头上带着数据, h5之前,存储主要用cookies,缺点是在请求头上带着数据,导致流量增加。大小限制4k。...
  • 浏览器沙箱(sandBox)到底是什么?

    千次阅读 2021-01-19 10:35:59
    什么是沙箱 操作系统层面的沙盒的含义就是操作系统对进程的可访问的内存地址所做的限制,限制进程可访问的内存在其被分配的内存...chromium是多进程架构,浏览器前端界面由browser进程管理,各个web page的tab属于r
  • 这样解决浏览器不兼容问题

    千次阅读 2014-05-26 07:49:10
    如果想解决浏览器的兼容性问题,你首先要明白在一个浏览器显示正常的代码为什么会在其他浏览器出现浏览器不兼容的问题?这是因为各个浏览器对于HTML标签或者DIV盒子模型的解析不同造成的,经常会出现问题的浏览器非...
  • 浏览器的抽象分层结构图中将浏览器分成了以下8个子系统: ** 用户界面(User Interface) 用户界面主要包括工具栏、地址栏、前进/后退按钮、书签菜单、可视化页面加载进度、智能下载处理、首选项、打印等。除了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,340
精华内容 36,536
关键字:

以下不属于浏览器对象的是