前端基础——javascriptBOM对象
JavaScript BOM
什么是BOM
BOM（browser object model）浏览器对象模型
window（window对象也就是全局对象）
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
// 全局变量-在脚本的任何地方都可以调用的变量
var age = 15;
// window.age = 15; 这个就相当于 var age = 15;
// 意思就是我在window对象上声明了一个全局变量
function sayAge(){
alert("我"+age); // 这里的age等价于 window.age
}
// 声明一个全局变量
window.username = "marry"; // 就相当于 var username = "marry"
// 声明一个全局方法 全局方法-脚本在任何地方都能调用的方法
// 所有的全局变量和全局方法，都被归在的window对象上了
window.sayName = function(){
alert("我是"+this.username); // 这里的this相当于window
}
sayAge();
sayName();
Window对象的方法
语法：window.alert（”content”） 这个相当于直接写一个 alert("content")方法
功能：显示带有一段消息和一个确认按钮的警告框
语法：window.confirm(“message")
功能：显示一个带有指定消息和OK及取消按钮的对话框
返回值：
如果用户点击确定按钮，则confirm（）返回true
如果用户点击取消按钮，则confirm（）返回false
<div id="box">
<span id="">iphone8lpus</span>
<input type="button" id="btn" value="删除" />
</div>
<script type="text/javascript">
// confirm()
// 获取按钮，绑定事件
var btn = document.getElementById("btn");
btn.onclick = function(){
// 弹出确认对话框
var result = window.confirm("您确定要删除吗？\n删除之后不可恢复"); // window是可以省略的 换行用 \n
if (result == true) {
document.getElementById("box").style.display="none"; // 判断为真 隐藏
}
}
</script>
语法：window.prompt(“text,defaultText")
参数说明：
text：要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText：默认的输入文本
返回值：
如果用户单击提示框的取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本
var phone = window.prompt("请输入你使用的手机品牌？","华为");
console.log(phone);
语法：window.open(pageURL,name,parameters)
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL：子窗口路径
name：子窗口句柄。（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters ：窗口参数(各参数用逗号分隔)，比如：位置，大小
<script type="text/javascript">
window.onload = function(){
// 打开子窗口，显示newWindow.html这个页面
window.open("03.newWindow.html","给新窗口取的名字","width=400,height=200,
left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
}
</script>
语法：window.close( )
功能：关闭浏览器窗口
<div class="box">
<h3>我是window.open打开的窗口</h3>
<input type="button" name="quit" id="quit" value="关闭小窗口" />
</div>
<script type="text/javascript">
var quit = document.getElementById("quit");
// 绑定点击事件关闭窗口
quit.onclick = function(){
window.close(); // 括号不要忘了
}
</script>
--JavaScript是单线程语言，单线程就是所执行的代码必须按顺序
超时调用
语法：setTimeout（code,millisec）
功能：在指定的毫秒数后调用函数或计算表达式
参数说明：
1、code：要调用的函数或要执行的JavaScript代码串
2、millisec：在执行代码前需等待的毫秒数
// window.setTimeout() setTimeout()也是window对象，通常省略
// 下面这种直接放js代码串的方式不推荐
// setTimeout("alert('hello')",1000); // 设置为1秒后，弹出alert
// 下面推荐第1种写法，设置自定义函数方式
var fnCall = function(){
alert("第一种方法");
}
setTimeout(fnCall,3000);
// 下面推荐第2种写法，设置匿名函数
setTimeout(function(){
alert("第二种方法");
},5000);
说明：
setTimeout（）只执行code一次。如果要多次调用，请使用 setInterval（）或者让code自身再次调用setTimeout（）
setTimeout（）方法返回一个ID值，可以通过它取消超时调用。
清除超时调用
语法：clearTimeout（id_of_settimeout）
功能：取消由setTimeout（）方法设置的timeout
参数说明：
1、 id_of_settimeout ：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块
var clear_time = setTimeout(function(){
alert("清除 setTimeout");
},2000);
clearTimeout(clear_time);
间歇调用
语法：setInterval(code,millisec)
功能：每隔指定的时间执行一次代码
参数说明：
1、code：要调用的函数或要执行的代码串。
2、millisec：周期性执行或调用code之间的时间间隔，以毫秒计，就是说每隔一段时间，就执行一次代码
var intervalId = setInterval(function(){
console.log("hello!");
},1000);
// 10秒后停止输出hello
setTimeout(function(){
clearInterval(intervalId);
},10000);
// 小例子
var num = 1,
max = 10,
timer = null; // 超时调用的是一个对象，所以给一个初始值null，释放内存
// 每个1秒钟num递增一次，知道num的值等于max清除
/* timer = setInterval(function(){
console.log(num);
num++;
if (num>max){
clearInterval(timer);
}
},1000) */
// 使用超时调用实现小例子
function inCreamentNum(){
console.log(num);
num++;
if (num<=max) {
// setTimeout(inCreamentNum(),1000); 调用函数不要加括号，要么会直接全打印出来
setTimeout(inCreamentNum,1000);
} else{
clearTimeout(timer);
}
}
// timer = setTimeout(inCreamentNum(),1000); 再强调一次，调用函数不要加括号，要么会直接全打印出来
timer = setTimeout(inCreamentNum,1000);
location对象--最有用的对象之一
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。
location对象的常用属性
语法：location.href
功能：返回当前加载页面的完整URL
说明： location.href与window.location.href等价
语法：location.hash 就是锚点
功能：返回URL中的hash（#号后 跟零或多个字符），如果不包含则返回空字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{height: 400px;background: #CCCCCC;}
.box2{height: 600px;background: #666666;}
</style>
</head>
<body>
<div class="box1" id="top"></div>
<div class="box2"></div>
<input type="button" id="btn" value="返回顶部" />
<script type="text/javascript">
// location 不仅可以获取，还可以设置
console.log(location.href);
console.log(location.hash); // 返回URL中的锚点 #top
var btn = document.getElementById("btn");
btn.onclick = function(){
// 这个时候设置锚点#top后，并绑定鼠标点击事件，当点击鼠标的时候，就回去找 id="top"
// 就会到达相对应的DOM节点，就是 <div class="box1" id="top"></div>的位置
location.hash = "#top"; // 没有等号的时候是获取锚点，有等号的时候是设置锚点
}
</script>
</body>
</html>
语法：location.host
功能：返回服务器名称和端口号（如果有）
语法：location.hostname
功能：返回不带端口号的服务器名称。
语法：location.pathname
功能：返回URL中的目录和（或）文件名。
语法：location.port
功能：返回URL中指定的端口号，如果没有，返回空字符串。
语法：location.protocol
功能：返回页面使用的协议。http之类的
语法：location.search 比较常用
功能：返回URL的查询字符串。这个字符串以问号开头。?id=32name=hello
位置操作
改变浏览器位置的方法：
location.href属性
location对象其他属性也可改变URL：
setTimeout(function(){
// 设置要跳转的页面，在2秒钟后跳转,而且在浏览器中会有一条跳转记录
// 也就是说浏览器的向后按钮是可用的，如果不想在历史记录中生成新纪录，那可以用 location.replace()
location.href = "06.locatin.href.html";
// 上面代码等价于 window.location.href = "06.locatin.href.html";
},2000)
location.hash
location.search
location.replace()
<script type="text/javascript">
setTimeout(function(){
// 设置要跳转的页面，在2秒钟后跳转,而且在浏览器中会有一条跳转记录
// 也就是说浏览器的向后按钮是可用的，如果不想在历史记录中生成新纪录，那可以用 location.replace()
//location.href = "06.locatin.href.html";
// 上面代码等价于 window.location.href = "06.locatin.href.html";
location.replace("06.locatin.href.html"); // 跳转成功，且浏览器回退按钮不可用
},2000)
语法：location.replace(url)
功能：重新定向URL。
说明： 使用location.replace不会在历史记录中生成新纪录。
location.reload() 就是相当于刷新页面
语法：location.reload()
功能：重新加载当前显示的页面。
说明：
• location.reload()有可能从缓存中加载
• location.reload(true)传参数后，是强制从服务器重新加载
reload有可能会执行，有可能不会执行，取决于网络和服务器的延迟和系统资源的一些因素，所以要将reload放在代码的最后一行。
<input type="button" id="reload" value="刷新" />
<script type="text/javascript">
var reload = document.getElementById("reload");
reload.onclick = function(){
location.reload(); // 代码建议放在最后
}
</script>
history历史对象 - history对象保存了用户在浏览器中访问页面的历史记录
语法：history.back()
功能：回到历史记录的上一步
说明：相当于使用了history.go(-1)
<h3>这是10.history.html</h3>
<input type="button" id="btn" value="回退按钮" />
<script type="text/javascript">
var btn = document.getElementById("btn");
// 点击btn按钮，回到历史记录的上一步，就是在模拟浏览器回退按钮
btn.onclick = function(){
history.back();
// 上面的代码等价于 history.go(-1);
}
语法：location.forward()
功能：回到历史记录的下一步
说明：相当于使用了history.go(1)
<h3>这是10.history.html</h3>
<a href="11.html">11.html</a>
<input type="button" id="btn" value="回退按钮" />
<input type="button" id="btn2" value="向前按钮" />
<script type="text/javascript">
var btn = document.getElementById("btn");
// 点击btn按钮，回到历史记录的上一步，就是在模拟浏览器回退按钮
btn.onclick = function(){
history.back();
// 上面的代码等价于 history.go(-1);
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
history.forward(); // 下一步
// history.go(1);
}
</script>
语法：history.go(-n)
功能：回到历史记录的前n步
语法：history.go(n)
功能：回到历史记录的后n步，可正可负，比如-2向后退步，3想前进3步
Screen对象属性--在BOM中不太常用
--screen对象包含有关客户端显示屏幕的信息
获取屏幕的高度和宽度，要与innerHeight和innerWidth区别开
语法：screen.availWidth
功能：返回可用的屏幕宽度
语法：screen.availHeight
功能：返回可用的屏幕高度
console.log("页面的宽："+screen.availWidth); // 页面的宽：1366
console.log("页面的高："+screen.availHeight); // 页面的高：728
console.log("pagewidth:"+window.innerWidth); // pagewidth:1366
console.log("pageheight:"+window.innerHeight); // pageheight:443(打开console,会占用一些位置，调整console，相应的值也改变)
获取窗口文档显示区高度和宽度，可以用 innerWidth innerHeight
Navigator对象
Navigator
UserAgent：用来识别浏览器名称、版本、引擎 以及操作系统等信息的内容。
var textBrowser = navigator.userAgent; alert(textBrowser);
//console.log(navigator.userAgent);
// 判断浏览器
function getBrowser(){
var explorer = navigator.userAgent,browser;
if(explorer.indexOf("MSIE")>-1){
browser = "IE";
}else if(explorer.indexOf("Chrome")>-1){
browser = "Chrome";
}else if(explorer.indexOf("Opera")>-1){
browser = "Opera";
}else if(explorer.indexOf("Safari")>-1){
browser = "Safari";
}
return browser;
}
var browser = getBrowser();
console.log("您当前使用的浏览器是："+browser);
// 判断终端
function isPc(){
var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo);
for(i=0;i<Agents.length;i++){
if(userAgentInfo.indexOf(Agents[i])>-1){
flag = false;
break;
}
}
return flag;
}
var isPcs = isPc();
console.log(isPcs);
appCodeName
appName
浙公网安备 33010602011771号