javascript中的BOM知识

Posted hyh888

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript中的BOM知识相关的知识,希望对你有一定的参考价值。

首先说一下javascript的组成部分:

由ECMAScript 核心语法和DOM,BOM组成,

DOM是为w3c规定的,让js有能力去操作html和XML,可以间接的操作样式

BOM是专门操作浏览器的API,要考虑兼容性

这里的window有两个角色:

1.代替global当做全局作用域对象

2.封装了所有的DOM和BOM的API

BOM有六个子对象:

history:浏览器的历史记录

location:窗口的url 地址栏的信息

navigator: 浏览器的配置信息

document:DOM

screen:显示设备的信息

event: 事件对象

history.go(n)   n的值可以为-2 -1 0 1 2 表示后退 刷新 前进

location的API:

location.href     获取完整的url地址 协议 端口号 相对路径 锚点 查询字符串

location.protocol     获取http https

location.host     获取端口号 .hostname主机名 .prot端口号:用来区分一个服务器上的多个网站

location.pathname    获取相对路径

location.hash     获取锚点 #xxx

location.search    查询字符串 ? xxx=xxx & xxx=xx在url上的参数

location.assign("url")  在当前窗口打开新url  

location.replace("url")  在当前窗口打开新url,禁止后退,因为用新的url替换history中当前url

location.reload(flase/true)  重新加载当前界面

参数:默认是false ,不强制   force强制:是否绕过缓存直接从服务器硬盘获取数据

location.username  获取用户名

location.password  获取密码

navigator:

https下的默认端口号是 443  http的端口号默认是80

封装浏览器的配置信息  --- 封装的结果是对象的形式

navigator.cookieEnabled   判断是否启用了cookie  在客户端硬盘持久保存用户私密数据的小文件

navigator.plugins     检查浏览器安装的所有插件信息

navigator.userAgent    包含浏览器的名称,内核和版本号的字符串    可以鉴别5大浏览器    包含浏览器的类型  版本号 使用的操作系统

screen:

screen.width  获取客户端显示屏的宽度,鉴别客户端的种类

event

事件模型:

一个事件的发生分为三个阶段

捕获:由外到内,记录各级父元素上绑定的相同的事件

目标触发:首先触发目标元素上的事件处理函数

冒泡:按照捕获顺序,反向执行,由内到外,一次触发各级父元素绑定的事件处理函数

事件对象:当事件发生时,自动创建的,封装所有事件信息的一个对象

获取:function  处理函数(e/event)

在事件发生时,自动获得事件对象

在IE8中:全局window,定义了一个event

function  处理函数()

window.event

兼容性问题:function 处理函数(e)

e = e || window.event;

取消冒泡:

DOM标准中:e.stopPropagation();

练习题:利用冒泡完成简易的计算器

 

<body>

<div id="keys">

<button>1</button>

<button>2</button>

<button>3</button>

<button>4</button>

<button>C</button>

<button>+</button>

<button>-</button>

<button>=</button>

</div>

<textarea id="result"></textarea>

<script>

// 找到id为result 的元素

var res = document.getElementById(‘result‘);

var keys = document.getElementById("keys");

keys.addEventListener("click",function(e)

if(e.target.nodeName == "BUTTON")

switch(e.target.innerHTML)

case "C":

res.value = "";

break;

case "=":

res.value = eval(res.value);

break;

break;

default:

res.value += e.target.innerHTML;

 

);

</script>

</body>

效果图如下:

技术图片

技术图片

页面滚动:

获得页面滚动过的高度:

var  topvalue = document.body.scrollTop || documentElement.scrollTop;

练习题:模仿京东的搜索框,页面滚动一段距离后,搜索框显示出来

代码如下:

 

body

height: 5000px;

nav

width: 500px;

height: 36px;

border:2px solid #e1251b;

position: fixed;

left: 35%;

padding-left: 10px;

display: none;

#txt

width: 440px;

height: 32px;

border: none;

outline: none;

button.button

width: 60px;

height: 36px;

border: none;

background-color: #e1251b;

color: white;

outline: none;

cursor: pointer;

<body>

<nav>

<input type="text" id="txt" value placeholder="搜索您想要的商品"><button class="button">搜索</button>

</nav>

<script>

var nav = document.getElementsByTagName(‘nav‘)[0];

document.body.onscroll = function()

var topValue = document.body.scrollTop || document.documentElement.scrollTop;

if(topValue >=1000 )

nav.style.display="block";

else

nav.style.display = "none";

</script>

</body>

效果图:

技术图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以上是关于javascript中的BOM知识的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中的BOM知识框架

JavaScript—— BOM 浏览器对象模型

javaScript基础语法(个人笔记)

Dom与Bom

javascript中BOM部分基础知识总结

JavaScript知识——事件BOM简介