这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战
☆☆☆ 温故而知新! 今天学习巩固的js内容(BOM浏览器对象模型) !加油! ☆☆☆
可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新,
用自己的理解, 简单又全面概括基础知识点, 大部分内容为白话文内容, 基础中的基础 方便加深理解!
巩固学习 JavaScript 基础知识, 加深理解记忆, 打牢地基才能筑高楼! 加油
如需更详细了解学习- 推荐查看 MDN-JavaScript 文档, (红宝书/白皮书/
蓝皮书/..)进行学习进阶!
开始今天的学习吧! 认真对待!!
1、梳理昨天学习知识点
-
数组 Array
- 数组的操作方法 ：
- 数组去重
- 数组排序: 1. 冒泡 2. 选择
- 数组新增功能 : forEach indexOf map filter reduce
-
string ：
操作方法 ：
- charAt
- charCodeAt
- String.fromCharCode
- indexOf lastIndexOf
- substr(start,length) sunstring(start,end)
- replace
- 字符串.split
- 数组.join
- trim()
- toLowerCase toUpperCase
-
Math
- random()
- Math.ceil()
- Math.floor() Math.round()
function rand(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
-
Date
-
var d1 = new Date();
-
var d2 = new Date("2018-09-08");
-
时间差 : ( d1.getTime()-d2.getTime() ) / 1000
-
时间设置 ：
d1.setDate( d.getDate() + 3 );
-
2、BOM 浏览器对象模型 Browser Object Model
window 对象
2.1 window 对象的方法 ：
window 对象的所有属性和方法 调用时 都可以省略 window.
所有的全局变量都是 window 对象的属性
所有的全局函数都是 window 对象的方法
2.2 三个弹出对话框：
confirm()弹出一个确认框 点击确定 返回 true 点击取消返回 falsealert()弹出一个警告框prompt()弹出一个输入框
2.3 两个定时器 ：
setInterval( 要执行的任务，间隔时间 ) 连续执行 clearInterval()
-
用法一 ：
setInterval(function(){},间隔时间)
-
用法二 ：
setInterval( 函数名 , 间隔时间 ) function 函数名(){ }
-
用法三 :
setInterval( "函数名()" , 间隔时间 )
setTimeout( 要执行的任务 ，间隔时间 ); 延时性定时器 只执行一次 自动停止
clearTimeout() 用法同 setInterval()
-
定时器特点：
定时器后面的代码先执行 定时器内部的代码后执行 （这种现象叫做 异步）
var num = 10
setTimeout(function () {
alert(num)
undefined
var num = 20
alert(num)
20
}, 1000)
alert(num)
10
2.4 一个弹出窗口 ：
open("url","_blank","窗口外观")方法 返回的是弹出的窗口对象
外观 ： "width=200; height=200;left=30;top=90"
open() 方法弹出的窗口，子窗口和主窗口之间可以互相操作（扩展）
close() 关闭窗口
window.opener 属性 获取父窗口对象
3、文档对象 document window.document
要做事 先找人 （找对象）
查找页面元素 ：
document.getElementById() 查找的元素具有唯一性
querySelector( css 选择器 ) 兼容问题
-
getElementsByTagName("标签名") 标签名
查找的元素是一个集合（伪数组） 使用时必须加 下标 下标从
0开始， 找到一个元素 也要加下标[0] -
getElementsByClassName() 类名 兼容问题 “hh”
-
getElementsByName() 通过 name 值 "qx"
-
querySelectorAll(css 选择器) 兼容问题 ".hh""#hh""h1"
-
document.body 查找 body
-
document.title 查找 title
-
document.head 查找 head
-
document.documentElement 查找文档根节点 相当于 html （没有 document.html）
4、js 如何操作页面元素
4.1 操作样式：
使用方法:
obj.style.样式 = 值
obj.style.cssText = 'width:200px;height:200px;background-color:red'
obj.className = '类名'
4.2 操作属性：
obj.属性 = 值
4.3 操作内容:
标签 ：
- innerHTML 可以解析 html 标签
- innerText
- outerHTML 操作对象本身（破坏了页面结构） 表单 ： value
5、location 对象 地址对象
5.1 页面跳转 ：
location = "url"
location.href = "url" 设置页面跳转 获取页面地址栏信息 ： location.href
location.assign("url")
location.replace("url") 替换了当前页面内容（无法实现后退）
5.2 页面刷新:
location.reload()
6、history 历史记录对象（了解）
前进 ： history.go(1) 或 history.forward()
后退 ： history.go(-1) 或 history.back()
刷新 : history.go(0)
更多阅读:
前文更新回顾
【重学 JS】每天学习巩固基础:
预告: 加油, 追梦人
学习就是一个不断进行的过程, 坚持下去, 定有收获!
日积月累, 巩固基础, 早进大厂!
坚持很不容易, 坚持下来更不容易, 你真棒!
Calm Down & Carry On!
