第一天 DOM-获取元素
1. API的作用和分类
1.2 DOM的作用:开发网页内容特效和实现用户交互(操作网页内容)
2. 根据CSS选择器来获取DOM元素
querySelector()小括号里面必须是字符串,也是必须加引号
3. 操作元素内容
4.1 操作元素常用属性
4.2操作元素样式属性
通过style属性操作CSS
对象.style.样式属性 = 值 值为字符串
生成的是行内样式表,权重比较高
通过操作类名className操作CSS
直接使用className赋值会覆盖以前的类名
通过classList操作类控制CSS
4.3操作表单元素属性![](https://i-blog.csdnimg.cn/blog_migrate/2ab8d9e84c53eb9664cd9d463f6a3668.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7fd8be51198dad90d91baddbca563bf3.png)
input.checked = true //选中复选框
button.disabled = true //禁用按钮
4.4自定义属性![](https://i-blog.csdnimg.cn/blog_migrate/bdf8e1c9af60cc51b663d32aa72a6d55.png)
5. 定时器-间歇函数![](https://i-blog.csdnimg.cn/blog_migrate/b89a883128b0259fe3f757cc5ebc7349.png)
开启定时器 setInterval(函数名,间隔时间) 一秒 = 1000毫秒
关闭定时器 clearInterval(变量名)
第二天 DOM-事件基础
1. 事件监听
2. 事件类型
3. 事件对象
str.trim() 去除字符串左右的空格
4. 环境对象![](https://i-blog.csdnimg.cn/blog_migrate/59c51bf56d90a58e3de43bcbd0a3c7ea.png)
5. 回调函数
CSS
复选框伪类选择器
第三天 DOM-事件进阶
1. 事件流![](https://i-blog.csdnimg.cn/blog_migrate/e40bca1ac20321edce50d12835bb565f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9d4256dcb8ed965623903c8a26757f9d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1b52b36b554b5d26c26b55918b76b041.png)
![](https://i-blog.csdnimg.cn/blog_migrate/19e63ca262b6cddec43727ced525185e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/837e614ec1d792a90d6f6a85ada4105a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/aa0352464f79fa54534fad56efc976cd.png)
2. 事件委托![](https://i-blog.csdnimg.cn/blog_migrate/3c4451e1d5bba70b32f6b0ae3d9d3432.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f4fc82da25c3ac19461889baf8271d83.png)
3. 其他事件
3.1 页面加载事件![](https://i-blog.csdnimg.cn/blog_migrate/0d31972360bc278b2f0486ec2eea3803.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7d791c8949200216f402803dbd6533fe.png)
3.2 元素滚动事件![](https://i-blog.csdnimg.cn/blog_migrate/ab0ca96b4dabdc3352d9dd3e464f0b36.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a491523aa123eb928c014a6adb3f945a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f40fcb406ac01b04e2855b2d0133adb4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/43574089e84eb1bae400ad21ad85d541.png)
3.3 页面尺寸事件 ![](https://i-blog.csdnimg.cn/blog_migrate/088ac5b7be87dd5315dc28f3dfb3987f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/32f5fb9efd3178af7dcf6105844987bf.png)
4. 元素尺寸与位置![](https://i-blog.csdnimg.cn/blog_migrate/4a221397ba07c5adc96975fd6f60331b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/827e5e82ddbaae41ac1669853df1de61.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f97e422c15c174e9d1a637e985ce4c02.png)
第四天 DOM-节点操作
1. 日期对象
getDay( ) 中获取的 0 为星期日
2. 节点操作
2.1 DOM节点![](https://i-blog.csdnimg.cn/blog_migrate/5fe2153de357893bd3138180675b48e9.png)
2.2 查找节点
2.3 增加节点 ![](https://i-blog.csdnimg.cn/blog_migrate/f2a8dfc40f9b6a3aa68db5af3dd75dea.png)
![](https://i-blog.csdnimg.cn/blog_migrate/28997e2712ac7c411060535b51d63c0a.png)
2.4 删除节点 ![](https://i-blog.csdnimg.cn/blog_migrate/f799a23188f09d7fc35e826114d99eec.png)
3. M端事件(移动端)![](https://i-blog.csdnimg.cn/blog_migrate/7ed6cf46bfe75cfeebed06acc55540fe.png)
4. JS插件![](https://i-blog.csdnimg.cn/blog_migrate/d48b7aec2b30fcc85140073623c95fa2.png)
第五天 BOM-操作浏览器
1. Window对象
1.1 BOM浏览器对象模型![](https://i-blog.csdnimg.cn/blog_migrate/a2b2323a917a04f74f8ede3aa4adfd2f.png)
1.2 定时器-延时函数![](https://i-blog.csdnimg.cn/blog_migrate/31d3c6ec4b6ef14567e4a59629ecce55.png)
1.3 JS执行机制![](https://i-blog.csdnimg.cn/blog_migrate/c6f7781e7f0f1a99ba444519d1b44056.png)
1.4 location对象![](https://i-blog.csdnimg.cn/blog_migrate/ea99f9156c9d4cee1aee7d88189541bf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/52fdf2391cc5c30e1adf04d2b901b34a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a9cc2cc1bf0385c5121afcb957c08747.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a9de1458490ed17e9dddd5c2e8151be3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f2690b2ef997a39060040f28f69c5952.png)
1.5 navigator对象 ![](https://i-blog.csdnimg.cn/blog_migrate/a660ecd94a9dcc9b8e4cb8e5df82aa5b.png)
1.6 history对象![](https://i-blog.csdnimg.cn/blog_migrate/ec6214fc190de962c0d9c910b0ca4561.png)
2. 本地存储![](https://i-blog.csdnimg.cn/blog_migrate/2d7179208473dd04c27503fb4b99a5ea.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a8ae821aec87a43e7a1e2b7f43eed295.png)
里面所有键和值都需要加引号
本地存储只能存储字符串数据类型
本地只能存储字符串,无法存储复杂数据类型
第六天 正则表达式
1. 正则表达式介绍![](https://i-blog.csdnimg.cn/blog_migrate/08833a7378e0f7610a373bf6feaa3115.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a9edeb75038518d50b09cfada3af3824.png)
![](https://i-blog.csdnimg.cn/blog_migrate/149cba537146ae047002840e56174bbd.png)
2. 正则表达式语法
第一步:定义正则表达式
第二步:检测查找是否匹配
3. 元字符![](https://i-blog.csdnimg.cn/blog_migrate/b395241859a2623ed41cc117d1320118.png)
![](https://i-blog.csdnimg.cn/blog_migrate/919b95b52d4976ee039a7803729100f3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/02ae6811871313bce8b9768ee5ee2cbf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2acc56ce4823134b0044b3b323c436a7.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3a4460cf8d332ccb3a344ce8c864e60f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e7d6f70ae2ad5363a96cb915dbbe08c1.png)
/^[a-c]$/ 是n选一
4. 修饰符![](https://i-blog.csdnimg.cn/blog_migrate/b4c51640c0d6a327de8967f00f0ff7c3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0d1e1d09671bb7d60262e3f5d5ad7ba0.png)
change事件:内容发生变化