1、BOM(Brower Object Model)
浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
2、BOM和DOM区别
1、窗口加载事件
(1)window.onload:是窗口(页面)加载事件,当文档内容(包括图像、脚本文件、CSS文件等)完全加载完成会触发该事件,调用该事件对应的事件处理函数。
实现方式:
window.onload = function () {}; //方式一
window.addEventListener('load', function () {}); //方式二
(2)document.DOMContentLoaded:document.DOMContentLoaded加载事件,会在DOM加载完成时触发,这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载
2、调整窗口大小事件window.onresize
当调整window窗口大小的时候,就触发window.onresize事件,调用事件处理函数
// 方式1 window.onresize = function () {}; // 方式2 window.addEventListener('resize', function () {});
定时器方法如下:
案例:3秒后页面中的图片消失
<body> <img src="../image/1.jfif"> <script> function fn(){ var img = document.querySelector('img') //获取标签 img.style.display = 'none' //style为样式规则 } var hidden = setTimeout(fn,3000) </script> </body>
(1)单线程:JavaScript语言的一大特点就是单线程,即同一个时间只能做一件事
A、进程:程序的一次动态运行,有独立的内存空间 B、线程:是进程的运行单位,一个进程可以分为若干个线程
(2)同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的
(3)异步:在做一件事情的同时去做其他的事情
执行栈和队列如下图:
console.log(1); setTimeout(function () { console.log(3); }, 0); for (var i = 0, str = ''; i < 900000; i++) { str += i; // 利用字符串拼接运算拖慢执行时间 } console.log(2);
1、location对象:地址对象
2、URL(Uniform Resource Locator):统一资源定位符
URL组成
注: ①host:主机(即服务器名),例如:本地机的ip是127.0.0.1,或 localhost
②port:端口,65535个
0~1023:由系统使用
1024~65535:用户使用
③query:参数,以键值对的形式表示,参数之间用‘&’分隔,参数和地址之间用’?'分隔
例如:http://localhost:8000/admin/findUser?name=‘张三’&password=‘123’
3、location常用属性
案例:创建login.html登录页面
<form action="index.html"> 用户名: <input type="text" name="uname"> <input type="submit" value="登录"> </form> <script> console.log(location.search); // 结果为:?uname=andy // 1. 去掉search中的问号“?” var params = location.search.substr(1); console.log(params); // 结果为:uname=andy // 2. 把字符串分割为数组 var arr = params.split('='); console.log(arr); // 结果为:["uname", "andy"] var div = document.querySelector('div'); // 3. 把数据写入div中 div.innerHTML = arr[1] + '欢迎您'; </script>
4、location的常用方法
1、nevigator对象
①常用属性
②常用方法javaEnabled():指定是否在浏览器中启用Java
案例
<body> <script> console.log('内核:' + navigator.appCodeName) console.log('名称:' + navigator.appName) console.log('版本:' + navigator.appVersion) console.log('cookie:' + navigator.cookieEnabled) console.log('操作系统' + navigator.platform) </script> </body>
2、history对象
①常用属性:history.length属性:返回历史列表中的网址数
②常用方法
<script> console.log(history.length) </script>