Dom获取&属性操作
Web APIs 第一天 3.29
声明变量
var(变量) let(变量) const(常量)
const 语义化更好一些 优先使用
1.Web APIs基本认知
1.1 作用和分类
作用:使用JS去操作html浏览器
分类:DOM、BOM
1.2 什么是DOM
DOM-文档对象模型:(document object model)用对象的角度去描述页面中的元素
1.3 DOM树
将HTML文档以树状结构直观的表现出来,页面中元素与元素之间的关系
作用:直观的体现了标签与标签之间的关系
1.4 DOM对象
浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
2.获取DOM元素
document.querySelector(' ')
query:查找
selector:选择器
细节
1.选择器在页面中不存在,结果是null
2.如果有多个元素满足这个选择器,找的都是满足条件的第一个元素
3.如果我们就是想得到所有满足选择器的元素,得到的是所有满足选择器的元素所形成的一个伪数组
let c = document.querySelectorAll('div')
console.log(c)
- 所谓的伪数组:具备数组的一般特征,但是不具备数组的所有特征
- 一般特征:可以下标访问, .length 循环遍历
- 其他特征:push pop unshift splice shift …都不能使用
4.如果只有一个元素满足了选择器,通过querySelectorAll
得到的依旧是一个数组,这个数字只有一个元素
5.如果没有元素满足选择器,通过querySelectorAll
得到的依然是一个数组,只不过这个数组里面一个元素都没有
获取body和html这俩个元素可以使用快捷方式document.body
,document.documentElement
3.操作元素内容
所有元素的内容,就是这个标签:开始标签和结束标签所夹着的内容
单标签是没有内容的,只有双标签才有内容
innerText
innerHTML
这俩个属性:都要通过元素对象 . 出来
对象.innerText
属性
拿到的只是文本信息
不解析标签
对象.innerHTML
属性
拿到的是包括标签在内的所有信息
解析标签
使用会多一点
4.操作元素的属性
4.1 常规的属性
举例:a标签的href属性、img的src属性、input的type属性…
获取: 元素对象.属性
操作:元素对象.属性=值
了解即可
//根据id名获取元素
document.getElementById('ID属性值')
//根据类名获取元素
document.getElementsByClassName('class属性的值')
//根据标签的名字获取元素
document.getElementsByTagName('标签的名字')
4.2 样式的属性
style
style也是元素的属性,也是要通过元素对象 . 出来
元素对象.style 需要继续往下点 .
元素对象.style继续往下点出的样式中,如果样式的名字带有-,我们需要把这个样式的名字变成小驼峰( font-size–> fontSize)
元素对象 . style 获取或者操作的都是这个元素的行内样式
class
操作元素的class属性:本来应该是元素对象.class 但是class是关键字,所以不能用
元素对象.className()
通过元素对象.className
在进行多个class值操作拼接的时候,空格很烦人
元素对象.classList.add('class的值') 在原来的基础上进行添加
.remove('class的值') 在原来的基础上进行删除
.toggle('class的值')在原来的基础上进行切换 切换:如果有则删除,没有则添加
.contains('class的值') 判断有没有这个类名,如果包含是true,没有不包含false
className是针对于字符串的操作,所以我们在进行多个class值的操作的时候,需要考虑空格的问题,所以一般使用classList
不能够去读取null的style属性
注意表单的某些属性:disabled
checked —>false 没有 true 有
selected
4.3 自定义属性
在h5中,对自定义属性有了一些规范 名字必须要以 data- 开头
一个标签可以有多个自定义属性
dataset包含了所有的自定义属性
使用js代码去操作自定义属性:元素对象.dataset.自定义属性的名字
增加:元素对象.dataset.自定义属性的名字=值
5.定时器
5.1一次性的定时器(延迟定时器)
setTimeout(函数,时间) //开启一次性定时器
clearTimeout(定时器的id) //关闭一次性定时器,需要在时间到之前取消才有意义
5.2间歇的定时器
反复的每隔一段时间去执行这段代码
setInterval(函数,时间)//开启一个定时器
clearInterval(定时器的id) //将定时器停止
如何避免定时器重叠问题
在开启新定时器之前,先把上一次定时器取消掉
第二天
js中的内置对象:Math和Date
Date指的是时间对象
先创建出一个时间对象
const now = new Date() //创建了一个当前时间的对象
//括号中什么都不传递,代表创建的是当前时间
const d=new Date('2023-03-03 00:00:00') //创建指定时间的日期对象
时间对象.getFullYear() //得到这个时间的年份
时间对象.getMonth() +1 //得到这个时间的月份 是从0开始的
时间对象.getDate() //得到的是这个月的几号
时间对象.getHours() //得到的是小时
时间对象.getMinutes() //得到的是分钟
时间对象.getSeconds() //得到的是秒钟
时间对象.getDay() // 得到星期数 星期天是0
//时间戳对于我们的意义在于:可以帮助我们实现倒计时的效果 (未来时间对象的时间戳-当前时间对象的时间戳)/1000 -->这俩个时间距离多少秒
//再把距离多少秒转换为 小时,分钟,秒钟
时间对象.getTime() //时间戳 当前的时间距离1970-01-01 08:00:00 到底过了多少毫秒
获取时间戳的方法:
1.日期对象.getTime()
2.+日期对象
3.Date.now()
(只能得到当前时间的时间戳,不能得到指定时间的时间戳)
操作元素的事件:
**事件:**用户在网页上做出的一些行为,我们要用js代码去监听这些行为,执行某一段js代码 点击 、鼠标相关的行为 、输入框的输入 、页面的滚动…
我们并不是控制用户到底做不做这些行为,我们要做的是:当用户做了某些事情的时候,执行一些js代码
1.1事件监听
什么是事件:
在编程时系统内发生的动作或者发生的事情
什么是事件监听:
就是让程序检测是否事件产生,一旦有事件触发立即调用一个函数做出响应也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等
语法:
//事件源 事件类型 事件处理函数
元素对象.addEventLiatener('事件类型',要执行的函数)
//每一种事件类型,都有固定的字符串:点击click
不同绑定事件的方式:
最新版本的绑定代码:元素对象.addEventLiatener('事件类型',要执行的函数)
特点:支持重复的绑定多次,每次都会产生效果
以前的绑定事件的版本:元素对象.on事件类型=function(){}
特点:如果绑定事件多次,只有最后一次绑定才会出效果
重复绑定事件的错误:
1.2 事件类型
焦点事件:不是所有元素都具备焦点事件,只有表单元素才具备
键盘触发:
keydown和keyup是监听键盘的按下和抬起事件
无论哪个键按下或抬起,都会触发这个事件
keydown会持续触发,keyup只会触发一次
文本事件:
不是所有的元素都会触发输入事件,只有表单元素才具备
当文本框通过各种方式输入了东西,就会触发这个事件
//如何去拿到输入框中用户输入的数据?
input元素.value=''
//如何拿到复选框中,用户选择的状态?
复选框元素.checked=''
表单的提交事件:
form中的submit事件
第三天
1.3 事件对象
-
事件对象是什么?
也是个对象,这个对象里有事件触发时的相关信息 -
使用场景:
可以判断用户按下哪个键
可以判断鼠标点击了哪个元素,从而做出相应的操作 -
语法获取:
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、e -
部分常用属性:
e.type
:获取当前的事件类型e.clientX / e.clientY
:获取光标相对于浏览器可见窗口左上角的位置e.offsetX / e.offsetY
:获取光标相对于当前DOM元素左上角的位置e.key
:用户按下的键盘键的值(按下的或者是抬起的是哪个键
1.4 事件的上下文环境
arguments是可以直接在函数内部使用的,包含了所有的实参
this 也是可以直接在函数内部使用的,它代表的意思是,这个fn函数是由谁调用的
window 是一个浏览器的顶级对象
对于普通函数而言,函数体内部的this,就代表了这个函数的调用者
事件处理函数中的 this,其实就是代表了,绑定事件的这个元素
再循环遍历中,为每个元素绑定点击事件的时候,在数件处理函数,有俩种方式可以代表产生当前事件的
方式1:lis[i]
方式2:this
在js代码中,函数的使用非常的灵活:
1.函数可以作为参数
2.将函数作为返回值来传递
回调函数:
把一个函数给别人,由别人调用这个函数,这个函数我们可以称之为 回调函数
小技巧:我们想使用js代码去模拟一个事件的产生
元素对象.事件类型()
阻止默认行为
有些元素是具备默认行为的
//阻止默认行为
e.preventDefault()
form表单默认行为的阻止:
对于表单的整体form而言,有一个事件 submit
表单提交的事件
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
e.preventDefault()
})
事件流
事件流:事件是会流动的
既然事件会流动,流动就会有方向
默认事件流动的方向:从子元素—>父元素(冒泡)
我们是可以修改流动的方向:从父元素—> 子元素(捕获)
怎么改变事件流动的方向:利用addEventListener(参数1,参数2,参数3)
,第三个参数 ( true:捕获,false:冒泡 )
元素对象.on事件类型 = function( ){ },这种绑定方式只有一个冒泡方向
事件流在一次事件中,只会有一个方向,要么冒泡,要么捕获
//阻止事件冒泡:
e.stopPropagation()
事件委托
事件委托:委托父元素处理子元素中的事件
事件委托由于委托给了父元素,就造成范围被扩大了,我们在事件处理函数中,需要对元素进行筛选
事件冒泡的原理
//这次真正产生事件的那个元素
e.target
//判断事件是否是li
e.target.tagName === 'LI'
使用场景:
1.当需要绑定事件元素特别多的时候,委托给父元素
2.当我们需要给未来元素(一开始界面没有,后面动态创建出来的元素)绑定事件
第四天
复习
- 什么时候才有可能需要考虑冒泡
子元素监听了事件,父元素也监听了事件 - 事件冒泡是客观存在的,当产生一个事件,这个事件会流动
从子元素–>父元素 - 有时候我们很讨厌事件冒泡,所以我们需要在某个地方阻止事件冒泡
但是事件冒泡有时候帮助我们做以一些事情:事件委托 - 事件委托:
1.需要绑定的元素特别多的时候(5个以上)
2.给动态创建的元素绑定事件的时候 - 当代码没有出现预期结果的时候
1.先看看有没有报错
2.没有报错
猜想:到底是哪里出了问题,缩小猜想的范围:打印
我们在解决一个问题的时候,可以随意的打印,但是在解决完的时候,最好把这个问题的打印都去掉 mouseenter
和mouseleave
不具备事件冒泡的特点mouseover (鼠标进入)
和mouseout (鼠标离开)
具备冒泡的特点- 拿到元素的父结点:
parentNode
新的事件
- 页面加载的事件:给window增加
load事件
页面的所有元素加载完成,会执行的事件处理函数
load事件,什么时候才会执行:页面加载完成
页面加载完成:
页面的元素结构加载完成 并且 这个页面需要的外部资源(例如:img)加载完成
DOMContentLoaded
:页面的基本结构加载完成,和外部资源没有关系,时机会更早一点
window.addEventListener('load',function(){
//代码
})
document.addEventListener('DOMContentLoaded',function(){
//代码
})
- 元素滚动的事件:
scroll事件
稍微滚动一点点,就会触发很好多次 scroll事件
元素.scrollTop
这个元素滚出去了多少距离 scrollTop这个属性是可读可写的
元素的滚动和页面的滚动不是同一件事情
元素内的滚动:
1.元素具备固定的宽度或高度
2.内容会超过这个元素的宽度或高度
3.给这个元素设置overflow : scroll / auto;
页面的滚动:不断地在页面中放置元素,让元素在一屏下展示不出来
让元素产生滚动:
方式1: scrollTop这个属性的可写特点来操作
元素对象.scrollTop = 值
//页面
document.documentElement.scrollTop = 值
方式2: 元素对象.scrollTo(x,y)
//元素滚出去的距离
div.scrollTo(0,100)
//页面滚出去的距离
document.documentElement.scrollTo(0,100)
页面的滚动事件和元素的滚动事件的监听:
元素.addEventListener('scroll',function(){
console.log(元素.scrollTop)
})
//页面
window.addEventListener('scroll',function(){
console.log(document.documentElement.scrollTop)
})
- 窗口大小变化的事件
resize事件
对整个窗口进行大小尺寸变化的监听
增加给window的
window.addEventListener('resize',function(){
//代码
})
元素大小和位置相关的信息
width/height
- scroll系列:
scrollWidth/scrollHeight
代表元素内容的宽度和高度
包含padding ,包含超出内容的部分,不包含border 不包含滚动条的区域 - offset系列:
offsetWidth/offsetHeight
代表元素的宽度和高度
包含padding 包含border 不包含需要滚动的那一部分 不包含滚动条的区域 - client系列:
clientWidth/clientHeight
代表元素的宽度和高度
包含padding 不包含border 不包含需要滚动的那一部分 不包含滚动条的区域
left/top
- scroll系列:
scrollLeft (横向)/scrollTop (纵向)
这个元素内容滚出去的距离 - offset系列:
offsetLeft/offsetTop
距离带定位的父元素的左侧和顶部的距离是多少 - client系列:
clientLeft/clientTop
元素左边框的宽度和元素上边框的宽度
第五天
复习
- scrollLeft 和 scrollTop是可读可写的
- scrollWidth/scrollHeight 、offset系列 和 client系列 是可读不可写的
- 如何让一个元素的位置发生改变
1.left样式
2.margin-left样式
3.transform : translate (0px,0px) ;
解绑事件
绑定事件:元素对象.addEventListener('click',function( ){ })
解绑事件:元素对象.removeEventListener('click',你绑定事件时的那个函数)
如果一个事件需要解绑,那么这个事件在绑定的时候,不能使用匿名函数
const fn = function () {
console.log('div被点击了...')
}
//绑定
元素对象.addEventListener('click',fn)
//解绑
元素对象.removeEventListener('click',fn)
补充:
元素对象.addEventListener() 可以多次绑定
//只有最后一次才能绑定
绑定事件: 元素对象.on事件类型=function(){}
解绑事件: 元素对象.on事件类型=null
日期对象
//获取当前时间
const date=new Date()
1.2 日期对象方法
1.3时间戳
时间对象.getTime()
+时间对象
Date.now()//只能得到当下的时间
1.4 目前为止,我们到底学了啥
- 获取元素
document.querySelector(选择器)
document.querySelectorAll(选择器)[下标]
document.body
document.documentElement
事件对象 e.target
事件处理函数中的this
- 操作元素
- 操作元素的内容
元素对象.innerHTML //获取
元素对象.innerHTML=值 //修改
- 操作元素的常规属性
id href value type src checked disabled…
元素对象.属性 //获取
元素对象.属性=值 //设置
- 操作元素的样式属性
style属性
元素对象.style.样式属性
//样式属性带有-,需要变成驼峰标识
class属性
classList add() remove() toggle()//切换 contains()
- 操作元素的自定义属性
元素对象.dataset.xxx
- 绑定元素的事件
元素对象.addEventListener(事件类型,函数)
- 解绑元素的事件
元素对象.removeEventListener(事件类型,绑定时的那个函数)
- 事件流
喜欢就事件委托
不喜欢就阻止e.stopPropagation()
其他获取元素的方式
元素节点:1.所有的标签 2.html是根节点
整个页面的根节点是document
利用节点与节点之间的关系来获取元素(不要滥用)
父元素:元素对象.parentNode
子元素:元素对象.children
获得的是伪数组
兄弟元素:上边的:元素对象.previousElementSiblings
下边的:元素对象.nextElementSiblings
动态创建新的元素
- innerHTML 其实也可以帮助我们创建出新的标签
针对的是字符串 document.createElement(标签名)
创建一个指定标签的元素对象 ,创建出来的元素对象不会在界面中显示出来
针对的是元素对象
目标元素对象.appendChild(刚刚创建的元素对象)
const newLi = document.createElement('li')
newLi.innerHTML = input.value//给刚刚创建的li添加内容
ul.appendChild(lis) //这行代码才能让刚刚创建出来的元素显示在页面中
//appendChild把一个元素,放在指定目标内部的最末尾处
目标元素对象.insertBefore(刚刚创建出来的元素对象,插入谁的前面)
如何控制一个元素的内容
1.元素对象.innerHTML=值
2.元素对象.appendChild(另外新的元素对象)
克隆节点
元素.cloneNode(布尔值)
//克隆产生一个新的元素
元素.cloneNode(true)
//代表克隆时会包含后代节点一起克隆,深拷贝
元素.cloneNode(false)
//代表克隆时不包含后代节点,浅拷贝
删除节点
真正的把元素在页面结构中,完全的移除
元素对象.remove()
元素对象.parentNode.removeChild(子元素)
第六天
复习
- 以后针对表单,我们都是非常讨厌表单的默认行为
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
e.preventDefault() //阻止表单默认行为
})
- 便捷快速重置表单的方式
form.reset()
M端事件
- touch相关的事件,是属于移动端的事件
- 移动端也有自己独特的地方。比如触屏事件 touch (也称触摸事件),Android 和 IOS 都有。
- 触屏事件 touch (也称触摸事件),Android 和 IOS 都有。
- touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
- 作用到这个元素的手指对象,是一个伪数组,包含了操作了这个元素的所有手指对象
PC点击事件中 e.type e.target e.key e.clientX/e.clientY
e.preventDefault() e.stopPropagation()
插件
插件:就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
重绘和回流
- 浏览器是如何进行界面渲染的
- 解析 (Parser)HTML,生成DOM树(DOM Tree)
- 同时解析 (Parser) CSS,生成样式规则 (Style Rules)
- 根据DOM树和样式规则,生成渲染树(Render Tree)
- 进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)
- 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
- Display: 展示在页面上
- html字符串:
布局部分的字符串–>把每一个元素生成一个DOM对象,再把每一个DOM对象之间的关系连接起来,形成了DOM树
css部分的字符串–>把所有的css样式,都生成对象的样式规则对象(css规则树)
js部分的字符串
回流一定会引起重绘,重绘不一定引起回流
回流(重排)
当Rander Tree中部分或者全部元素尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档Render Tree中部分或者全部元素的尺寸的过程称为 回流。
会导致回流(重排)的操作:
- 页面的首次刷新
- 浏览器的窗口大小发生改变元素的大小或位置发生改变
- 改变字体的大小
- 内容的变化(如: input框的输入,图片的大小)
- 激活css伪类 (如: :hover)
- 脚本操作DOM(添加或者删除可见的DOM元素)
简单理解影响到布局了,就会有回流
重绘:
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如: coor、background-coloroutline等),称为重绘。(颜色相关)
回顾DOM操作
- 选择器中null不能继续往下点.如果继续点会报错
- 元素对象.parentNode 找不到,则为null
- 元素对象.children 伪数组
- 在事件委托的时候this(绑定事件的元素)和e.target(产生事件的元素)可能不一样,其他情况一样
- 操作元素的内容:
- innerHTML=’ ’
- innerText=’ ’
- 父元素,appendChild(元素对象)
- 父元素.insertBefore(元素对象,置于哪个元素前面)
- 父元素.removeChild(元素对象)
- 自定义属性:
什么时候使用自定义属性:在标签上存储一些信息的时候
如何操作自定义属性:元素对象.dataset.xxx - 事件类型
- 事件对象e.
- 事件流
- 模拟事件
- 其他知识
- 间歇定时器
- 单次定时器
- 元素信息
- this指向
BOM(浏览器对象模型)
- window对象是一个全局对象,也可以说是JavaScript中的顶级对象
- 像document、alert0、console.log0这些都是window的属性,基本BOM的属性和方法都是window的。
- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- window对象下的属性和方法调用的时候可以省略window
1.2 定时器-延时函数
语法:
let timer=setTimeout(回调函数,等待的毫秒数)
//清除延时函数
clearTimeout(timer)
注意:
- 延时器需要等待,所以后面的代码先执行
- 每一次调用延时器都会产生一个新的延时器
1.3 js执行机制
1.js代码是单线程(只有一个人来完成js中的所有事情)
进程:理解为程序所需要执行的内存空间
线程:真正干活的那个人
为了保证js代码,不会阻塞页面,js在处理先后顺序的问题的时候,js会把这些事情进行分类:
1.同步的事情
2.异步的事情: 定时器,事件处理函数
js对于同步和异步的代码,有不同的处理策略
同步的代码:立马执行
异步的代码:直接略过
只有当同步的代码全部执行完之后,才会回过头来看看,那些异步的代码,有没有达到执行的时机
1.4 location对象
location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分
常用属性和方法:
- href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
location.href //得到当前网页的网址
location.href = 'http://www.itcast.cn' //让当前页面跳转
- search 属性获取地址中携带的参数,符号 ?后面部分
location.search
- hash属性获取地址中的哈希值,符号 # 后面部分
location.hash
- reload方法用来刷新当前页面,传入参数 true 时表示强制刷新
location.reload(true)//让当前页面强制刷新
1.5 navigator对象
存储了浏览器的版本信息
让我们使用js代码,判断这个浏览器是不是手机端的浏览器
1.6 history对象
当前标签页的历史记录
- forward()
- back()
- go(步长)
1.7 localStorage
数据持久化的存储下来,内存当中存储的变量不会永久的存下来
localStorage.setItem('要存的数据名',数据)//存数据(设置某一项的数据)
localStorage.getItem('要取的数据名')//获取数据
localStorage.removeItem('数据名')//移除数据(将某一项数据移除掉)
localStorage.clear('数据名')//将全部的localStrorage清空
1.8 sessionStorage
把数据临时存储,不是持久化的,当浏览器关闭,数据也会消失不见
sessionStorage.setItem('数据名',数据)//存储数据
sessionStorage.removeItem('数据名')//移除数据(数据不存在也不会有影响)
sessionStorage.getItem('数据名')//获取数据
sessionStorage.clear('数据名')//将数据全部都清空掉
第七天
复习
存储数据的一些细节问题
给常量赋值
- localStorage可以存任意类型的数据,不管存什么类型的数据,取出来的都是字符串的类型
- 存储普通数据类型的时候,取数据的时候,可能需要进行类型的转换
- 存储的引用数据类型的时候,存进去的数据,可能会丢失
存储复杂数据类型
如果我们在存储复杂数据类型的时候,不想让数据丢失
我们把obj变成字符串之后,把变成字符串之后的数据存储在localStorage中
//把复杂数据类型变成字符串
JSON.stringify(obj) //将obj这个对象,转变成了json的字符串,这个json字符串将会保留对象中的所有信息
//将字符串转换为复杂数据类型
JSON.parse(字符串)
把arr进行持久化操作
什么时候存? 数据变的时候存
什么时候去? 数据初始化的时候取
字符串的操作
- 字符串的循环遍历:字符串.length 字符串[下标]
- 字符串的分割:字符串.split(‘分隔符’)
- 如果分隔符存在,把分隔符左右俩边的部分放到一个数组之中
- 如果分隔符不存在,把整个字符串放到一个数组中
- 如果分隔符是空字符串,把字符串里的每一个字符串都分割出来,放到一个数字中去
let timp='zhangsan'
const arr=timp.split('')
//结果:['z','h','a','n','g','s','a','n']
let str1='zhangsan-lisi-wangwu'
const arr=str1.split('-')
//结果:['zhangsan','lisi','wangwu']
let str1='name:zhangsan'
console.log(str1.split(':')[1])
//结果:zhangsan
let str3='name=zhangsan&age=18&height=178'
const arr=str3.split('&')
const obj={}
//结果:['name=zhangsan','age=18','height=178']
for(let i=0;i<arr.length;i++){
const key=arr[i].split('=')[0]
const value=arr[i].split('=')[1]
obj[key]=value
}
//结果:{name=zhangsan,age=18,height=178}
- 字符串的查找:字符串.indexOf(‘查找的字符串’)
- 在大字符串中,得到小字符串出现的位置
- 如果说小字符串出现了多次,得到的是第一个出现小字符串的位置
- 如果说小字符串在大字符串中不存在,我们将会得到-1
- 字符串的替换:字符串.replace(‘目标小字符串’,‘新的小字符串’)
- 如果目标小字符串,在大字符串中出现多次,那么replace方法,一直是替换第一个出现的目标字符串
- 其他的方法
字符串.includes('小字符串')//得到大字符串中是否包含了小字符串(true,false)
字符串.startWith('小字符串')//得到大字符串是否是以小字符串开头
字符串.endWith('小字符串')//得到大字符串是否是以小字符串结尾
字符串.toUpperCase()//转变为大写
字符串.toLowerCase()//转变为小写
- 解决俩个办法
- replace只能替换第一个
- 如何使用字符串去表示一种字符串的范围
-
- 手机号的范围
-
- 邮箱的范围
-
- …
正则表达式
作用:都是对字符串的操作
- 匹配
- 替换(全部替换)
- 提取
什么是正则表达式
就是用一堆乱七八糟的符号,去表示某些范围
如何使用正则表达式
定义正则表达式
使用字面量 /正则表达式的符号/
特殊字符
- 边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)
let str = 'hello'
let reg = /^he/ //以he开头
let reg = /lo$/ //以lo结尾
let reg = /^he$/ //必须以he当做全部,字符串内容只能是he
- 量词(表示重复的次数)
这些量词不能单独使用,在这些量词前面一定要有东西,代表这个东西出现次数的规则
let str = 'hello'
let reg = /^hel{2}o/ //l重复俩次
let reg = /^hel{2,5}o/ //l重复2-5次
- 元字符
- [] 代表从一堆字符中取其一都算满足规则
[abc] abc中的一个
[a-zA-Z0-9] 数字大小写字母取其一
[aef]{3} 三个aef中取其一
[^abc] 在中括号中的^是取反 只要不是abc都可以 - . 换行符之外的任何单个字符
- | 代表多个规则的连接
整个正则字符串的修饰符
跟在最后一个斜杠后面
- i ignore 忽略大小写
- g global 全局匹配
//把字符串中的所有激情都替换成**
let reg=/激情/g
const replace = str.replaceAll(reg, '**')
console.log(replace)
使用正则表达式
正则表达式对象.test(字符串)
let str = 'hello'
let reg = /he/ //定义了一个正则表达式的对象
const ret = reg.test(str) //用正则表达式去测试字符串
//结果:true
test(被检测的字符串) //用来查看正则表达式与指定的字符串是否匹配
第八天
复习
学生信息表-持久化版本
-
结构搭好
-
render()调用
-
添加按钮,渲染页面
-
删除按钮
-
表单重置
form.reset()
- 非空校验
- 把arr存到localStorage中
- 取出数据(数据初始化的时候取)
- 代码上的小技巧:
小兔鲜儿综合案例
注册页面(register)
把全部的this替换为点出事件的变量名
1. 获取验证码
解决定时器重叠问题
按钮执行频率降低(节流)
节流阀:按钮的点击无论执行的有多快,3s之内就只能执行一次事件处理函数中的代码(标记位)
let flag = true //1.定义一个布尔类型的值
document.querySelector('button').addEventListener('click', function () {
if (flag) {
console.log('aaa')
flag = false
setTimeout(function () {//延迟三秒之后才可以再点击
flag = true
}, 3000)
}
})
节流版
2. 验证用户名
change事件:失去光标,并且内容改变
input框的事件:focus blur input change(更好的实现验证事件)
3. 验证手机号
4. 验证验证码
5. 验证密码框
6. 确认密码的验证
7. toggle有则删除,无则添加![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/971ef3301f7923a6e67b88d857b2c17b.png)
8. 提交的整体校验
登录页面(login)
2. 提交时判断有没有勾选同意协议
主页面(index)
PC端轮播图
1. 监听界面加载完成事件
2. 鼠标移入显示箭头效果
3.鼠标移出显示箭头效果
4.生成小圆点
5.点击左右箭头切换
6.点击小圆点,切换到对应的图
- 给ol下动态创建的li加自定义属性
- 切换
7.小圆点的高亮状态
- 给ol第一个li增加高亮状态
- 对应的小圆点增加高亮
给左右箭头点击事件和小圆点的点击事件加函数
8.自动轮播
9.左右箭头点击过快问题(节流)
左右箭头都要设置
无缝滚动
transitionend 过渡结束
鼠标移动事件 mousemove
第九天
重要案例
小兔鲜商品详情
1.滚动相关
监听页面的滚动事件:得到最新滚出去的距离
如果想要页面的滚动,是一种平滑的方式,给html和body在css中设置:
body,html{
scroll-behavior:smooth; //平滑滚动
}
2.tab栏切换
侧边栏图片切换
右侧购物详情tab栏
商品详情和商品评价切换
3.放大相关
遮罩层的移动
大图片的显示
背景图片的变换
大图移动的代码
todoList项目实战
1.使用数据渲染界面
列表的渲染
数量显示的渲染
方法一:
方法二:
方法三:
2.添加功能
.trim() 裁剪(去掉多余的空格)
删除功能
实现切换
数据持久化
什么时候存