這篇文章為大家帶來了關於JavaScript中BOM的相關知識,BOM 由一系列相關的物件構成,每個物件都提供了許多方法與屬性,希望對大家有幫助。
DOM | BOM |
---|---|
文件物件模型 | 瀏覽器物件模型 |
DOM 就是把文件當作一個物件來看待 | 把瀏覽器當作一個物件來看 |
#DOM 的頂層物件是document | BOM 的頂層物件是window |
DOM 主要學習的是操作頁面元素 | BOM 學習的是瀏覽器視窗互動的一些對象 |
DOM 是W3C 標準規格 | BOM 是瀏覽器廠商在各自瀏覽器上定義的,相容性較差 |
#BOM 比 DOM 更大。它包含 DOM。
window 物件是瀏覽器的頂級對象,它具有雙重角色
alert()、prompt()等。
注意:window下的一個特殊屬性window.name
// 定义在全局作用域中的变量会变成window对象的属性 var num = 10; console.log(window.num); // 10 // 定义在全局作用域中的函数会变成window对象的方法 function fn() { console.log(11); } console.fn(); // 11 var name = 10; //不要用这个name变量,window下有一个特殊属性window.name console.log(window.num);
#window.onload是視窗(頁面)載入事件,當文件內容完全載入完成會觸發該事件(包括圖像,腳本文件,CSS文件等),就呼叫的處理函數。
window.onload = function(){ };// 或者window.addEventListener("load",function(){});
注意:
window.onload就可以把JS程式碼寫到頁面元素的上方
onload是等頁面內容全部載入完畢,再去執行處理函數
window.onload 傳統註冊事件方式,只能寫一次
window.onload為準
如果使用addEventListener 則沒有限制
document.addEventListener('DOMContentLoaded',function(){})
DOMCountentLoaded事件觸發時,僅當DOM加載完成,不包括樣式表,圖片,flash等等
DOMContentLoaded事件比較適合。
等頁面內容全部載入完畢,包括頁面dom元素,圖片,flash,css等等
是DOM載入完畢,不包含圖片flash css 等就可以執行,載入速度比load更快一些
<script> // window.onload = function() { // var btn = document.querySelector(&#39;button&#39;); // btn.addEventListener(&#39;click&#39;, function() { // alert(&#39;点击我&#39;); // }) // } // window.onload = function() { // alert(22); // } window.addEventListener(&#39;load&#39;, function() { var btn = document.querySelector(&#39;button&#39;); btn.addEventListener(&#39;click&#39;, function() { alert(&#39;点击我&#39;); }) }) window.addEventListener(&#39;load&#39;, function() { alert(22); }) document.addEventListener(&#39;DOMContentLoaded&#39;, function() { alert(33); }) // load 等页面内容全部加载完毕,包含页面dom元素 图片 flash css 等等 // DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以执行 加载速度比 load更快一些</script>
window.onresize 是調整視窗大小載入事件,當觸發時就呼叫的處理函數
window.onresize = function() {}// 或者window.addEventListener('resize',function(){});
目前螢幕的寬度
<script> window.addEventListener(&#39;load&#39;, function() { var p = document.querySelector(&#39;p&#39;); window.addEventListener(&#39;resize&#39;, function() { console.log(window.innerWidth); console.log(&#39;变化了&#39;); if (window.innerWidth <= 800) { p.style.display = &#39;none&#39;; } else { p.style.display = &#39;block&#39;; } }) }) </script> <p></p>
setTimeout()方法用於設定計時器,該定時器在計時器到期後執行呼叫函數。
window.setTimeout(调用函数,[延迟的毫秒数]);
注意:
可以省略
這個呼叫函數我們也稱為
回呼函數callback
<script> // 1. setTimeout // 语法规范: window.setTimeout(调用函数, 延时时间); // 1. 这个window在调用的时候可以省略 // 2. 这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0 // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 &#39;函数名()&#39; // 4. 页面中可能有很多的定时器,我们经常给定时器加标识符 (名字) // setTimeout(function() { // console.log(&#39;时间到了&#39;); // }, 2000); function callback() { console.log(&#39;爆炸了&#39;); } var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 5000); // setTimeout(&#39;callback()&#39;, 3000); // 我们不提倡这个写法 </script>
方法取消了先前透過呼叫
setTimeout()建立的計時器
##window.clearTimeout(timeoutID)
:
裡面的參數就是計時器的識別碼<button>点击停止定时器</button> <script> var btn = document.querySelector(&#39;button&#39;); var timer = setTimeout(function() { console.log(&#39;爆炸了&#39;); }, 5000); btn.addEventListener(&#39;click&#39;, function() { clearTimeout(timer); }) </script>
window.setInterval(回调函数,[间隔的毫秒数]);
#這個回呼函數:<script> // 1. setInterval // 语法规范: window.setInterval(调用函数, 延时时间); setInterval(function() { console.log(&#39;继续输出&#39;); }, 1000); // 2. setTimeout 延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器 // 3. setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数 </script>
setInterval()
建立的定時器
window
可以省略<button>开启定时器</button> <button>停止定时器</button> <script> var begin = document.querySelector(&#39;.begin&#39;); var stop = document.querySelector(&#39;.stop&#39;); var timer = null; // 全局变量 null是一个空对象 begin.addEventListener(&#39;click&#39;, function() { timer = setInterval(function() { console.log(&#39;ni hao ma&#39;); }, 1000); }) stop.addEventListener(&#39;click&#39;, function() { clearInterval(timer); }) </script>
this
的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this
到底指向谁现阶段,我们先了解一下几个this指向
this
指向全局对象window
(注意定时器里面的this指向window)this
指向谁this
指向构造函数实例<button>点击</button> <script> // this 指向问题 一般情况下this的最终指向的是那个调用它的对象 // 1. 全局作用域或者普通函数中this指向全局对象window( 注意定时器里面的this指向window) console.log(this); function fn() { console.log(this); } window.fn(); window.setTimeout(function() { console.log(this); }, 1000); // 2. 方法调用中谁调用this指向谁 var o = { sayHi: function() { console.log(this); // this指向的是 o 这个对象 } } o.sayHi(); var btn = document.querySelector(&#39;button&#39;); // btn.onclick = function() { // console.log(this); // this指向的是btn这个按钮对象 // } btn.addEventListener(&#39;click&#39;, function() { console.log(this); // this指向的是btn这个按钮对象 }) // 3. 构造函数中this指向构造函数的实例 function Fun() { console.log(this); // this 指向的是fun 实例对象 } var fun = new Fun(); </script>
以下代码执行的结果是什么?
console.log(1);setTimeout(function() { console.log(3);},1000);console.log(2);
那么以下代码执行的结果又是什么?
console.log(1);setTimeout(function() { console.log(3);},0);console.log(2);
同步任务
异步任务
click
,resize
等load
,error
等setInterval
,setTimeout
等此时再来看我们刚才的问题:
console.log(1);setTimeout(function() { console.log(3);},1000);console.log(2);
console.log(1);setTimeout(function() { console.log(3);},0);console.log(2);
// 3. 第三个问题console.log(1);document.onclick = function() { console.log('click');}console.log(2);setTimeout(function() { console.log(3)}, 3000)
同步任务放在执行栈中执行,异步任务由异步进程处理放到任务队列中,执行栈中的任务执行完毕会去任务队列中查看是否有异步任务执行,由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。
location
属性用于获取或者设置窗体的url,并且可以解析url。因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。==统一资源定位符(uniform resouce locator)==是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
url 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link
组成 | 说明 |
---|---|
protocol | 通信协议 常用的http,ftp,maito等 |
host | 主机(域名) www.itheima.com |
port | 端口号,可选 |
path | 路径 由零或多个'/' 符号隔开的字符串 |
query | 参数 以键值对的形式,通过& 符号分隔开来 |
fragment | 片段 # 后面内容 常见于链接 锚点 |
location对象属性 | 返回值 |
---|---|
location.href | 获取或者设置整个URL |
location.host | 返回主机(域名)www.baidu.com |
location.port | 返回端口号,如果未写返回空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容常见于链接 锚点 |
重点记住:href
和search
需求:5s之后跳转页面
<button>点击</button> <p></p> <script> var btn = document.querySelector(&#39;button&#39;); var p = document.querySelector(&#39;p&#39;); var timer = 5; setInterval(function() { if (timer == 0) { location.href = &#39;http://www.itcast.cn&#39;; } else { p.innerHTML = &#39;您将在&#39; + timer + &#39;秒钟之后跳转到首页&#39;; timer--; } }, 1000); </script>
location对象方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面(也称为重定向页面) |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.reload() | 重新加载页面,相当于刷新按钮或者 f5 ,如果参数为true 强制刷新 ctrl+f5 |
<button>点击</button> <script> var btn = document.querySelector(&#39;button&#39;); btn.addEventListener(&#39;click&#39;, function() { // 记录浏览历史,所以可以实现后退功能 // location.assign(&#39;http://www.itcast.cn&#39;); // 不记录浏览历史,所以不可以实现后退功能 // location.replace(&#39;http://www.itcast.cn&#39;); location.reload(true); }) </script>
我们简单写一个登录框,点击登录跳转到 index.html
接下来我们写 index.html
<p></p> <script> console.log(location.search); // ?uname=andy // 1.先去掉? substr(&#39;起始的位置&#39;,截取几个字符); var params = location.search.substr(1); // uname=andy console.log(params); // 2. 利用=把字符串分割为数组 split(&#39;=&#39;); var arr = params.split(&#39;=&#39;); console.log(arr); // ["uname", "ANDY"] var p = document.querySelector(&#39;p&#39;); // 3.把数据写入p中 p.innerHTML = arr[1] + &#39;欢迎您&#39;; </script>
这样我们就能获取到路径上的URL参数
userAgent
,该属性可以返回由客户机发送服务器的user-agent
头部的值下面前端代码可以判断用户是用哪个终端打开页面的,如果是用 PC 打开的,我们就跳转到 PC 端的页面,如果是用手机打开的,就跳转到手机端页面
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { window.location.href = ""; //手机 } else { window.location.href = ""; //电脑 }
history对象方法 | 作用 |
---|---|
back() | 可以后退功能 |
forward() | 前进功能 |
go(参数) | 前进后退功能,参数如果是 1 前进1个页面 如果是 -1 后退1个页面 |
<a>点击我去往列表页</a> <button>前进</button> <script> var btn = document.querySelector(&#39;button&#39;); btn.addEventListener(&#39;click&#39;, function() { // history.forward(); history.go(1); }) </script>
相关推荐:javascript学习教程
以上是深入淺析JavaScript進階BOM技術的詳細內容。更多資訊請關注PHP中文網其他相關文章!