From c0b8cf5b7123cc0cdb5c4929dfc6f64399779987 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A2=81=E8=B4=B5=E6=A3=AE?= <3032059138@qq.com> Date: Fri, 18 Nov 2022 03:11:51 +0000 Subject: [PATCH 1/2] =?UTF-8?q?28=E8=A2=81=E8=B4=B5=E6=A3=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 袁贵森 <3032059138@qq.com> --- ...\346\222\255\344\275\234\344\270\232.html" | 30 +++++ ...\344\272\272\344\275\234\344\270\232.html" | 115 ++++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 "28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1117BOM\345\233\276\347\211\207\350\275\256\346\222\255\344\275\234\344\270\232.html" create mode 100644 "28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1117BOM\346\212\275\344\272\272\344\275\234\344\270\232.html" diff --git "a/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1117BOM\345\233\276\347\211\207\350\275\256\346\222\255\344\275\234\344\270\232.html" "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1117BOM\345\233\276\347\211\207\350\275\256\346\222\255\344\275\234\344\270\232.html" new file mode 100644 index 0000000..a2b44fb --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1117BOM\345\233\276\347\211\207\350\275\256\346\222\255\344\275\234\344\270\232.html" @@ -0,0 +1,30 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git "a/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1117BOM\346\212\275\344\272\272\344\275\234\344\270\232.html" "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1117BOM\346\212\275\344\272\272\344\275\234\344\270\232.html" new file mode 100644 index 0000000..72b5eeb --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\344\275\234\344\270\232/2022-1117BOM\346\212\275\344\272\272\344\275\234\344\270\232.html" @@ -0,0 +1,115 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
郑玮喆庄云廖治先郑文源戴俊锋陈昊童谢金金
占志新张淑芳刘永潘廖柏成郑宗帅李韦峰吴欣燕
陈梅香陈立智袁贵森赵浩敏林世涛罗启恒卢国建
黄柱菘陈鹏张耀仁陈华伟张正豪韦仲晓黄富贵
陆建锋曾德森吴文龙陆利群黄雄王世财张先杰
胡基耀马鑫涛李涛杨凌翔罗此东唐皓颖白婉婷
+ +
+ + +
+ + + + \ No newline at end of file -- Gitee From 4d4bd361a869b99f88889cfa7d76afbba23adc84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A2=81=E8=B4=B5=E6=A3=AE?= <3032059138@qq.com> Date: Fri, 18 Nov 2022 03:12:06 +0000 Subject: [PATCH 2/2] =?UTF-8?q?28=E8=A2=81=E8=B4=B5=E6=A3=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 袁贵森 <3032059138@qq.com> --- .../2022-1117BOM\347\254\224\350\256\260.md" | 248 ++++++++++++++++++ 1 file changed, 248 insertions(+) create mode 100644 "28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1117BOM\347\254\224\350\256\260.md" diff --git "a/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1117BOM\347\254\224\350\256\260.md" "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1117BOM\347\254\224\350\256\260.md" new file mode 100644 index 0000000..fb14cf3 --- /dev/null +++ "b/28\350\242\201\350\264\265\346\243\256/\347\254\224\350\256\260/2022-1117BOM\347\254\224\350\256\260.md" @@ -0,0 +1,248 @@ +# **BOM** + +- BOM（Browser Object Model）： 浏览器对象模型 + +- 其实就是操作浏览器的一些能力 + +- 我们可以操作哪些内容 + +- - 获取一些浏览器的相关信息（窗口的大小） + - 操作浏览器进行页面跳转 + - 获取当前浏览器地址栏的信息 + - 操作浏览器的滚动条 + - 浏览器的信息（浏览器的版本） + - 让浏览器出现一个弹出框（alert/confirm/prompt） + +- BOM 的核心就是 window 对象 + +- window 是浏览器内置的一个对象，里面包含着操作浏览器的方法 + +### **获取浏览器窗口的尺寸** + +- `innerHeight` 和 `innerWidth` +- 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的） + +```js +var windowHeight = window.innerHeight +console.log(windowHeight) + +var windowWidth = window.innerWidth +console.log(windowWidth) +``` + +### **浏览器的弹出层** + +- `alert` 是在浏览器弹出一个提示框 + +```js +window.alert('我是一个提示框') +``` + +- - 这个弹出层知识一个提示内容，只有一个确定按钮 + - 点击确定按钮以后，这个提示框就消失了 + +- `confirm` 是在浏览器弹出一个询问框 + +```js +var boo = window.confirm('我是一个询问框') +console.log(boo) +``` + +- - 这个弹出层有一个询问信息和两个按钮 + - 当你点击确定的时候，就会得到 true + - 当你点击取消的时候，就会得到 false + +```js +var str = window.prompt('请输入内容') +console.log(str) +``` + +- - 这个弹出层有一个输入框和两个按钮 + - 当你点击取消的时候，得到的是 null + - 当你点击确定的时候得到的就是你输入的内容 + +### **浏览器的地址信息** + +- 在 window 中有一个对象叫做 `location` +- 就是专门用来存储浏览器的地址栏内的信息的 + +### **location.href** + +- `location.href` 这个属性存储的是浏览器地址栏内 url 地址的信息 + +```js +console.log(window.location.href) +``` + +- - 会把中文编程 url 编码的格式 + +- `location.href` 这个属性也可以给他赋值 + +```js +window.location.href = './index.html' +// 这个就会跳转页面到后面你给的那个地址 +``` + +### **location.reload** + +- `location.reload()` 这个方法会重新加载一遍页面，就相当于刷新是一个道理 + +```js +window.location.reload() +``` + +- - 注意： **不要写在全局，不然浏览器就会一直处在刷新状态** + +### **浏览器的历史记录** + +- window 中有一个对象叫做 `history` +- 是专门用来存储历史记录信息的 + +### **history.back** + +- `history.back` 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮 + `window.history.back()` + +- - 前提是你要有上一条记录，不然就是一直在这个页面，也不会回退 + +### **history.forword** + +- `history.forword` 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮 + `window.history.forward()` + +- - 前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个 + +### **浏览器的版本信息（了解）** + +- window 中有一个对象叫做 `navigator` +- 是专门用来获取浏览器信息的 + +### **navigator.userAgent** + +- `navigator.userAgent` 是获取的浏览器的整体信息 + +```js +console.log(window.navigator.userAgent) +// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36 +``` + +### **navigator.appName** + +- `navigator.appName` 获取的是浏览器的名称 + +```js +console.log(window.navigator.appName) +``` + +### **navigator.appVersion** + +- `navigator.appVersion` 获取的是浏览器的版本号 + +```js +console.log(window.navigator.appVersion) +``` + +### **navigator.platform** + +- `navigator.platform` 获取到的是当前计算机的操作系统 + +```js +console.log(window.navigator.platform) +``` + +### **浏览器的 onload 事件** + +- 这个不在是对象了，而是一个事件 +- 是在页面所有资源加载完毕后执行的 + +```js +window.onload = function () { + console.log('页面已经加载完毕') +} +``` + +### **在 html 页面中把 js 写在 head 里面** + +```js + + + + + + +
+ + +``` + +### **在 html 页面中把 js 写在 body 最后面** + +```js + + + + + +
+ + + + +``` + + + +### **定时器** + +- 在 js 里面，有两种定时器，**倒计时定时器** 和 **间隔定时器** + +### **倒计时定时器** + +- 倒计时多少时间以后执行函数 +- 语法： `setTimeout(要执行的函数，多长时间以后执行)` +- 会在你设定的时间以后，执行函数 + +```js +var timerId = setTimeout(function () { + console.log('我执行了') +}, 1000) +console.log(timerId) // 1 +``` + +- - 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟 + - 所以会在页面打开 1 秒钟以后执行函数 + - 只执行一次，就不在执行了 + - 返回值是，当前这个定时器是页面中的第几个定时器 + +### **间隔定时器** + +- 每间隔多少时间就执行一次函数 +- 语法： `setInterval(要执行的函数，间隔多少时间)` + +```js +var timerId = setInterval(function () { + console.log('我执行了') +}, 1000) +``` + +- - 时间和刚才一样，是按照毫秒进行计算的 + - 每间隔 1 秒钟执行一次函数 + - 只要不关闭，会一直执行 + - 返回值是，当前这个定时器是页面中的第几个定时器 \ No newline at end of file -- Gitee