---------------------------------------------------------------------
webapi
增删改查页面元素的函数
js
ECMAScript + BOM + DOM
ECMAScript定义了js的语法规范
基本语法 数据类型 是一套定义了js的标准
DOM
操作页面元素的api
把html看成文档数 通过DOM提供的api可以操作树上的节点
BOM
操作浏览器功能的api
可以操作浏览器窗口 比如：弹出框、浏览器跳转、获取分辨率
1.浏览器将硬盘上的文件读取到内存中
2.在内存中解析生成DOM树结构 js也可以修改dom树
3.DOM渲染到页面上
旧的获取dom元素方法
document.getElementById()
document.getElementsByTagName() 获取的是伪数组 里面都是一个个dom对象
document.getElementsByClassName() 获取的是伪数组 里面都是一个个dom对象
document.getElementsByName()根据属性name获取标签 获取的是伪数组 里面都是一个个dom对象
两个查询函数语法 HTML5新增的
document.querySelector('')
返回符合条件的第一个元素 返回的是dom对象 没找到就返回null
document.querySelectorAll()
返回符合条件的所有元素 伪数组里面全都是dom对象 没找到就返回长度为0的伪数组
元素内容操作 用于双标签元素
innerText
获取或者设置 元素文本
获取他里面的所有文本(包括后代标签的文本)
设置它的文本，会覆盖原来的内容
不会解析标签
innerHtml
获取或者设置 元素内容
获取里面的所有内容包括换行、文本、标签
设置它的文本，会覆盖原来的内容
会解析标签
元素属性操作
点语法 获取修改该元素自身拥有的属性
获取元素的属性
设置元素的属性
let a = document.querySelector('a')
console.log(a.href)
a.href = 'www.baidu.com'
style操作样式
连线的写法使用驼峰命名法不要写background-color可能识别不出来
let box = document.querySelector('.box')
console.log(box.style)//伪数组 本质是个对象
console.log(box.style.width)
console.log(box.style.backgroundColor)
设置
原来有的style属性就是覆盖 没有的就是添加
添加在行内
className操作样式
获取的是class字符串
设置
如果不+=的话会覆盖原来的class
box.className = 'box one'
box.className = 'two'
box.className = two'
box.className = 'box one'
box.className += 'two'
box.className = 'box one two'
classList操作样式
获取的是伪class数组
获取：元素.classList
添加：元素.classList.add()
移除：元素.classList.remove()
切换：元素.classList.toggle()
判断：元素.classList.contains()
元素.classList.add('one','two')可以追加多个类样式 且不会覆盖原来的样式
元素.classList.remove('one','two')可以删除多个类样式
元素.classList.toggle('three')元素有这个类就移除 没有就添加
如果class本来就 有 three类名就移除three
如果class本来 没有 three类名就添加three
元素.classList.contains('three')是否包含这个类 有就true 没有就false
表单元素常用属性 表单标签元素用value获取/设置元素内容
let select = document.querySelector('select')
select.value = 'option3'
如果匹配上了页面上第一个option就是value='option3'的
如果没匹配上页面上第一个option就是空的
disabled 禁用input输入 也可以加<button></button>等标签
checked 选中radio或者checkbox
selected 选中指定的option
事件注册
事件源： 谁
事件类型：做了什么
事件处理程序：要做什么
事件类型：
onclick
ondblclick
onmouseenter 鼠标移入 没有冒泡 onmouseover 有冒泡
onmouseleave 鼠标移出 没有冒泡 onmouseout 有冒泡
oninout(给textarea加上后可以监听textarea的变化)
事件要明白2个时机
1.一个是事件注册时机
2.一个是事件触发时机
---------------------------------------------------------------------
获得焦点
onfocus
失去焦点
onblur
排他思想
外层循环注册事件
事件里面干掉所有的然后给自己设置样式
classList排他
需要默认选中一个
选中激活的 干掉
激活自己
attribute语法操作自定义属性
点语法只能操作标签自带属性的值
不能操作自定义属性的值
获取自定义属性的值 和 标签自带属性的值
.getAttribute('')
原来有的属性就是修改 没有的属性就是添加
.setAttribute('','')
移除属性
.removeAttribute()
----------------------day03-----------------------------------------------
dom介绍
dom树：标签，属性，文本，注释....（这些东西我们都称为dom树的节点）
dom树节点：标签节点 属性节点 文本节点 注释节点....
理清楚他们之间的关系，从而用关系来获取元素
子节点
childNodes 会获取所有子节点：包括 文本 注释 换行（空文本节点）
children 会获取所有子元素节点
firstChild 获取第一个子节点：包括 文本 注释 换行（空文本节点）
firstElementChild 获取第一个子元素节点
lastChild 获取最后一个子节点：包括 文本 注释 换行（空文本节点）
lastElementChild 获取最后一个子元素节点
previousSibling 上一个节点
previousElementSibling 上一个元素节点
兄弟节点
nextSibling 下一个子节点
nextElementSibling 下一个元素节点
父节点
parentNode 父节点
新增节点
document.write('<h1>哈哈</h1>') 可能会覆盖原来页面的内容
innerHtml
document.createElement('p')创建的标签在内存中
插入节点
appendChild 追加元素尾部
document.querySelector('ul').insertBefore(a,b) 把a追加元素到ul中b元素前
替换节点
document.querySelector('ul').replaceChild(a,b) 把a替换ul中的b元素
删除节点
document.querySelector('ul').removeChild(document.querySelector('#li3')) 删除ul下的某个元素
或者
子元素.parentNode.removeChild(子元素)
cloneNode()
true 深克隆 会克隆元素并且会克隆元素的所有后代
false 浅克隆 只会克隆元素自己，不会克隆元素的后代
默认是false
克隆后的元素存在于内存中 需要追加到页面才会显示
直接打印 date 相当于 调用new Date().toString()
new Date().toString()
new Date().toLocalString 日期+时间
new Date().toLocalDateString 日期
new Date().toLocalTimeString 时间
获取一个时间戳
let date = +new Date()
let date = Date().now()
日期对象
getFullYear() 年
getMonth() 月
getDate() 日期
getDay() 周几
计时器setInterval
返回的是ID 从1开始
clearInterval 清空计时器
定时器setTimeout
clearTimeout 清空定时器
如果数字字符串前面加了个加号,这个数值就变成了number类型
---------------------------------------------------------------------
注册事件
on+事件名 缺点：无法注册同名事件，即后注册的事件会覆盖先注册的事件
.addEventListener('click',fn,false) 事件名，回调函数，true支持捕获 false支持冒泡 默认false
可以注册同名事件
移除事件
用on+事件名 = null的方式移除事件
.removeEventListener('click',test,false) 事件名，回调函数 注意：移除的时候fn必须是同一个函数且是外部函数例如test()才可以, 注意: 如果添加两次事件句柄，一次在捕获阶段，一次在冒泡阶段，你必须单独移除该事件。
fn就是fn 不可以add的时候是fn1 remove的时候是fn2 这样做是无效的
事件对象
获取触发事件的一些信息 如鼠标坐标、键盘按下了什么按键等
e.pageX 鼠标到页面最左边的距离 e.pageY 鼠标到页面最上边边的距离
e = e || window.event 兼容IE的写法
a标签有默认跳转事件
form表单有默认提交事件
e.preventDefault() 阻止默认事件
href = 'javascript:void(0)'
键盘事件
与 onkeypress 事件的关联的事件执行顺序:
onkeydown
onkeypress
onkeyup
onkeypress 不可以获取特殊按键 弃用了
onkeydowm 键盘按下 键盘按下会一直触发 可以获取特殊按键 Ctrl Enter这些 e.keycode 弃用了
onkeyup 键盘弹起 键盘按下不会触发 弹起才会触发
事件冒泡
给html添加事件
document.documentElement.addEventListener()
addEventListener 和 on+事件名 注册事件 都有事件冒泡
事件流的三个阶段
e.eventPhase
捕获阶段 e.eventPhase 为1
目标阶段 e.eventPhase 为2
冒泡阶段 e.eventPhase 为3
阻止事件冒泡
e.stopPropagation() 添加了这个方法的事件还是会触发 之后的不会触发
选中单词 vscode的小技巧
Ctrl+Shift+ 方向键右键
---------------------------------------------------------------------
window对象
es5以前是js的顶级对象
声明的全局属性/方法 都可以看成是window的属性/方法
window.xx可以省略window 直接写xx
window有个name属性 是string类型的 即使你修改为其他类型 也会被修改为string类型
var name = {}
console.log(typeof name);//'string'
var top = 18;
console.log(top);//window
window.top 是无法修改的属性 top指向的就是window
window.open() 开启一个新窗口
window.close() 关闭一个新窗口
可以用参数接收
let w1 = null
w1=window.open()
w1.close()
onload：onload只能执行一次，如果有多个，那么第一次的执行会被覆盖。
onload() 页面上所有的资源（dom树、外链js、css、图片、字体图标...）都加载完毕后才执行
onbeforeunload() 页面关闭之前执行
页面从上向下执行
js写在上面(head)就先执行js 写在下面(body)就后执行
location
href 设置或获取完整的url
search ？及之后的部分（查询部分）
hash #及之后的部分（锚）
location.assign() 加载新的文档 有back（回退）
location.replace() 替换当前文档 无back（回退）
location.reload() 重新加载/刷新
history
history.back()
history.forward()
history.go()
navigator
navigator.userAgent 浏览器用户头部信息，可以用来判断他打开当前页面的是什么浏览器
screen
availHeight 显示屏的高 除了任务栏以外的高度
availWidth 显示屏的宽 除了任务栏以外的宽度
width 显示屏的宽
height 显示屏的高
存储对象localStorage与sessionStorage
localStorage本地永久存储
localStorage只存字符串类型数据 就算存了其他格式 取得时候还是字符串
永久存储（存到了硬盘中） 除非硬盘坏了 或者手动删除了 不然一直都在
存在硬盘中
localStorage.setItem('','')
localStorage.getItem('','')
localStorage.removeItem('')
localStorage.clear() 清空所有
存在内存中，临时的 ，关闭页面就会消失
sessionStorage只存字符串类型数据 就算存了其他格式 取得时候还是字符串
sessionStorage.setItem('','')
sessionStorage.getItem('','')
sessionStorage.removeItem('')
sessionStorage.clear() 清空所有
同一文件夹下的不同页面是共用sessionStorage的
JSON
JSON.parse()
JSON.stringify()
三大家族
宽高的获取 会受电脑缩放与布局的影响
offset
offsetLeft 距离自己 offsetParent(最近的 有定位的 父元素) 的左内边框的距离
offsetRight 距离自己 offsetParent(最近的 有定位的 父元素) 的右内边框的距离
offsetWidth/offsetHeight content+padding+boder
offsetParent 距离自己 最近的 有定位的 父元素
如果元素自己有固定定位，那这个元素的offsetParent是null
如果元素自己没有固定定位，父元素也没有定位，那offsetParent是body
如果元素自己没有固定定位，父元素有定位，那offsetParent是距离自己 最近的 有定位（不为static）的 父元素
body的offsetParent是null
scroll
scrollWidth 没有滚动条的情况下 内容总宽度
scrollHeight 没有滚动条的情况下 内容总高度
scrollLeft 被隐藏在内容区域左侧的像素
scrollTop 被隐藏在内容区域上侧的像素
页面滚出距离 document.documentElement.scrollTop
scrollHeight = scrollTop + 可视区高度 - border
client
clientLeft = border-left（左边框） clientTop = border-top（上边框）
clientWidth clientHeight 元素可视区 应用：获取html可视区（document.documentElement.clientWidth）
pc端 >1200
大平板 992-1200
ipad 768-992
移动端 <768
---------------------------------------------------------------------
正则表达式 Regular Expression 简写为 regex regexp RE
检索、替换符合某个模式（规则）的文本
数据类型 RegExp
正则对象.test(要检测的文本)
返回值：boolean
作用：检测的文本符合正则规则就true，否则false
创建方法
使用构造函数 new RegExp('<.{4,5}>')
字面量 /.{4,5}/
预定义类
换行\n (newline) 回车\r (return)
. 表示除了换行和回车之外的任意字符 空格也算（“ ”） 空字符串不算（“”）true 否则false
^ 取反
\d 包含数字字符 true 否则false
\D 包含非数字字符 true 否则false
\s 包含不可见字符（\f\r\n\t\v）\f换页 \t横向制表符 \v纵向制表符 包括空格 不包括空字符串 true 否则false
\S 包含可见字符 true 否则false
\w 包含所有字母和数字包括_ true 否则false
\W 包含非所有字母和数字 true 否则false
自定义类
/dog/.test('dog') true
/dog/.test('do g') false
或 和 ()
/男|女/.test('男女') true
/男|女/.test('女') true
/男|女/.test('女') true
/he(i|m)a/.test('') 匹配heia 或者 hema
/a b/.test('a b') true 正则里面可以写空格
简单类 [] 只代表一个字符，这个字符在[]中的任何一个就行
/abc/.test('a') t
/abc/.test('b') t
/abc/.test('c') t
/y[abc]z/.test('') yaz ybz ycz
范围类
描述数字
[0123456789]
[0-9]
描述字母
[ABCDEFGHIJKLMNOPQRSTUVWXYZ]
[A-Z]
[abcdefghijklmnopqrstuvwxyz]
[a-z]
负向类
[^ ] 写在简单类中的 是取反
边界
/^/写在正则中的是 以...开头
/\d/ 包含数字
/^\d/ 以数字开头
/^6a/ 以6a开头
/$/ 以..结尾
/ac$/ 以ac结尾
严格匹配
/^ $/ 严格匹配只能出现一次 不能有别的东西
/^abc\d$/.test('abc2') t
/^abc\d$/.test('aab22') f
量词1
* 0次或多次 {0,}
+ 1次或多次 {1,}
? 0次或一次 {0,1}
*前面一个字符，不加()的时候
/^colo*r$/.test('colr') t
/^colo*r$/.test('color') t
/^colo*r$/.test('coloor') t
量词2
{n} x=n
{n,} 重复n次或更多次 >=n
{n,m} 重复次数>=n && 重复次数<=m
验证汉字
汉字在js中都有一个对应的Unicode编码
万国码utf-8 utf-16 utf-32
汉字的Unicode编码
escape('一') %u4E00
Unicode编码转为汉字
unescape('%u4E00') 一
常用的汉字都在这个范围中：%u4e00-%u9fa5 \u4e00-\u9fa5 20902个字
/[\u4e00-\u9fa5]/.test('asdasd') F
/[\u4e00-\u9fa5]/.test('as国dasd') T
基本汉字补充 90个字 9FA6-9FFF
参数
i 忽略大小写
g 全局匹配 global
gi 全局匹配+忽略大小写
replace() 替换
match() 查找 找到一个或者多个正则表达式的匹配 符合正则规则返回的是数组 否则返回null
需求：找到第一次出现价格的下标
str = 'aa100bb200cc300dd400'
res = str.search(/\d+/)
indexOf 从前往后 找到就返回下标 没有就-1
lastIndexOf 从后往前 找到就返回下标 没有就-1
1405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
