2018.10.24-BOM操作

1.BOM

alert()
prompt()
confirm()
console.log()
console.time()
console.timeEnd()

setInterval()
setTimeout()

2. window

一个页面 一个窗口 window.onload 每一个窗口都具有一个window
js的全局 this window.a
通过window属性添加的变量可以使用delete删除。

BOM的顶层对象是window。DOM的顶层对象document。所有的对象的顶层都是Object。
但是需要注意的是document是window的一个子对象。

3.认识浏览器

标题栏 : window.title 属性
状态栏 : window.status 属性
地址栏 : window.location 对象
历史记录 : window.history 对象 可以省略前面的window

4.location对象

href属性: 地址。统一资源定位符 .
location.href 会跳转页面,并且产生历史记录。
search属性:返回的URL的参数部分。
hash属性: 返回URL的hash值。
replace() 方法:能够实现页面的跳转,和href属性类似,但是不会产生历史记录。
reload()方法: 页面重新加载。如果参数设置为true。那么页面不使用浏览器缓存。
浏览器缓存:下载好的东西会在系统里保存一定的时间。每一个文件都有一个过期时间,一旦文件过期,系统自动删除。当访问的时候检测到服务器对这个文件做出过修改,那么就需要下载新的文件,旧的文件删除。

url : http://www.xmr100.com:80/admin/user/main.php?user=zhangsan&pass=123#n1

  • 协议:
    file ftp ssh
    http:超文本传输协议
    HTML:超文本标记语言
    XML:可扩展标记语言

  • 域名:
    www.xmr100.com
    一级域名:.com .cn .中国
    二级域名:www.bbaidu.com tupian.baidu.com ditu.baidu.com

  • 端口:
    计算机提供服务的窗口
    http:默认的是80端口,如果服务器提供网站服务的不是80端口,这个端口号不能省略。
    HTTPS: http的安全版本。 443端口。
    ssh 22
    mysql 3306
    计算机一共具有65535个端口。前10000个基本都具有专门的服务。用户自定义的服务要在10000之后。端口也是黑客攻击的主要方式。
    黑客:骇客 hacker 一群最求高技术的计算机专家
    白帽子:

  • 路径: 域名只能定位服务器。路径是用来确定文件位置的。

  • 文件: 具体需要访问的文件。

  • 参数: 请求所需要的一些参数。参数之间使用&连接。都是键值对的形式。

  • hash哈希值: 锚点
    eg:localhost
    点击前:


    loaclhost 1.jpg

    点击后:


    loaclhost 2.jpg
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="js.js"></script>
    <img src="http://g.hiphotos.baidu.com/image/h%3D300/sign=8f27e5b05f66d01661199828a72ad498/8601a18b87d6277f28d3544525381f30e824fc8e.jpg" alt="">
    <button>点击</button>
</body>
<script>
    var btn = document.querySelector('button');
    btn.onclick = function(){
        //替换地址栏
        location.href = 'http://baidu.com';
        // console.log(location.search)
        // console.log(location.hash)
        // location.replace('http://baidu.com');
        // location.reload(true);
        //
        // history.back();

    };
</script>
</html>

5.history 对象 历史记录

length属性:历史记录的长度
注意: FF 。Chrome都是从1开始计算的。IE是从0开始计算的。
back()方法: 后退一步
forWard()方法:前进一步
go(数字)*: 跳转历史记录的个数。
eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(history.length);

        document.onclick = function(){
            // location.href = '2localtion.html';
            // history.forward();
            history.go(2)    //打印例记录的长度
        }


    </script>
</body>
</html>

6.screen 对象 屏幕

width属性 :返回显示器的宽度

height属性 : 返回显示器的高度 (包含屏幕任务栏的)

availWidth属性:返回显示器的宽度

availHeight属性:返回显示器的高度(不包含任务栏)
eg:

screen.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
    console.log(screen);  //在任务栏中显示对象
    </script>
</body>
</html>

7.navigator 浏览器信息(用户代理信息)

userAgent 属性:浏览器的版本信息
网页模式:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
手机模式:Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36
通过这个属性可以判断出用户的代理机器。
platform属性:当前浏览器的机器环境
Win32
cookieEnabled属性:检测浏览器是否启用cookie。
cookie:小饼干。在计算机里面表示一小片文本。用来存放用户的访问信息。
一般网站登录之后需要使用cookie去记录网站的登录状态。cookie是服务器写在浏览器主机上的。保存在客户端的。类似的在服务器端可以使用session的机制。
http协议是一种无状态的协议,不记录用户的状态,也不分辨用户的区别,更没有识别用户的能力。
cookie能够在每一次访问同一个网站的时候带一段小的文本过来,这个文本里面可以存放用户的不明感的个人信息。服务器可以根据这个信息来区分用户的身份。
也可以使用url参数的形式告诉服务器你是谁。
eg:检查浏览器是否启用cookie

cookie已被启用.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    // console.log(navigator.userAgent);
    // console.log(navigator.platform);
    console.log(navigator.cookieEnabled);
</script>
</body>
</html>

8.窗口操作

window.open(url,target,control);
window.close(); 高级浏览器可以关闭一个不是通过open打开的窗口的,但是低级浏览器只能关闭open打开的窗口。

moveBy 从当前位置移动多少
moveTo 移动到多少

resizeBy 改变大小
resizeTo

scrollBy 滚动距离
scrollTo
eg:窗口打开、关闭
点击打开按钮打开新窗口

窗口打开2.jpg

点击新窗口页面显示百度页面
窗口3.jpg

点击关闭按钮关闭新窗口


窗口关闭1.jpg
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>打开</button>
    <button>关闭</button>
    <script>
    var btn = document.querySelectorAll('button');
    btn[0].onclick=function(){
        w=window.open('8.html','_blank','windth=400,height=400,top=100,left=100,location');    //在新窗口页面引进了下面8.html的百度网页
    };
    btn[1].onclick=function(){
        w.scrollBy(200,200);  //当前网页侧边栏滑动多少
    }
    </script>
</body>
</html>

eg:8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            height:2000px;
        }
    </style>
</head>
<body>
    dnnidcnin
    <script>
    window.onclick=function(){
        window.open('http://baidu.com','_top');  //显示页面打开的显示情况
        }
    </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容