目录
创建节点
-
创建元素节点
document.createElement('你要创建的标签名')
// 返回一个元素节点-
创建文本节点
document.createTextNode('文本内容')
// 返回一个文本节点，不是字符串插入节点
-
appendChild()
父节点.appendChild(子节点)
// 把该子节点插入到父节点内容，并且排列在最后的位置-
insertBefore()
父节点.insertBefore(子节点, 谁的前面)
// 把该节点插入到父节点内部，并且排列在哪一个节点的前面删除节点
-
removeChild()
var div = document.querySelector('div')
var p = document.querySelectorAll('p')
div.removeChild(p[1])-
remove()
var div = document.querySelector('div')
var p = document.querySelectorAll('p')
p[0].remove()替换节点
-
replaceChild()
父节点.replaceChild(换上节点，换下节点)
var div = document.querySelector('div')
var p = document.querySelectorAll('p')
var x = document.createElement('div')
div.replaceChild(x, p[0])克隆节点
-
cloneNode()
节点.cloneNode(参数)
var div = document.querySelector('div')
var clonediv1 = div.cloneNode()
var clonediv2 = div.cloneNode(true)
console.log(clonediv1)
console.log(clonediv2)
// 参数默认为 false，不克隆后代节点，为 true 时克隆后代节点节点属性
-
nodeType
元素节点.nodeType: 1
属性节点.nodeType: 2
文本节点.nodeType: 3
注释节点.nodeType: 8-
nodeName
元素节点.nodeName: 大写标签名
属性节点.nodeName: 属性名
文本节点.nodeName: #text
注释节点.nodeName: #comment-
nodeValue
元素节点.nodeValue: null
属性节点.nodeValue: 属性值
文本节点.nodeValue: 文本内容（换行和空格）
注释节点.nodeValue: 注释内容（换行和空格）事件
使用代码的方式和一个内容约定好一个行为，当触发该行为的时候，会有对应的代码执行；
- 事件三要素
- 事件源：和谁约定事件（和谁触发不一样）
- 事件类型：约定一个什么事件
- 事件处理函数：当行为发生的时候，需要执行的函数
事件绑定
-
DOM 0级事件
语法：事件源.on事件类型 = 事件处理函数
div.onclick = function () {
console.log('我被点击了')
}
// 只能绑定一个事件-
DOM 2级事件
语法：时间源.addEventListener('事件类型', 事件处理函数）
div.addEventListener('click', function () {
console.log('我被点击了')
})
// 可以绑定多个事件，顺序绑定，顺序执行事件解绑
-
DOM 0级事件
语法：事件源.on事件类型 = null
// 事件绑定
div.onclick = function () {
console.log('点击事件')
}
// 事件解绑
btn.onclick = function () {
div.onclick = null
}-
DOM 2级事件
语法：事件源.removeEventListener('事件类型', 事件处理函数）
function a() {
console.log('事件处理函数')
}
// 事件绑定
div.addEventListener('click', a)
// 事件解绑
div.removeEventListener('click', a)
// 因为是复杂数据类型，需要把函数单独写出来，以函数名的形式进行绑定和解绑事件类型
JS 的原生事件没有大写字母；
- 事件类型分类
- 鼠标事件
- 键盘事件
- 浏览器事件
- 表单事件
- 触摸事件
- 其他事件
-
鼠标事件
// 1. click: 鼠标左键单击
div.onclick = function () {}
// 2. dbclick: 鼠标左键双击
div.ondbclick = function () {}
// 3. contextmenu: 鼠标右键单击
div.oncontextmenu = function () {}
// 4. mousedown: 鼠标按下（任何一个按键按下）
div.onmousedown = function () {}
// 5. mouseup: 鼠标抬起
div.onmouseup = function () {}
// 6. mousemove: 鼠标移动（16ms捕捉一次）
div.onmousemove = function () {}
// 7. mouseover: 鼠标移入（子元素继承事件）
div.onmouseover = function () {}
// 8. mouseout: 鼠标移出（子元素继承事件）
div.onmouseout = function () {}
// 9. mouseenter: 鼠标移入（子元素不继承事件）
// 10. mouseleave: 鼠标移出（子元素不继承事件）
-
键盘事件
// 1. keydown: 键盘按下事件
inp.onkeydown = function () {}
// 2. keyup: 键盘抬起事件
inp.onkeyup = function () {}
// 3. keypress: 键盘键入事件,真实键入内容触发
inp.onkeypress = function () {}-
表单事件
// 1. focus: 聚焦事件
inp.onfocus = function () {}
// 2. blur: 失焦事件
inp.onblur = function () {}
// 3. change: 改变事件（聚焦和失焦内容不一致才会触发）
inp.onchange = function () {}
// 4. input: 输入事件（只要表单输入内容或删除内容，就会实时触发）
inp.oninput = function () {}
// 5. reset: 重置事件（事件需要绑定给 form 标签，由 form 标签内的 reset 按钮触发）
form.onreset = function () {}
// 6. submit: 提交事件（事件需要绑定给 form 标签，由 form 标签内的 submit 按钮触发）
form.onsubmit = function () {}-
触摸事件
// 1. touchstart: 触摸开始事件
div.ontouchstart = function () {}
// 2. touchmove: 触摸移动事件
div.ontouchmove = function () {}
// 3. touchend: 触摸结束事件
div.ontouchend = function () {}事件对象
是一个对象数据类型，记录本次事件触发的所有信息的对象数据类型；
-
事件对象信息-鼠标事件
1. clientX 和 clientY
// 光标相对于浏览器可视窗口左上角的坐标位置
2. pageX 和 pageY
// 光标相对于文档流左上角的坐标位置
3. offsetX 和 offsetY
// 光标相对与触发事件的元素左上角的坐标位置-
事件对象信息-键盘事件
// 每个键与事件对象内信息 keyCode 对应
// 组合按键：属性值为布尔值，true 表示按下，false 表示没有按下
altKey, shiftKey, ctrlKey, metaKey事件传播
当一个事件在浏览器中触发的时候，不光在自己元素身上触发，是会传播出去的，传播的只是事件行为；所有的浏览器默认在向上传递的过程中触发事件；
- 事件的三个阶段
- 捕获阶段：从 window 向目标传递的过程
- 目标阶段：事件发生在目标身上
- 冒泡阶段：从目标向 window 传递的过程
-
获取事件目标
// 在事件对象内有一个固定的信息表示本次事件的事件目标
// 标准浏览器：事件对象.target
// IE 低版本：事件对象.srcElement
// 兼容：
var target = e.target || e.srcElement-
捕获&冒泡阶段执行事件
// 通过 addEventListener() 第三个参数来决定
// 默认是 false，表示冒泡阶段
// 选填是 true，表示捕获阶段
p.addEventListener('click', function () {
console.log('p')
}, true)-
阻止事件传播
// 标准浏览器
事件对象.stopPropagation()
// IE 低版本
e.cancleBubble = true
// 兼容；首先执行 try 里面的代码，如果报错，报错信息传递给 err 参数，然后执行 catch 里面的代码
try {
e.stopPropagation()
console.log('尝试执行的代码')
} catch (err) {
e.cancleBubble = true
console.log('报错后执行的代码')
console.log(err)
}-
默认事件
// a 标签的点击行为
// form 标签的提交行为
// 标准浏览器
事件对象.preventDefault()
a.onclick = function (e) {
e = e || window.event
e.preventDefault()
}
// IE 低版本
事件对象.returnValue = false
a.onclick = function () {
e = e || window.event
e.returnValue = false
}正则表达式
JS 中数据类型，是一个复杂数据类型，用来验证字符串是否符合规则；
创建正则表达式
-
字面量方式创建
var reg = /abcd/
// 验证一段字符串，必须包含 abcd 这个字符片段
-
内置构造函数创建
var reg = new RegExp('abcd')-
两种创建函数的区别
1. 书写标识符
// => 字面量，直接书写在后面
// => 内置构造函数，以第二个参数传递
2. 拼接字符串
// => 字面量，不接受拼接字符串
// => 内置构造函数，可以拼接字符串
3. 基本元字符书写
// => 字面量，直接书写 \s\d\w
// => 内置构造函数，需要书写 \\s\\d\\w正则表达式的常用方法
-
test()
语法: 正则表达式.test('要检测的字符串')
// 返回值：布尔值，符合规则为 true，不符合为 false-
exec()
语法：正则.exec(字符串)
作用：从字符串中把满足正则条件的部分获取出来
返回值：没有符合的为null，有符合的返回一个数组
// 数组内容
1. 没有（）没有 全局标识符 g
// => 索引 0 为满足条件的第一个内容
// => 不管捕获多少次都是从原始字符串的索引 0 开始检索
2. 有全局表示符 g
// => 索引 0 为满足条件的第一个内容
// => 第二次捕获是从第一次结束的位置开始向后查询
3. 有（）
// => 索引 0 为满足条件的第一个内容
// => 从索引 1 开始，依次是每个（）的单独内容
// => （）开始的开始的标志来数为第几个（）正则表达式的符号
-
基本元字符
1. \d 表示一位数字
// 字符串中至少包含一位数字（0-9）
2. \D 表示一位非数字
// 字符串中至少包含一位非数字内容
3. \s 表示一位空白内容
// 字符串中至少包含一位空白内容
4. \S 表示一位非空白内容
// 字符串中至少包含一位非空白内容
5. \w 表示一位数字（0-9）字母（a-z A-Z）下划线（_）中的任意一个
// 字符串中包含任意一个内容
6. \W 表示非数字、字母、下划线
// 字符串中包含非数字、字母、下划线
7. . 表示一个非换行内容
// 字符串中至少有一个非换行内容
8. \ 表示转义符
// 把有意义的符号转换成没有意义的普通文本
// 把没有意义的文本转换成有意义的符号-
边界符号
1. ^
// 表示字符串开始
2. $
// 表示字符串结尾-
限定符
1. *
// 表示出现 0 ~ 多次
2. +
// 表示出现 1 ~ 多次
3. ？
// 表示出现 0 ~ 1次
4. {n}
// 表示出现 n 次
5. {n,}
// 表示至少出现至少 n 次
6. {n, m}
// 表示出现 n ~ m 次-
特殊符号
1. ()
// 01.一个整体
// 02.单独捕获
// 不想单独捕获，只用来一个整体，匹配但不捕获，使用 (?:)
// 按（）开始的标志来数是第几个（）
2. |
// 或者的意思，二选一
3. []
// 包含的意思，可以写多个，只占一个字符，表示其中的任意一个
4. [^]
// 表示非，可以写多个，只占一个字符，表示其中的任意一个都不行
5. -
// 到 至，[0-9]表示[0123456789]，需要和 [] 或者 [^] 连用，且 ASCII 编码连着-
标识符
// 书写在正则表达式的外面，专门用来修饰整个正则表达式的符号
1. i （ignore）
// 表示忽略大小写不计
2. g （global）
// 全局，使得第二次捕获从第一次结束的位置开始
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
