文章目录
- 🌟前言
- 🌟 Bom(浏览器对象模型)
- 🌟window对象:
- 🌟属性:
- 🌟 方法:
- 🌟 获取元素:
- 🌟 添加点击事件:
- 🌟 获取表单的值:用来连接js和html
- 🌟 设置普通元素:
- 🌟 console对象:
- 🌟console对象方法
- 🌟console.log
- 🌟 console.time
- 🌟console.table
- 🌟 location 对象
- 🌟 location属性
- 🌟 location方法
- 🌟 history 对象
- 🌟 history 对象属性
- 🌟 history 对象方法
- 🌟 总结
- 🌟 Navigator 对象
- 🌟 Navigator的属性
- 🌟 检测浏览器
- 🌟 Vibration(震动)
- 🌟 用途
- 🌟写在最后
🌟前言
哈喽小伙伴们,本文将收录在JavaScript【前端童子功】这个专栏里;这个专栏里边会收录一些JavaScript的基础知识和项目实战;希望大家可以多多支持,你们的支持就是我创作的动力;让我们一起来看看吧🤘
🌟 Bom(浏览器对象模型)
BOM是浏览器对象模型,主要用于管理窗口与窗口之间的通信,核心对象是
window
。
浏览器对象模型(Browser Object Model,简称 BOM)是 JavaScript 的组成部分之一,BOM 赋予了 JavaScript 程序与浏览器交互的能力。
window 对象是 BOM 的核心,用来表示当前浏览器窗口,其中提供了一系列用来操作或访问浏览器的方法和属性。另外,JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象,甚至我们前面介绍的 document 对象也属于 window 对象。
🌟window对象:
🌟属性:
innerWidth
浏览器的宽度innerHright
浏览器的高度screen.width
屏幕分辨率的宽度screen.height
屏幕分辨率的高度
🌟 方法:
alert()
弹出框prompt()
输入框comfirm()
带有确定取消按钮的对会话框。返回布尔值close()
关闭浏览器open(url)
打开新窗口srtInterval(回调函数,时间ms)
间隔一定的时间重复不断的执行回调函数clearInterval(id)
清除时间函数setTimeout(回调函数,时间ms)
间隔一定的时间只执行一次回调函数clearTimeout(id)
清除时间函数
🌟 获取元素:
document.querySelector(选择器)
🌟 添加点击事件:
元素.onclick=function(){
}
🌟 获取表单的值:用来连接js和html
表单元素.value
🌟 设置普通元素:
元素.innerHTML
🌟 console对象:
浏览器控制台。属于
window
对象的子对象。window.console
🌟console对象方法
属性 | 参数 | 返回值 | 功能 | 兼容性 |
---|---|---|---|---|
log | msg | undefined | 向 Web 控制台输出一条消息 | 全部 |
dir | object | undefined | 打印出对象的所有属性和属性值 | >ie8 |
error | msg | undefined | 向 Web 控制台输出一条错误消息 | >ie7 |
warn | msg | undefined | 向 Web 控制台输出一条警告信息 | >ie7 |
time | timerName | undefined | 启动一个计时器(timer)来跟踪某一个操作的占用时长 | >ie10 |
timeEnd | timerName | undefined | 停止一个通过 console.time() 启动的计时器 | >ie10 |
table | tabledata, tablecolumns | undefined | 用于在控制台输出表格信息。 | >ie12 |
🌟console.log
console.log()
方法用于在控制台输出信息。
该方法对于开发过程进行测试很有帮助。
提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台)。
语法
console.log(message)
参数说明
参数 | 类型 | 描述 |
---|---|---|
message | String 或 Object | 必需,控制台上要显示的信息 |
🌟 console.time
console.time()
和console.timeEnd()
这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。
console.time
方法是开始计算时间,console.timeEnd
是停止计时,输出脚本执行的时间:
// 启动计时器
console.time('testForEach');
// (测试用代码)
// 停止计时,输出时间
console.timeEnd('testForEach');
// testForEach 4522.303ms
参数说明
参数 | 类型 | 描述 |
---|---|---|
label | String | 可选,用于给计算器设置标签。 |
tablecolumns | Array | 可选,一个数组,表格标题栏的名称。 |
这两个方法中都可以传入一个参数,作为计时器的名称,它的作用是在代码并行运行时分清楚各个计时器。所以两个方法的参数必须相同。
对console.timeEnd
的调用会立即输出执行总共消耗的时间,单位是毫秒
for 循环测试
var i;
console.time("for 循环测试");
for (i = 0; i < 100000; i++) {
// 代码部分
}
console.timeEnd("for 循环测试");
测试ajax请求所需时间:
console.time("ajax请求时间")
$.ajax({
url:"https://zhihu-daily.leanapp.cn/api/v1/last-stories",
success(res){
console.timeEnd("ajax请求时间")
}
})
// ajax请求时间: 189.089111328125ms
🌟console.table
console.table() 方法用于在控制台输出表格信息。
第一个参数是必需的,且对象类型需要是对象或数组,对应的数据会填充到表格中。
提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台)。
语法
console.table(tabledata, tablecolumns)
参数说明
参数 | 类型 | 描述 |
---|---|---|
tabledata | Array 或 Object | 必需,填充到表格中的数据。 |
tablecolumns | Array | 可选,一个数组,表格标题栏的名称。 |
console.table(["king", "lilei", "susan"]);
🌟 location 对象
JavaScript location 对象中包含了有关当前页面链接(URL)的信息,例如当前页面的完整 URL、端口号等,我们可以通过 window 对象中的 location 属性来获取 location 对象。由于 window 对象是一个全局对象,因此在使用window.location时可以省略 window 前缀,例如window.location.href可以简写为location.href。
🌟 location属性
当前文档的地址对象。也是window
的子对象,window.location
一个完整的url 包括9个部分 协议://用户名:密码@域名:端口/路径;参数?查询#片段 不过几乎没有哪个url包含这些所有组件,最重要的三部分是协议,域名和路径:
以该url为例:
http://www.baidu.com:80/javascript/?file=001/BOM/README.md/#location对象
协议 域名 |端口号| 路径 |查询字符串| |哈希|
属性 | 描述 | 可读写性 | 结果 |
---|---|---|---|
href | 包含整个URL的一个字符串 | 读写 | http://www.baidu.com:80/javascript/001/BOM/?file=README.md#location对象 |
origin | 包含页面来源的域名的标准形式字符串 | 只读 | http://www.baidu.com:80 |
protocol | 包含URL对应协议的字符串,最后有一个":" | 只读 | http: |
host | 包含了域名和端口号的字符串,如没有端口号则只有域名 | 只读 | www.baidu.com:80 |
hostname | 包含URL域名的字符串 | 只读 | www.baidu.com |
port | 包含端口号的字符串 | 只读 | 80 |
pathname | 包含URL中路径部分的字符串,开头有一个"/" | 只读 | /javascript/001/BOM/ |
search | 包含URL参数(查询字符串)的字符串,开头有一个“?” | 只读 | ?file=README.md |
hash | 包含块标识符的字符串,开头有一个"#" | 只读 | #location对象 |
🌟 location方法
属性 | 参数 | 返回值 | 功能 | 兼容性 |
---|---|---|---|---|
assign | url | undefined | 加载给定URL的内容资源 | 全部 |
reload | Boolean | undefined | 重新加载来自当前 URL的资源(刷新本页) | 全部 |
replace | url | undefined | 用给定的URL替换掉当前的资源 | 全部 |
toString | 无 | 包含整个URL的字符串 | 获取本窗口的url,将地址转换成字符串(只能获取,无法修改,读取效果与location.href 相同) | 全部 |
location.assign
与location.replace
的区别:replace()
替换的新页面不会被保存在会话的历史 History中,这意味着用户将不能用后退按钮转到该页面
location.reload
的参数:
- false或未写参数:检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
- true:那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
🌟 history 对象
history
对象是windows
子对象。history
接口允许操作浏览器的曾经在标签页或者框架里访问的历史记录,这些方法和事件能够帮助我们优雅的实现单页面应用,同时又不会影响搜索引擎对我们网站的搜录。现在所有的现代浏览器都已经支持这些新的特性,并且涌现出大量的路由框架,都内置集成了这些新的特性。比方说著名的vue
框架里面的vue-route
等路由框架。
🌟 history 对象属性
属性 | 描述 | 可读写性 | 兼容性 |
---|---|---|---|
length | 包含当前页面在内的历史记录个数 | 只读 | 全部 |
🌟 history 对象方法
属性 | 参数 | 返回值 | 功能 | 兼容性 |
---|---|---|---|---|
back | 无 | undefined | 加载 history 列表中的前一个 URL(等价于history.go(-1)) | 全部 |
forward | 无 | undefined | 加载 history 列表中的下一个 URL(等价于history.go(1)) | 全部 |
go | number | undefined | 通过当前页面的相对位置从浏览器历史记录加载页面 | 全部 |
pushState | state, title, url | undefined | 无刷新的向浏览器 历史最前方 加入一条记录 | >ie9 |
replaceState | state, title, url | undefined | 无刷新的使用一条记录替换当前的历史记录 | >ie9 |
- history.go方法
- history.go(-1): 加载上一个历史记录
- history.go(1): 加载下一个历史记录
- history.go(0) 或不传参: 刷新本页 类似地,你可以传递参数值2并向前移动2个页面,等等。
如果已经没有页面,该方法不会报错,页面不会发生任何变化; 如果参数不是整数,页面也不会发生任何变化。
history.pushState
和history.replaceState
方法有3个参数- 状态对象state —— 需要保存的数据,这个数据在触发
popstate
事件时保存在event.state
上 - 标题title —— 浏览器目前不识别该参数,传入一个空字符串
- 地址URL —— 需要更改的url地址
- 状态对象state —— 需要保存的数据,这个数据在触发
window.onpopstate
事件: 浏览器点击前进后退(或者在js中调用history.back()
、history.forward()
、history.go()
方法)时触发的事件。event.state
可以获取当前url
下设置的state
。
注:pushState
和 replaceState
方法只能加载同源下的资url源(存在跨域问题)
window.onpopstate = function (event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({ page: 1 }, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({ page: 2 }, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({ page: 3 }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 输出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 输出 "location: http://example.com/example.html, state: null
history.go(2); // 输出 "location: http://example.com/example.html?page=3, state: {"page":3}
🌟 总结
- js刷新本页面方法汇总:
- history.go(0)
- location.reload()
- js跳转页面方法汇总:
- window.open(url)
- location.href = “”
- location.assign(url)
🌟 Navigator 对象
Navigator 对象包含有关浏览器的信息,是window对象的属性,中文是"导航器"的意思
🌟 Navigator的属性
属性 | 描述 | 值 |
---|---|---|
language | 返回当前浏览器的语言 | “zh-CN”、"en"等 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 | true,false |
onLine | 返回指明系统是否处于联网状态的布尔值 | true,false |
platform | 返回运行浏览器的操作系统平台。 | “Win32”, “Linux i686”, “MacPPC”, “MacIntel”, 等 |
userAgent | 返回由客户机发送服务器的 user-agent 头部的值 | userAgent: “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36” |
🌟 检测浏览器
检测浏览器版本:
function getExplorerInfo() {
var explorer = window.navigator.userAgent.toLowerCase();
//ie
if (explorer.indexOf("msie") >= 0) {
var ver = explorer.match(/msie ([\d.]+)/)[1];
return { type: "IE", version: ver };
}
else if (explorer.indexOf("edge") >= 0) {
var ver = explorer.match(/edge\/([\d.]+)/)[1];
return { type: "Edge", version: ver };
}
//firefox
else if (explorer.indexOf("firefox") >= 0) {
var ver = explorer.match(/firefox\/([\d.]+)/)[1];
return { type: "Firefox", version: ver };
}
//Chrome
else if (explorer.indexOf("chrome") >= 0) {
var ver = explorer.match(/chrome\/([\d.]+)/)[1];
return { type: "Chrome", version: ver };
}
//Opera
else if (explorer.indexOf("opera") >= 0) {
var ver = explorer.match(/opera.([\d.]+)/)[1];
return { type: "Opera", version: ver };
}
//Safari
else if (explorer.indexOf("safari") >= 0) {
var ver = explorer.match(/safari\/([\d.]+)/)[1];
return { type: "Safari", version: ver };
}
}
检测浏览器是否为PC端
function getExplorerType(){
var explorer = window.navigator.userAgent.toLowerCase();
return explorer.indexOf('mobile') === -1
}
结果:true PC , false 为 Mobile
检测当前网络状态
//浏览器在线
window.ononline = function(){
console.log(window.navigator.onLine)
}
//浏览器离线
window.onoffline = function(){
console.log(window.navigator.onLine)
}
h5相机拍照
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
window.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = {
"video": true
},
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
$("#snap").click(function () {
context.drawImage(video, 0, 0, 330, 250);
})
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(videoObj)
.then(function (stream) {
video.srcObject = stream;
video.play();
})
.catch(errBack)
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
</script>
</head>
<body>
<div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
<canvas style="" id="canvas" width="320" height="320"></canvas>
</div>
</body>
</html>
🌟 Vibration(震动)
// 可以传入一个大于0的数字,表示让手机震动相应的时间长度,单位为ms
navigator.vibrate(100)
// 也可以传入一个包含数字的数组,比如下面这样就是代表震动300ms,暂停200ms,震动100ms,暂停400ms,震动100ms
navigator.vibrate([300,200,100,400,100])
// 也可以传入0或者一个全是0的数组,表示暂停震动
navigator.vibrate(0)
🌟 用途
使手机震动,用来给用户一个提示,例如说数据校验失败。
🌟写在最后
更多JavaScript知识以及API请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!
✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!