JSBOM
BOM
所谓BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器
Bom浏览器对象模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="printLuffy()">打印</button>
<button onclick="findLuffy()">查找</button>
</body>
<script type="text/javascript">
//1.js ECMAScript DOM：文档 BOM
//BOM Browser Object Model 浏览器对象模型
//核心 浏览器
//浏览器的输出 屏幕的宽高 滚动的宽高 setInterval .. window.open()开一个网址； close() location本地的一个对象
alert(1) //弹出框
//2.用于浏览器的调试
console.log('路飞学城') //路飞学城
//3. prompt('message',defaultValue) ；输入给它返回
var pro = prompt('luffycity','123456'); //会弹出 luffycity 123456
console.log(pro)
//4 confirm() 如果点击确定 返回true 如果点击取消 返回false
var m = confirm("学习Bom");
console.log(m) //学习Bom
function printLuffy(){ //直接调用打印这个页面
print()
}
function findLuffy(){
var m2 = confirm("学习Bom");
find(m2);
}
</script>
</html>
open和close方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--需求：点击按钮，打开新的窗口--> <button>原窗口</button> <button>新窗口</button> <a href="http://www.luffycity.com" target="_self">原窗口</a> <a href="http://www.luffycity.com" target="_blank">新窗口</a> <script type="text/javascript"> var oBtn = document.getElementsByTagName('button')[0]; var oBtn1 = document.getElementsByTagName('button')[1]; oBtn.onclick = function () { // window.open(url,新窗口/原窗口) open('http://www.luffycity.com', target='_self'); } oBtn1.onclick = function () { open('https://www.luffycity.com', target='_blank'); } </script> </body> </html>
location本地信息对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> console.log(location) setTimeout(function () { location.href = 'https://www.baidu.com'; alert('度娘知道'); },2000) </script> </body> </html>
history对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>我是原网页</p> <a href="./index.html">新网页</a> <button id="back">后退</button> <button id="refresh">刷新</button> <button id="forward">前进</button> <script type="text/javascript"> function $(id) { return document.getElementById(id); } $('forward').onclick = function () { // (1)表示前进 window.history.go(1); } $('back').onclick = function () { // (-1)表示后退 window.history.go(-1); } $('refresh').onclick = function () { // (0)表示刷新，不常用，这个是全局刷新 // window.history.go(0); location.reload(); } </script> </body> </html>
客户端存储技术
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="text" name="user" id="user"> <input type="submit" id="btn" value="保存"> <button id="clear">清除</button> </div> <ul id="lists"> </ul> <script type="text/javascript"> var oBtn = document.getElementById('btn'); var oUser = document.getElementById('user'); var oLists = document.getElementById('lists'); var li = document.createElement('li'); oBtn.onclick = function () { var val = oUser.value; localStorage.setItem('name', val) oUser.value = ''; li.innerHTML = val; } window.onload = function(){ if(localStorage.getItem('name')){ var name = localStorage.getItem('name'); li.innerHTML = name; oLists.appendChild(li); } } document.getElementById('clear').onclick = function(){ localStorage.clear(); window.location.reload(); } oLists.appendChild(li) // 客户端存储技术 // localStorage // var arr = [{'title':'abcd','done':false}]; // var name = 'alex'; // localStorage.setItem('TODO',arr); // localStorage.setItem('todo',name); </script> </body> </html>
