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>
效果图：
