BOM
-
BOM简介
-
浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作
-
BOM对象
-
window
代表的是整个浏览器的窗口，同时window也是网页中的全局对象
-
Navigator
代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器
-
Location
代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
-
History
代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私问题，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
而且该操作只在当次访问时有效
-
Screen
代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
-
这些BOM对象在浏览器中都是作为window对象的属性保存的
可以通过window对象来使用这些属性
-
-
-
BOM-userAgent
-
<head> <script type="text/javascript"> /* * Navigator * 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 * 由于历史原因，Navigator对象中的大部分属性已经不能帮助我们识别浏览器了 * 一般我们使用userAgent来判断浏览器的信息 * userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容 * 不同的浏览器会有不同的userAgent * Edge的userAgent * Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134 * chrome * Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36 * IE10 * Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729;.NET CLR 3.5.30729) * IE9 * Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729) * IE8 * Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729) * IE11 * Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko * -在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否有IE11 */ var ua=navigator.userAgent; console.log(ua); if(/firefox/i.test(ua)){ alert("他是火狐"); }else if(/chrome/i.test(ua)){ alert("他是Chrome"); }else if(/msie/i.test(ua)){ alert("他是IE浏览器...."); }else if("ActiveXObject" in window){ alert("他是IE11"); } /* * 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息 * 比如： ActiveXObject */ // if("ActiveXObject" in window){ // alert("他是IE"); // }else{ // alert("你不是IE"); // } </script> </head>
-
-
BOM-History
-
<head> <script type="text/javascript"> /* * History * -对象可以用来操作浏览器向前或向后翻页 */ /* * length * 属性 可以获取到当前访问的链接数量 */ //alert(history.length); window.onload=function(){ var btn1=document.getElementById("btn01"); btn01.onclick=function(){ /* * back() * -可以用来回退到上一个页面，作用和浏览器的回退按钮一样 */ //history.back(); /* * forward() * -可以跳转到下一个页面，作用和浏览器的前进按钮一样 */ //history.forward(); /* * go() * -可以用来跳转到指定的页面 * -它需要一个整数作为参数 * 1.表示向前跳转一个页面，相当于forward() * 2.表示向前跳转两个页面 * -1.表示向后跳转一个页面 * -2.表示向后跳转两个页面 */ history.go(-2); }; }; </script> </head> -
<button id="btn01">按我一下吧</button><h1>history</h1>
-
-
BOM-Location
-
<head> <script type="text/javascript"> /* * Location * -该对象中封装了浏览器的地址栏的信息 */ window.onload=function(){ var btn=document.getElementById("btn01"); btn.onclick=function(){ /* * 如果直接将Location属性修改为一个完整的路径，或相对路径 * 则我们的页面会自动跳转到该路径，并且会生成历史纪录 */ // location="http://www.baidu.com"; // location="BOM-history-test1.html"; /* * assign() * 用来跳转到其他的页面，作用和直接修改location一样 */ // location.assign("http://www.baidu.com"); /* * reload() * 用于重新加载当前页面，作用和刷新按钮一样 * 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面 */ // location.reload(true); /* * replace() * 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面 * 注意：不会生成历史纪录，不能使用回退按钮回退 */ location.replace("BOM-userAgent.html"); }; }; </script> </head>
-
-
BOM-定时调用
-
<head> <script type="text/javascript"> window.onload=function(){ var count=document.getElementById("count"); //使count中的内容，自动切换 /* * JS中的程序的执行速度是很快的 * 如果希望一段程序，可以每隔一段时间执行一次，可以使用定时调用 */ /* * setInterval() * 定时调用 * 可以将一个函数，每隔一段时间执行一次 * 参数： * 1.回调函数 ，该函数会每隔一段时间被调用 * 2.每次调用间隔的时间，单位是毫秒 * 返回值： * 返回一个Number类型的数据 * 这个数字用来作为定时器的唯一标识 */ var num=0; var timer=setInterval(function(){ count.innerHTML=num++; if(num==11){ //clearInterval()可以用来关闭一个定时器 //方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器 clearInterval(timer); } },500); }; </script> </head>
-
-
BOM-延时调用
-
<head> <script type="text/javascript"> window.onload=function(){ /* * 延时调用 * 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次 * * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次 * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己的需要去选择 */ var num=1; var timer=setTimeout(function(){ console.log(num++); },3000); //使用clearTimeout()来关闭一个延时调用 //clearTimeout(timer); }; </script> </head>
-
-
类的操作
-
<head> <style type="text/css"> .b1{ width: 100px; height: 100px; background-color: red; } .b2{ width: 200px; height: 300px; background-color: yellow; } </style> <script type="text/javascript"> window.onload=function(){ var box=document.getElementById("box"); var btn01=document.getElementById("btn01"); btn01.onclick=function(){ /* * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面 * 这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不方便 */ // box.style.backgroundColor="yellow"; // box.style.width="200px"; // box.style.height="200px"; //这时我们希望一行代码修改多个样式 /* * 我们可以通过修改元素的class属性来间接的修改样式 * 这样一来，我们只需修改一次，即可同时修改多个样式 * 浏览器只需要重新渲染页面一次，性能好 * 并且这种方式，可以使表现和行为进一步分离 */ //box.className += " b2";//b2前面必须要有个空格 //addClass(box,"b2"); //removeClass(box,"b2"); toggleClass(box,"b2"); }; //定义一个函数，用来向一个元素中添加指定的class属性值 /* * 参数： * obj 要添加class属性的元素 * cn 要添加的class值 */ function addClass(obj,cn){ //检查obj中是否含有cn if(!hasClass(obj,cn)){ obj.className +=" "+cn; } } /* * 判断一个元素中是否含有指定的class属性值 * 有-->true 否-->false */ function hasClass(obj,cn){ //判断obj中有没有cn class //创建一个正则表达式 //var reg=/\bb2\b/;//\b是单词边界 标志着b2是单词 var reg=new RegExp("\\b"+cn+"\\b"); return reg.test(obj.className); } /* * 删除元素中指定的class属性 */ function removeClass(obj,cn){ //创建一个正则表达式 var reg=new RegExp("\\b"+cn+"\\b"); //删除class obj.className=obj.className.replace(reg,""); } /* * toggleClass可以用来切换一个类 * 如果元素中具有该类，则删除 * 如果元素中没有该类，则添加 */ function toggleClass(obj,cn){ if(hasClass(obj,cn)){ //有 删除 removeClass(obj,cn); }else{ //没有 则添加 addClass(obj,cn); } } }; </script> </head> -
<button id="btn01">点击按钮改变box的样式</button><div id="box" class="b1 b2"></div>
-
529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
