一.dom节点
dom数里面每一个内容都称为节点
分类:元素节点,属性节点,文本节点
1.1父节点
父节点:
子元素.parentNode(从孩子元素去想上一层找到他的父亲,可以无限套娃)
⚠️注意:先获取子元素
1.2子节点
-
1.2.1childNodes
获得所有子节点,包括文本节点(空格、换行)注释节点
⚠️注意:先获取父元素
-
1.2.2children属性
扫描二维码关注公众号,回复: 15179739 查看本文章
从父亲元素.children[索引值]来获得当前父亲元素立面的所有子元素
const ul = document.querySelector('ul')
console.log(ul.children)
const li2 = document.querySelector('li:nth-child(2)')
console.log(li2)
console.log(li2.nextElementSibling)
console.log(li2.previousElementSibling)
-
1.2.3兄弟节点
1.下一个兄弟节点:nextElementSibling
2.上一个兄弟节点:previousElementSibling
1.3创建节点
const div = document.createElement('div')
追加节点(要先获取到父级元素再追加)
//获取到ul元素
const ul = document.querySelector('ul')
ul.appendChild(li)//在尾部追加
ul.insertBefore(li,ul.children[0])
//位置自选追加,0表示在ul的子元素的第一个位置追加一个li
1.4克隆节点
元素.cloneNode(true)
如果为true就会克隆所有的包括样式,如果为false只会克隆标签
//获取元素
const ul = document.querySelector('ul')
//克隆节点
let lili = ul.children[1].cloneNode(true)
//追加元素
ul.appendChild(lili)
1.5删除节点
父元素.removeChild()
//获取ul元素
const ul = document.querySelector('ul')
//删除ul的第一个孩子
ul.removeChild(ul.children[0])
二.移动端事件
触屏事件(touch):
touchstart点击事件
touchend离开事件
touchmove持续事件
三.BOM对象
bom是浏览器的对象模型
window对象是一个全局对象,是javascript中的顶级对象
四.延时定时器
让代码延迟执行的函数,叫 setTimeout
延时函数和间歇函数的区别:
-
延时函数: 执行一次
-
间歇函数:每隔一段时间就执行一次,除非手动清除
五.js执行机制
JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
5.1同步和异步
同步:等一个任务结束之后,再去执行另一个任务
异步:再处理一个任务的时候需要花费很多时间,那么在做这个任务的同时你可以同时处理其他任务
执行顺序: 先处理任务栈里的同步任务,同步任务处理完毕后,按照读取等待队列的异步任务,于是异步任务结束等待的状态进入执行栈开始执行
5.2 JS插件
-
插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
-
学习插件的基本过程
-
熟悉官网,了解这个插件可以完成什么需求 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
-
看在线演示,找到符合自己需求的demo Swiper演示 - Swiper中文网
-
查看基本使用流程 Swiper使用方法 - Swiper中文网
-
查看APi文档,去配置自己的插件 中文api - Swiper中文网
-
注意: 多个swiper同时使用的时候, 类名需要注意区分
-
六.日期对象
6.1获取当前时间
new关键字
const date = new Date()//声明date常量获取new关键字,得到当前的时间
const date = new Date('2008-8-8') //得到一个固定的时间,一般填写未来的时间
6.2时间戳
6.2.1使用 getTime() 方法了解
const date = new Date()
console.log(date.getTime())
6.2.2简写 +new Date()常用
console.log(+new Date())
6.2.3使用 Date.now() 了解
console.log(Date.now())
只能得到当前的时间戳,前两种可以返回指定的时间戳
七.回流和重绘
回流:
元素的结构、尺寸、布局发生变化,浏览器会重新进行排版 渲染部分或全部文档,这个过程叫回流(重排)
重绘:
元素的样式发生改变,并不影响他在文档中的位置和布局(如颜色、背景色)叫重绘
重绘不一定引起回流,而回流一定会引起重绘。
一般会导致重排的操作
1.页面首次刷新
2.字体大小的改变
3.内容的变化
4.激活css的伪类
只要是影响到页面的布局了就会有回流
思考:
-
同步和异步的区别
-
var声明的放在window里
-
回流(重排)和重绘
-
+new Date() // 得到时间戳,过去到现在时间的一个总毫秒数,/1000得到秒数
-
通过子元素.parentNode 来获取父节点 ⚠️必须是子元素
-
当我们需要所有元素时,使用querySelectorAll来获取到所有元素,然后for循环遍历到每一个元素,不要忘记+i
-
学生信息表案例(用到的知识)
e.preventDefault阻止默认事件
this.reset()重置表单方法
单词
单词 | 意思 | 用法 |
---|---|---|
new Data() | new关键字,日期对象 | 声明一个常量来获取目前的时间 const date = new Date() |
.getFullYear() | 获得年份 | 获取四位年份 console.log(变量名.getFullYear()) |
.getMonth() | 获得月份 | 取值为 0 ~ 11 |
.getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
.getDay() | 获取星期 | 取值为 0 ~ 6 |
.getHours() | 获取小时 | 取值为 0 ~ 23 |
.getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
.getSeconds() | 获取秒 | 取值为 0 ~ 59 |
setInterval(function(){},1000) | 定时器,间歇函数 | 语法:setInterval(function(){调用的函数},1000) |
.parentNode | 父节点 | 子元素. parentNode.parentNode 通过子元素来找到他的父亲 |
.children | 子节点 | 父元素.children 通过父元素来找到他的子元素 |
document.createElement | 创建节点 | 通过js创建一个节点 |
.appendChild | 尾部追加元素,配合创建节点一起使用 | 父元素.appendChild(要插入的元素) |
.insertBefore | 动态追加元素,父元素.insertBefore(要插入的元素,在哪个元素前面) | |
.cloneNode(true) | 克隆一个节点,true能克隆所有东西,false只能克隆标签 | |
.removeChild | 删除一个元素 | |
touchstart | m端:手指按下触发 | |
touchend | m端:手指离开触发 | |
touchmove | m端:按住移动 | |
setTimeout | 延时函数(使用方法和setinterval一样) | |
clearTimeout() | 清除延时函数 | |