JavaScript
介绍javascript
javascript是一种运行在客户端的编程语言,实现人机交互效果
作用:
网页特效(监听用户的一些行为让网页做出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
ECMAScript javascript语言基础
规定了js基础语法核心知识
Web APIs:
DOM(页面文档对象模型) 操作文档,对页面运算进行移动,大小,添加删除等操作
BOM(浏览器对象模型) 操作浏览器,比如页面弹窗,检测页面宽度,存储数据到浏览器
内部javascript
写在<body>里面因为html是从上往下加载的,通常把js写在html的最下面
外部js写在.js结尾的文件里面
通过<script src="my.js"></script>
引入到html页面中,外部js的script标签中间是不能写内容的
内联javascript代码写在标签内部
js注释
//单行注释 ctrl+/
/**/块注释 shift + alt + a
js结束符,英文的;js里面的分号不一定要写
输入输出语法:
document.write('要出的内容')
write里面也可以写标签
控制台打印输出 给程序员看的
console.log('看看对不对')
alter('弹出内容')页面弹出警示框
输入语法
prompt('输入')显示一个对话框,包括一条文字信息,用来提示用户输入文字
字面量literal
变量
装大小的盒子,计算机用来存储数据的容器
声明变量,创建变量
语法: let 变量名
let age
变量赋值
age = 18
多个变量可以通过逗号隔开来填写
变量本质就是程序在内层中申请一块用来存放数据的小空间
变量命名规则和规范
规则:必须遵守,不遵守报错(法律层面)
1.不能使用关键字
2.只能用下划线,字母,数字,$组成且数字不能开头
字母严格区分大小写,Age和age是不同的变量
规范
遵守小驼峰命名法:第一个单词首字母小写,后面单词首字母大写
数组Array
一种将一组数据存储在单个变量名下的方式
let arr = ['js','你好]
js的数组也是有序的,索引也是从0开始的
通过arr.length获取数组的长度
常量
const声明的变量称为常量
常量储存的值不会改变
数据类型
基本数据类型
number数字型
算术运算符 +-*/%运算的优先级小学学习
计算错误会显示NaN表示运算的数据类型有问题
对NaN进行任何操作得到的都是NaN
string字符串型
通过单引号''双引号""反引号``包裹的数据叫做字符串,推荐使用
''单引号
单引号和双引号可以相互嵌套,但是不能自己嵌套自己
必要时通过\转义符输出单引号和双引号
+可以用来拼接字符串
模板字符串语法
``(反引号)内容拼接时用${}包住变量
document.write(`我今年${age}岁了.`)
boolean布尔型
true为真,false为假
undefined未定义型
只声明变量,不赋值的情况下,变量的默认值是undefined
null空类型
代表 无 , 空 或者 值未知 的特殊值
如果一个变量里面确定存放的是对象,还没准备好对象的值,既可以放个null
检测数据类型
typeof关键字检测数据类型
typeof x 或者typeof(x) null其实是一个对象数据类型
引用数据类型
object对象
类型转换
把椅子数据类型的变量转换成我们需要的数据类型
比如说prompt获取过来的数据默认是字符串类型的
隐式转换
比如说+好两边只要有一个是字符串,他就会把两边都变成字符串
-*/如果两边有一个是数字,就会把另一个字符串类型的数字转换成
+'字符串'就能把字符串里面的数字转换成数字型
显示转换
Number(数据值)转换失败变成NaN
parseInt(数据值)只保留整数,对于数据值里面的其它字符就省略
parseFloat(数据值)可以保留小数
运算符
赋值运算符
对变量进行赋值=,+=,-+,*=,/=
一元运算符
自增 ++
自减 --
比较运算符
.>,<,>=,<=,==,===,!==
==两边值是否相等 等于
===两边值是否类型和值都相等 全等
!==两边是否不全等
字符串比较,是比较字符对于的ascll码
逻辑运算符
&&逻辑与
||逻辑或
!逻辑非
运算符优先级
()>一元运算符++ -- ! >算术运算符 */% >+- > 关系运算符 > >= < <=
.>相等运算符 == != === !== >逻辑运算符 && || ! >赋值运算符= >逗号运算符,
逻辑与&&优先级大于逻辑或||
!在一元运算符中优先级最高
语句
表达式:是一个可以求值的代码,javascript引擎会将其计算出一个结果
语句:是一段可以执行的代码
三大控制语句
顺序结构
分支结构
选择性的执行想要的代码
if分支
if(){}
if(){
}else{}
if(){
}else if(){
}else{}
三元运算符
条件?满足条件执行的代码: 不满足条件执行的代码
switch语句
switch(数据){
case 值1:
代码1;
break
case 值2:
代码2;
break
default:
代码n;
break
}
f12打开source去操作要断的点
循环结构
while循环
for循环
for(变量起始值,终止条件;变量变化量)
continue,break
数组的增删改查
增
数组.push(数据) 可以把一个或多个元素添加到数组末尾,并返回该数组的新长度
数组.unshift(新增的内容) 方法将一个或者多个元素添加到数组开头,并返回该数组的新长度
删
数组.pop() 从数组中删除最后一个元素,并返回该元素
数组.shift() 删除第一个元素,并返回该元素
数组.splice(起始位置操作的下标,删除的个数)省略删除的元素个数默认删除到最后
函数
代码复用
函数的使用
func,是设计为执行特点任务的代码块
function 函数名(){
函数体
}
函数名()来调用函数
函数传参
function 函数名(参数列表){
函数体
}
函数名(传递的参数列表) 来调用
如果一个参数不给值默认是undefined
可以给参数设置默认值
(参数1= 0,参数2 = 0)这样设置默认值
函数返回值
return 数据
作用域
全局作用域 作用于所有代码执行的环境或者整个独立的js文件
能在全局进行修改
局部作用域 作用于函数内的代码环境
只能在局部进行修改
函数内部,变量没有声明直接赋值也当全局变量看(不推荐)
函数内形参看出局部变量
访问规则:先局部,局部没有再找全局
匿名函数
function(){}
没有名字的函数是无法直接使用的
函数表达式
let fn = function(){
}
fn() 参数和具名函数一样
立即执行函数 ,放置变量被污染
(function (){})()参数写在后面的小括号里面
多个立即执行函数用;分割
逻辑分割
&& 左边为false就短路
|| 左边为true 就短路,如果左边为false才会去看右边
x = x || 0 ;
boolean型的转换
'',0,undefined,null,false,NaN转换成布尔型值后都是false,其余则为false
对象
什么是对象
无序的数据集合
可以详细的描述某个事物
对象使用
对象声明语法
let 对象名 = {
属性名: 属性值,
方法名: 函数
}
属性:信息,方法:行为
let 对象名 = new object()
对象使用
通过 对象名.属性名得到属性值
delete 对象名.属性 删除对象数据
属性名字符串通过 对象名['属性名'] 来写
方法
方法名: function(){
方法体
}
对象名.方法名来调用方法
多个方法中间用,分隔
遍历对象
for in 得到的数据是带引号的字符串 '字符串'
一般用在遍历对象
for( let k in obj ){
console.log(obj[k])
}
k在里面得到的是带引号的属性名,所以我们通过对象名['属性名']这个方法来获取属性名对应的属性值
内置对象
js内部提供的对象,包含各种属性和方法给开发者调用
Math
提供了一些列数学运算的方法
random: 生成0~1之间的随机数
左闭右开 [a,b)
ceil: 向上取整
floor: 向下取整
max: min: 最大最小值
pow: 幂运算
abs:绝对值
sqrt:平方根
round()返回一个数字四舍五入最接近的整数
随机对象
API
操作dom bom
变量声明建议const优先:const语义化更好
数组用const声明也可以添加元素,因为给数组进行改变,而数组的地址并没有进行改变
对于引用类型数据,const声明的变量里面存储的是地址
API作用和分类
作用:用js去操作html和浏览器
分类:dom(文档对象模型),bom(浏览器对象模型)
dom是浏览器提供的一套专门用来操作网页内容的功能
dom树,也就是思维导图文档树直观体现了标签与标签之间的关系
dom对象:浏览器根据html标签生成的js对象:所有标签的属性都可以在这个对象上面找到,修改这个对象的属性会自动映射到标签身上
dom核心思想:把网页内容当作对象来处理
document对象是dom里面的一个对象,它提供的属性和方法都是用来访问和操作网页内容的,网页所有的内容都在document里面
dom 获取元素
根据css选择器来获取
查找元素dom元素就是利用js选择页面中标签元素
获取元素,修改属性
1.选择匹配的第一个元素
document.querySelector('css选择器')''写的是css选择器标签名字
参数:包含一个或多个有效的css选择器 字符串
返回值:css选择器匹配的第一个元素,第一个html element对象
2.选择匹配多个元素
document.querySelectorAll('css选择器')
参数:包含一个或多个有效的css选择器 字符串
返回值:css选择器匹配的NodeList 对象集合
document.querySelectorAll('ul li')
document.querySelectorAll('[type=search]')
通过属性选择器来获取对象
不能直接修改,因为获取的元素类似于数组,得遍历数组来进行对元素修改,只有长度没有,pop和push方法
其它获取dom元素方法
document.getElementByID('nav')
根据id获取一个元素
document.getElementsByTagName('div')
根据标签获取一类元素
document.getElementsByClassName('w')
根据类名获取元素 获取页面所有类名为w的
在ul里面精准获取li 通过 ul li:nth-child(2) 获取第二个li
通过 对象.innerText 属性 获取文字内容
把文本内容添加/更新到任意标签位置,显示纯文本不解析标签
对象.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签,多标签建议使用模板字符
纠结用谁选innerHTML
别忘了${变量}可以用来占位更换的作用
操作元素样式属性:对象.style.样式属性 = '值'
如box.style.width = '300px'
对于有-组成的多组单词的样式属性,使用小驼峰命名法就行
如background-color 写成 backgroundColor
属性写太多跳到下一行里面去了,就得在最上面的结尾加一个/来连接
如果操作的样式比较多,直接通过style属性修改比较繁琐,我们就通过借助css类名的形式
元素.className = 'css类名'
多个类名可以在中间加空格来写
元素.className = 'css类名1 css类名2'
使用className会直接覆盖以前的类名
通过classList操作类控制css
为了解决className任意覆盖以前的类名,我们可以通过classList方式追加和删除类名
追加一个类
元素.classList.add('类名')
删除一个类
元素.classList.remove('类名')
切换一个类
元素.classList.toggle('类名')
通过dom对象.value来获取表单属性值,操作表单属性
自定义属性:标签上一律使用data-开头,再dom上一律以dataset对象方式获取,dataset得到的是一个集合,类名存放的就是我们自定义的属性
定时器-间歇函数:
网页中经常每隔一段时间自动执行一段代码,不需要我们手动触发.
开启计时器:setInterval(函数名,间隔时间) 时间的单位是毫秒
作用:每隔一段时间调用这个函数,导入的函数不需要加括号,定时器返回的是一个id数字
let 变量名 = setInterval(函数,间隔时间)
所以我们关闭计时器就直接 clearInterval(变量名)
dom 事件基础
注册事件,tab栏切换
事件监听
事件是编程时系统内发生的动作或者发生的事情,比如说用户在网页上单击一个按钮
事件监听就是让程序检测是否有事件产生,一旦有事件除法,就立即调用一个函数做出响应,也成为绑定事件
元素对象.addEventListener('事件类型',要执行的函数)
事件类型一定要加引号
click点击 cursor:pointer 这个是鼠标经过时变成手指形状
mouseenter mouseover鼠标经过
mouseleave mouseout鼠标离开
focus 获得光标
blur失去光标
keydown 键盘按下触发
keyup 键盘抬起触发
input 用户输入事件
环境对象
指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境
普通函数里面this指向的是window
调用函数里面this指向的是调用的对象,谁调用,this就指向谁
回调函数:如果将函数A作为参数传递给函数B时,我们称函数A为回调函数
dom 事件进阶
事件对象,事件委托
事件流
指的是事件完整执行过程中的流动路径
事件捕获:从外到内,从大到小
从dom的根元素开始执行事件
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制),第三个传入参数是true得到捕获过程,默认false,默认是冒泡阶段
事件冒泡:从里到外,从小到大
会依次向上调用所有父级的同名事件
阻止冒泡:前提阻止事件冒泡拿到事件对象
事件对象.stopPropagation() 一般是function里面的参数
阻断事件流动传播,可以阻止冒泡也可以阻止捕获
解绑事件
匿名函数无法被解绑
对象. removeEventListener(事件类型,处理函数)
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)
传统on事件直接使用null覆盖就行
事件委托
利用事件流的特征解决一些开发需求的知识技巧
原理:给父亲注册事件,当我们触发子元素时,冒泡到父元素身上,从而触发父元素的事件
通过 事件对象.target.tagName 可以获取到真正触发事件的元素
阻止默认行为 e.preventDefault()
页面加载事件:加载外部资源在加载完毕时触发的事件
事件名:load
window.addEventListener('load',function())
等待页面资源加载完毕再执行里面的function回调函数
也可以对某一资源进行监听,如img.addEventListener('load',function())
事件名: DOMCotentLoaded
当初始的HTML文档被加载完成和解析之后就能执行,不需要等样式表,图像等完全加载
元素滚动事件:滚动条在滚动的时候触发的事件
事件名:scroll
监听整个页面滚动
给window或者document加,也可以给某个元素加直接监听某个元素内部滚动
scrollLeft
scrollTop
获取元素往左往上滚动出去看不到的距离,两个值都是可以读写的
在window里面获取html元素写法
document.documentElement
通过html元素来得到主页面的滚动大小.赋值时不带单位
页面尺寸事件
在浏览器窗口尺寸发生变化的时候触发的事件
事件名:resize
window.addEventListener('resize',function())
检测屏幕宽度
获取元素的可见部分宽高(不包含边框,margin.滚动条等,包括padding内边框)
clientWidth和clientHeight
offsetWidth和offsetHeight获取元素的自身宽高,包含自身设置的宽高padding,broder
获取元素自己定位父元素的左上距离,如果父亲有定位就以父亲为准,如果没有定位就以最近的有定位的为准
offfsetLeft和offsetTop 是只读属性
日期对象
日期对象是用来显示时间的对象,可以得到系统当前的时间
实例化
在代码中发现了new关键字时,一般将整个操作称为实例化
获得当前时间 new Date()
获得指定时间
new Date('2022-5-1 08:30:00') 可以用来倒计时
日期对象方法
因为返回的日期对象我们不能直接使用,使用要转换成实际开发中的常用格式
getFullYear() 获取四位年份
getMonth() 获取月份 取值范围 0~11
getDate() 获取月份中的每一天
getDAy() 获取星期
getHours() 获取小时 取值返回0~23
getMinutes() 获取分钟 取值返回0~59
getSeconds() 获取秒数 取值返回0~59
不足10得补0 用三元表达式
h = h <10 ? '0' + h : h
date.toLocaleString() 得到的是2023/8/13/19:03:21
时间戳(计算倒计时)
指的是1970年01月01日00时00分00秒起至今现在的毫秒数,是一种特殊的计量时间的方式
算法:将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数转换成剩余时间的 年月日时分秒 就是倒计时时间
获取时间戳 getTime(),Date.now(),
const date = new Date()
console.log(date.getTime())
console.log(+ new Date()) 加一个+会把字符串变换成数字型
console.log(Date.now()) 只能得到当前的
转换公式
天数 d = parseInt(总秒数/60/60/24)
小时 h = parseInt(总秒数/60/60%24)
分数 m = parseInt(总秒数/60%60)
秒数 s = parseInt(总秒数%60)
dom 节点操作
节点的增删改查
dom树里面的,欸一个内容都称之为节点
元素节点:所有的标签,html是根节点
属性节点:所有的属性
文本节点:所有的文本
其它
查找节点
通过关系来查找,返回的都是对象
父节点
子元素.parentNode
返回最近一级的父节点,找不到返回为null
通过多次调用parentNode去找更上面的节点
子节点
childNodes 获得所有的子节点,包括文本节点,注释节点等
children 仅获取所有的元素节点,返回的是一个伪数组
兄弟节点
上一个兄弟节点
previousElementSibling 属性
下一个兄弟节点
nextElementSibling 属性
增加节点
先创建一个新的节点,再把创建的新的节点放入到指定元素的内部
创建节点:船舰一个新的网页元素,在添加到网页内,一般先创建节点,然后再插入节点
document.createElement('标签名')
追加节点:要想再界面中看到,还得插入到某个父元素中
插入到父元素的最后: 父元素.appendChild(要插入的元素)
插入到父元素的某个子元素前面: 父元素.insertBefore(要插入的元素,再哪个元素前面)
ul.insertBefore(li,ul.children[0]) 放在最前面
克隆节点
元素.cloneNode(布尔值) true表示克隆时会包含后代节点一起,false表示克隆时不包含后代节点,默认为false
克隆完后得进行追加
删除节点
要删除元素必须通过父元素删除
父元素.removeChild(要删除的元素)
display:none隐藏节点
M端事件
触屏事件 touch
touchstart 手指触摸到一个dom元素时触发
touchmove 手指在一个dom上滑动时触发
touchend 手指在一个dom元素上移开时触发
js插件:swiper Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
记得加link和在js里面加src
bom 操作浏览器
bom,插件,本地存储
浏览器对象模型
window对象是一个全局对象,是js里面的顶级对象
document,alert(),console,log()这些都是window的属性,基本bom的属性和方法都是window的,调用window对象下的属性和方法可以省略window
所有通过var定义在全局作用域中的变量,函数都会变成window对象的属性和方法
var num = 10
window.num ===10
定时器-延时函数:
setTimeout(回调函数,等待的毫秒数)
仅仅执行一次
清除延时函数 let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
js执行机制:单线程,同一时间只能做一件事
为了解决这个问题,利用多核cpu的计算能力,允许js脚本创建多个线程 就有了js同步和异步
同步:前一个任务结束后再执行后一个任务
异步:做一个事情时,还可以去处理其它事情
js的异步是通过回调函数实现的
异步任务 普通事件click,resize,资源加载load,error,定时器setInterval
先执行执行栈中的同步任务,异步任务放在任务队列中,一旦执行栈中的同步任务执行完毕,系统就会按次序读取任务队列的异步任务
事件循环就是主线程不断的重复获取任务,执行任务
location对象
location的数据类型是对象,它拆分保存了url地址的各个组成部分
href 通过href去跳转页面
location.href = '网站地址'
hash属性获取地址中的哈希值 也就是符号#后面的部分
location.hash
location.reload() 刷新页面,里面传入true时表示强制刷新,类似ctrl +f5
navigator对象
navigator对象下记录了浏览器自身的相关信息
userAgent来判断浏览器的版本
history对象
主要管理历史记录,前进,后退,历史记录
back() 后退
forward() 前进
go(参数) 前进后退功能都有,看参数来进行变化
本地存储
1,数据存储再用户浏览器上
2,设置,读取方便,甚至页面刷新不丢失数据
3,容量较大,sessionStorahe和localStorage约5M左右
localStorage
可以将数据永久存储再本地,除非手动删除
语法 :
存储方式localStorage.setItem('key','value')
获取方式localStorage.getItem('key')
删除方式localStorage.removeItem('key')
存储在Application 里面的Storage Local Stroage里面
本地里面只能存储字符串数据类型
sessionStorage
生命周期为关闭浏览器,再同一个窗口(页面)下的数据可以共享
语法和localStorage一样
存储复杂数据类型: 无法直接使用
需要将复杂数据类型转换成JSON字符串类型再传入进去
语法: JSON.stringify(复杂数据类型)
把JSON字符串转换成对象
JSON.parse(JSON字符串)
用map()和join()数组方法来实现字符串拼接
map可以遍历数组处理数据,并且返回新的数组
map(function(ele,index){})
ele是数组元素,index是数组索引号
join()方法用于把数组中的所有元素转换一个字符串
join('') 小括号里面可以添加分隔符
正则表达式
正则表达式是用于匹配字符串中字符组合模式
定义规则 const 变量名 = /判断标准/
规则.test(被检查的字符串) 匹配返回布尔值
规则.exec(被检查的字符串) 匹配成功返回数组否则为null
元字符
一些具有特殊含义的字符,可以极大提高匹配的灵活性
边界符(表示位置) :用来提示字符所处的位置
^ 表示匹配行首的文本(以谁开始)
$表示匹配行尾的文本(以谁结束)
量词(表示重复次数)
-
*重复零次或无数次
-
+重复一次或无数次
-
?重复零次或一次
-
{n} 重复n次
-
{n,} 重复n次或无数次
-
{n,m} 重复n到m次
字符类(\d)
[]匹配字符集合
只要包含[]里面中任意一个字符都返回true(只选一个哦)
[]里面加上-连字符表示一个范围[a-z] [a-zA-Z] [0-9] [a-zA-Z0-9]
[^]取反,匹配除了[]以外的字符
预定义类(大写都是取反)
\d 匹配0-9
\D 匹配除了0-9以外的字符
\w 匹配任意字母数字下划线
\W
\s 匹配空格(包括换行符,制表符,空格符等)
\S
修饰符
约束正则执行的某些细节行为,如是否区分大小写,是否支持多行匹配
语法:
/表达式/修饰符
i 不区分大小写
g 匹配所有满足正则表达式的结果
字符串.replace(/正则表达式/,'替换的字符串')
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
