const
有了变量先给const,如果发现它后面是要被修改的,再改为let
因为对象是引用类型,里面存储的是地址,只要地址不变,就不会报错
建议数组和对象使用const来声明
如果基本数据类型的值或者引用类型的地址发生变化的时候,需要用let
比如,一个变量进行加减运算,比如for循环中的i++
DOM和BOM
DOM是文档对象模型
操作网页内容,可以开发网页内容特效和实现用户交互
将HTML文档以树状结构直观的表现出来,我们称之为文档树或者DOM树
作用:文档树直观的体现了标签与标签之间的关系
浏览器根据html标签生成的JS对象(DOM对象)
DOM的核心就是把内容当对象来处理
是DOM里面提供的一个对象
网页所有内容都在document里面
querySelector()
可以直接操作修改
querySelectorAll()
不可以,只能通过遍历的方式依次给里面的元素做修改
querySelectorAll()
querySelector()
querySelector()只能选择一个元素,可以直接操作
querySelectorAll()可以选择多个元素,得到的是为数组,要遍历得到每一个元素
里面写css选择器
必须是字符串,也就是必须加引号
元素.innerText属性
元素.innerHTML属性
元素.innerText属性,只识别文本,不能解析标签
元素.innerHTML属性 能够识别文本,能够解析标签
如果还在纠结到底用谁,可以选择innerHTML
style
element.style.paddingLeft=‘300px’
小驼峰命名法
不要忘记加单位
可以同时修改多个样式
直接使用className赋值会覆盖以前的类名
前者修改大量样式的更方便
后者修改不多样式的时候方便
classList是追加和删除不影响以前类名
可以根据时间自动重复执行某些代码
setInterval(函数名,时间)
let 变量名=setInterval(函数,间隔时间)
clearInterval(变量名)
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为注册事件
事件源(谁被触发了)
事件类型(用什么方式触发,点击还是鼠标经过)
事件处理程序(要做什么事情)
也是个对象,这个对象里有事件触发时的相关信息
在事件绑定的回调函数的第一个参数就是事件对象
它代表着当前函数运行时所处的环境
谁调用,this就是谁
把函数当作另外一个函数的参数传递,这个函数就是回调函数
回调函数本质还是函数,只不过把它当成参数使用
使用匿名函数作为回调函数比较常见
事件对象.stopPropagation()
e.preventDefault()
减少注册次数,提高了程序性能
父元素
事件对象.target.tagName
load事件,监听整个页面资源给window添加
DOMContentLoaded,给document添加,无需等待样式表、图像等完全加载
scrollTop/scrollLeft
可以读取,也可以修改
document.documentElement.scrollTop
内容+padding+border
带有定位的父级
如果都没有则以 文档左上角 为准
new Date()
月份是0~11 星期是0 ~6
date.getTime()
Date.now()
+new Date()
重点记住+new Date()因为可以返回当前时间戳或者指定的时间戳
DOM树里面每一个内容都称之为结点
元素节点 比如div标签
属性节点 比如class属性
文本节点 比如标签里面的文字
元素节点
可以更好地让我们理清标签元素之间的关系
parentNode
children
nextElementSibling
previousElementSibling
可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也存在
存储:localStorage.setItem(key,value)
获取:localStorage.getItem(key)
删除:localstorage.removeItem(key)
是用于匹配字符串中字符组合的模式
表单验证(匹配)
过滤敏感词(替换)
字符串中提取我们想要的部分(提取)
定义正则表达式
检测查找是否匹配
test方法用于判断是否有符合规则的字符串,返回的是布尔值,找到返回true,否则返回false
exec方法用于检索(查找)符合规则的字符串,找到返回数组,否则为null
是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能
比如英文26个字母,我们使用元字符a-z简洁和灵活
+表示重复至少1次
?表示重复0次或者1次
*表示重复0次或多次
{m,n}表示重复m到n次
匹配除了换行符之外的任何单个字符
匹配除了[]里面的任何单个字符