- js分为三部分:
- ECMAScript 语法标准。
- BOM 操作浏览器部分功能。
- DOM 操作网页上的元素。
【注意】
- DOM是BOM的一部分。
- window对象时BOM的顶层对象。所有的BOM对象都是通过window对象延伸出来的,也可以成为window的子对象。
什么是BOM?
- Browser object model 浏览器对象模型。
常见的BOM对象
- window:代表的是整个浏览器窗口
- Location:浏览器中的地址栏信息。
- Navigator:当前浏览器的信息。 使用的什么浏览器,内核,浏览器的版本。 不常见。
- History:历史记录
- Screen:用户的屏幕信息 不常见。
- window 常用的方法
- prompt()
- setInterval() 设置定时器。
- clearInterval()清除定时器
- console 控制台对象。
- open() 开一个新窗口
- onlond() 页面加载完成后执行传入的函数。
- 所有的方法调用都是通过: 对象名.方法名();
- 我们自定义的函数,其实都是定义在window对象中,调用的时候,可以省略window对象名不写。
- window.onload()
- 在页面加载完成后执行操作。
- js的书写位置
- 推荐:body的尾部,head标签的尾部。
- 如果写在head标签中,获取页面中的标签元素时,因为js是从上往下执行的,执行获取元素的代码时,页面还没加载完成,此时获取元素就会得到null。
- 而写在body标签尾部时,执行获取元素的代码时,页面元素已经加载完成了,此时就可以正常的获取元素。
- 如果就要写在head标签尾部,就需要使用window.onload()方法。
- location 浏览器地址栏。
- 一个完整的URL应该包含哪些内容:
- 传输协议: http https(安全的协议,需要用证书)
- 域名 s.taobao.com
- 网页地址 /search
- 查询字符串(参数) q=男士风衣 键值对 q键 男士风衣 值 浏览器传给服务器的信息。
- #123 哈希(hash) 锚点
- location:
- hash:当前页面的hash值。
- href:当前地址栏中的地址。 重点
- 读:location.href 返回的是当前页面的地址。
- 写:location.href = “写在地址栏中的地址”(跳转页面)
- search: 重点
- 获取当前地址栏中的查询字符串.
- navigator 浏览器信息 (了解)
- userAgent 浏览器的版本以及型号信息。
- appName 所有的浏览器都是一样的,都是Netscape
- platform 显示浏览器所在的系统
例:
console.log(navigator.userAgent); //Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36
console.log(navigator.appName); //Netscape
console.log(navigator.platform); //Win32
- history 历史记录对象
- 每个浏览器窗口都有自己的history对象。
常用方法
- history.back(); 后退一页 相当于浏览器 ←
- history.forward(); 前进一页 相当于浏览器 →
- history.go(n)
- n表示一个数字。
- 正整数 表示前进n页
- 0 表示刷新当前页面。
- 负整数 表示后退n页
属性
- length:history对象中历史记录数。
【注意】
- 后退的时候,需要有历史记录才可以后退
- 前进的时候,必须后退过才可以前进。
- 解析查询字符串。
- 获取到的字符串?a=123&b=456;
- 要转换成的对象:
obj {
a:123
b:456
};
function parseParams(str) {
//1.判断是否为空
if (str == null) {
return null;
}
//2.清除第一个字符串 ? slice不会修改源字符串,所以我们将返回的值重新复制给str
str = str.slice(1);
//3.分隔字符串
var arr = str.split("&");
// 6.创建一个对象,用来接收解析的结果。
var obj = {};
//4.遍历数组
arr.forEach(function (item, index) {
//5.分隔字符 “=”
var tmp = item.split("=");
// 7.数组的第一个是属性名,第二个是属性值。放入对象中。
// var a = tmp[0];
// var b = tmp[1];
obj[tmp[0]] = tmp[1];
});
return obj;
}
console.log(parseParams("?a=123&b=456")); //{a: "123", b: "456"}