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知识的主要内容,如果未能解决你的问题,请参考以下文章