BOM 浏览器对象模型
1.浏览器窗口的宽和高
innerWidth innerHight
视口的宽和高
2.浏览器的相关信息
window.navigator
需要了解:
appname:"Netscape"
appVersion:浏览器版本
platform:系统的版本
浏览器地址栏
1.打开一个页面 window.open();
例: var btnEle = document.querySelector("button") ;
btnEle.onclick = function(){
window.open(./a.html); //打开同级目录下的a.html文件
//window.open("http://www.baidu.com"); //打开网页
}
2.关闭页面 window.close();
例: var btnEle = document.querySelector("button") ;
btnEle.onclick = function(){
window.close(); //关闭当前网页
}
3.跳转一个页面/获取一个网页地址 window.location.href
例1:跳转 var btnEle = document.querySelector("button") ;
btnEle.onclick = function (){
window.location.href = "./a.html" ; //跳转到同级目录下a.html文件
//window.location.href = "http://www.baidu.com" //跳转到百度网页
}
例2:获取 var btnEle = document.querySelector("button") ;
btnEle.onclick = function (){
var res = window.location.href ;//获取当前页面地址栏的地址
console.log(res); //打印这个地址
}
4.刷新本页面 window.location.reload();
例: var btnEle = document.querySelector("button");
btnEle.onclick = function (){
window.location.reload(); //点击按钮重新加载本页面
}
5.获取地址或者设置地址栏的哈希值(#以及后面的内容)
a.获取地址栏的哈希值
例: var btnEle = document.querySelector("button");
btnEle.onclick = function () {
console.log(window.location.hash); //获取哈希值并将其打印出来
}
b.设置地址栏的哈希值
例: var btnEle = document.querySelector("button");
btnEle.onclick = function () {
window.location.hash = "#123" ;
}
运用:hash参数通过地址栏携带参数,同时可以设置#后面内容。
1.不跳转页面也可以进行页面之间的切换
2.不跳转切换页面间的应用 spa(single page application)
例:
<body>
<p>起始页</p>
<button>第一页</button>
<button>第二页</button>
<script>
var pageEle = document.querySelector("p");
var btnEle1 = document.querySelectorAll("button")[0];
var btnEle2 = document.querySelectorAll("button")[1];
btnEle1.onclick = function (){
window.location.hash = "page1" ;
renderDom();
}
btnEle2.onclick = function (){
window.location.hash = "page2" ;
renderDom();
}
function renderDom(){
// console.log(window.location.hash);
var hashStr = window.location.hash ;
console.log(hashStr);
switch(hashStr){
case "#page1"
:pageEle.innerHTML = "<h1>我是第一页</h1>"
break;
case "#page2"
:pageEle.innerHTML = "<h1>我是第二页</h1>"
break;
default
://window.alert("输入错误");
break;
}
}
</script>
</body>
6.search 参数 获取或者设置?后面的内容(这些内容以键值对的形式出现,键名=键值,键值对之间用&符号连接)
a.获取?后面的键值对参数
例: <button>点击获取search值</button>
btnEle.onclick = function(){
var arg = window.location.search ;
console.log( arg );
}
b.设置?后面的键值对参数
例: <button>点击获取search值</button>
btnEle.onclick = function(){
window.location.search = "name=liSi" ;
}
注: ?后面的参数叫做queryString(请求参数或查询参数)
书写规则: ?键名1=键值1&键名2=键值2&键名3=键值3 -----注意,这里的键名和键值都不需要加""
作用:search用于跨页面传参数,获取参数然后解析参数
例1:解析获取到的search参数
str = "?name=ZhangSan&age=20&height=178cm" ;
function formatSearch ( str ) {
str = str.substr(1);
var arr = str.split("&") ;
var obj = {} ;
arr.forEach(function(item){
var newArr = item.split("=") ;
obj[newArr[0]] = newArr[1] ;
});
return obj ;
}
console.log( formatSearch( str ) );
最后打印的结果为{name:'ZhangSan',age:20,height:'178cm'}
例2:将对象类型的键值对拼成一个search字符串
function reformSearch ( obj ) {
var newArr = [] ;
for ( var key in obj ){
var str = key + '=' + obj[key] ;
newArr.push(str);
}
return '?'+newArr.join("&");
}
var obj = {name:'ZhangSan',age:20,height:'178cm'} ;
console.log(reformSearch(obj)); //打印结果为?name=ZhangSan&age=20&height=178cm
操作地址栏的历史记录
window.history.forward();//前进
window.history.back(); //后退
window.history.go();// 1.0代表本页面
// 2.正整数代表前进多少页面
// 3.负整数代表后退多少页面
---注--- 不管是前进还是后退多少页面,前提是要有这些历史记录
浏览器事件
预定义和浏览器相关的时间
1.onload:优先加载完html和资源后会执行这个事件
例: window.onload = function () {
console.log(1111);
}
2.onresize :浏览器视口发生变化的时候触发
window.onresize = function () {
console.log(1111);
}
onresize 可以实现自适应
rem:根字体的大小 默认根字体大小16px
动态修改根字体大小:
window.onresize = function (){
var w = window.innerWidth;
document.documentElement.style.fontSize = `${w/10}px` ;
}
--注-- documentElement 连写科表示为HTML根元素
3.onscroll 滚动事件
window.onscroll = function () {
console.log(11111);
}
--注-- 只有存在滚动条时,才会触发滚动事件
1.获取滚动条的卷去高度
2.设置卷去高度
document.documentElement.scrollTop
scrollTop使用注意事项:
a.在chrome浏览器下:
如果有文档声明,通过document.documentElement.scrollTop设置或者获取卷去高度
如果没有文档声明,需要用document.body.scrollTop设置或者获取卷去高度
b.在ie模式下:
如果没有文档声明,需要用document.body.scrollTop和document.documentElement.scrollTop都可以设置或获取高度
如果有文档声明,只有document.documentElement.scrollTop能获取,document.body.scrollTop不能获取
同步与异步
同步代码和异步代码
异步代码会在异步队列里执行,异步队列一定在同步之后
定时器里this的指向
例: var obj = {
name:'ZhangSan',
age:20,
fn:function(){
console.log(this); //打印的结果为这个对象obj
setTimeout(function(){
console.log(this); //打印的结果为window
},1000);
}
}
--注-- 定时器里的this是指向window
事件里的this
例: var divEle = document.querySelector(".box");
divEle.onclick = function () {
console.log(this); //指向这个元素
console.log(divEle); //这个元素
}