Javascript
BOM +DOM+ECMAScript
//BOM Browser Object Model ：浏览器对象模型
//浏览器给我们提供了一个顶级对象叫做 window
// 我们可以操作这些内容:
// 获取一些浏览器的相关信息（ 窗口的大小）
// 操作浏览器进行页面跳转
// 获取当前浏览器地址栏的信息
// 操作浏览器的滚动条
// 浏览器的信息（ 浏览器的版本）
// 让浏览器出现一个弹出框（ alert / confirm / prompt）
// BOM 的核心就是 window 对象
// window 是浏览器内置的一个对象， 里面包含着操作浏览器的方法
// 获取浏览器窗口的尺寸 {
// innerHeight 和 innerWidth
// 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）
// var windowHeight = window.innerHeight
// console.log(windowHeight)
// var windowWidth = window.innerWidth
// console.log(windowWidth)
// }
//浏览器的弹出层
// alert 是在浏览器弹出一个提示框
// window.alert('我是一个提示框')
// 这个弹出层知识一个提示内容， 只有一个确定按钮
// 点击确定按钮以后， 这个提示框就消失了
// confirm 是在浏览器弹出一个询问框
// var boo = window.confirm('我是一个询问框')
// console.log(boo)
// 这个弹出层有一个询问信息和两个按钮
// 当你点击确定的时候， 就会得到 true
// 当你点击取消的时候， 就会得到 false
// prompt 是在浏览器弹出一个输入框
// var str = window.prompt('请输入内容')
// console.log(str)
// 这个弹出层有一个输入框和两个按钮
// 当你点击取消的时候， 得到的是 null
// 当你点击确定的时候得到的就是你输入的内容
// 浏览器的地址信息
// 在 window 中有一个对象叫做 location
// 就是专门用来存储浏览器的地址栏内的信息的
// 1. location.href
// location.href 这个属性存储的是浏览器地址栏内 url 地址的信息
// console.log(window.location.href)
// 会把中文编程 url 编码的格式
// location.href 这个属性也可以给他赋值
// window.location.href = './index.html'
// 这个就会跳转页面到后面你给的那个地址
// 例如： 点击按钮后让页面跳转
// btn.onclick = function() {
// alert("注册成功")
// window.location.href = 'http://www.baidu.com'
// }
// 2. location.reload
// location.reload() 这个方法会重新加载一遍页面，就相当于刷新是一个道理
// window.location.reload()
// 注意： 不要写在全局，不然浏览器就会一直处在刷新状态
// 浏览器的历史记录
// window 中有一个对象叫做 history
// 是专门用来存储历史记录信息的
// 1. history.back
// history.back 是用来会退历史记录的， 就是回到前一个页面， 就相当于浏览器上的⬅️ 按钮
// window.history.back()
// 前提是你要有上一条记录，不然就是一直在这个页面，也不会回退
// 2. history.forword
// history.forword 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮
// window.history.forward()
// 前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个
// 浏览器的 onload 事件
// 这个不在是对象了， 而是一个事件
// 是在页面所有资源加载完毕后执行的
// 例如：
// window.onload = function() {
// console.log('页面已经加载完毕')
// }
// 例如：
// . 在 html 页面中把 js 写在 head 里面
/*
<html>
<head>
<meta charset="UTF-8" />
<script>
// 这个代码执行的时候，body 还没有加载
// 这个时候我们就获取不到 body 中的那个 div
// 就需要使用 window.onload 事件
window.onload = function () {
// 这个函数会在页面加载完毕以后在执行
// 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
}
<script>
</head>
<body>
<div> </div>
<body>
<html>
*/
// 浏览器的 onscroll 事件 很重要！！
// 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发，或者鼠标滚轮滚动的时候出发
// window.onscroll = function() {
// console.log('浏览器滚动了')
// }
// 注意： 前提是页面的高度要超过浏览器的可是窗口才可以
// 浏览器滚动的距离
// 浏览器内的内容即然可以滚动， 那么我们就可以获取到浏览器滚动的距离
// 其实浏览器没有动， 只不过是页面向上走了
// 所以， 这个已经不能单纯的算是浏览器的内容了， 而是我们页面的内容
// 所以不是在用 window 对象了， 而是使用 document 对象
// scrollTop ！！重要
// 获取的是页面向上滚动的距离
// 一共有两个获取方式
// document.body.scrollTop
// document.documentElement.scrollTop
// 在实际用到的时候， 可以把这两个都写上
// 例如：
// window.onscroll = function() {
// console.log(document.body.scrollTop)
// console.log(document.documentElement.scrollTop)
// }
// 在用于实际时，可以先给html,body一个很高的高度，然后使用下列代码
// window.onscroll = function() {
// var top = parseInt(document.body.scrollTop ||
// document.documentElement.scrollTop)
// console.log(top);
// }
// scrollLeft
// 获取页面向左滚动的距离
// 也是两个方法
// document.body.scrollLeft
// document.documentElementLeft
// 实际运用的时候，也是两个都写，方法和scrollTop一样
// 定时器
// 间隔定时器
// setInterval(function() {
// console.log("我是间隔定时器")
// }, 1000)
// 炸弹定时器(只执行一次)
// setTimeout(function() {
// console.log("我是 炸弹定时器")
// }, 7000)
// 定时器里面的 this 指向 window
// setInterval(function() {
// console.log(this)
// }, 1000)
// setTimeout(function() {
// console.log(this)
// }, 1000)
//异步 我们遇到的第一个异步代码(我们目前遇到的只有定时器)
//我们以前的代码 都是从上往下 从左到右执行
//代码执行 先执行 除了定时器以外的代码
//遇到定时器的时候 把它放到一个 队列里去
//然后接下来 继续执行除了 定时器以外的代码
// 直到所有的代码(除了定时器)都执行完毕，再执行定时器的代码
// 例：
// console.log("script start")
// setInterval(function() {
// console.log("间隔定时器")
// }, 1000)
// console.log("script end")
// 定时器的返回值
// 例：
// var res1 = setInterval(function() {
// console.log("间隔定时器");
// }, 1000)
// var res2 = setTimeout(function() {
// console.log("炸弹定时器");
// 炸弹定时器只显示一次，炸完了就没了
// }, 1000)
// 清除定时器
// 根据上面的res1、 res2， 可以让他们停止
// id选择器.onclik = function() {
// 通过点击事件来停止定时器
// clearInterval(res1)
// }
// id选择器.onclik = function() {
// 通过点击事件来停止定时器
// clearTimeout(res1)
// }
// 点击一个x，就关闭弹窗，一秒后又弹出弹窗
// (点击关闭的id选择器)btn.onclick = function() {
// box.style.display = "none"
// setTimeout(function() {
// box.style.display = "block"
// }, 1000)
// }
// BOM =>window
// DOM =>Documentt Object Model => Document
// DOM主要时操作页面上面的元素
// 获取页面上的元素 -> 以后就不要直接使用id，用多了会出错
// 1、 document.getElementById() 通过id获取元素
// var box = document.getElementById("box") 这个box就是id选择器
// 2. document.getElementsByClassName() 通过className 获取元素
// 获取到的 不是一个数组， 而是伪数组 就算获取到的 只有一个元素， 也是
// 放在一个伪数组里面
// 伪数组不能使用 数组的方法
// var box2 = document.getElementsByClassName("box")
// console.log(box2);
//
// var arr=[1,2,3,4,5]
// var res=arr.map(function(item,index,arr){
// return item *1.3
// })
// console.log(res);
//
// var res1=boxs.map(function(item,index,arr){
// return item
// })
// console.log(res1);
// 3、 document.getElementsByTagName()
// 通过标签名获取元素(伪数组)
// var lis = document.getElementsByTagName("li")
// console.log(lis);
// 4、 document.querySelector()
// 通过 css 选择器获取元素， 只能拿到一个元素， 就是第一个
// 满足条件的元素
// var li = document.querySelector('.red')
// console.log(li);
// var li = document.querySelector('ul li:nth-child(3)')
// console.log(li);
// 5、 document.querySelectorAll()通过css选择器获取元素 多个返回值
// 也是一个伪数组
// var lis=document.querySelectorAll("ul.red")
// console.log(lis);
// var res=lis.map(function(item,index,arr){
// return item
// })
// lis.forEach(function(item){
// console.log(item);
// })
// console.log(res);
// 通过 document.querySeletorAll 获取到的伪数组 能够使用 数组的 forEach 方法
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
