JavaScript由ECMAScript(JavaScript语言基础),Web APIs(DOM'页面文档对象模型',BOM'浏览器对象模型')组成
ECMAScript: 规定了js基础语法核心知识,比如变量,分支语句,循环语句,对象等等
Web APIs:DOM,BOM
DOM: 操作文档,比如对页面元素进行移动,大小,添加删除等操作
BOM: 操作浏览器,比如页面弹窗,检测窗口宽度,存储数据到浏览器等等
书写位置: 内部,外部,行内
内部:
外部:
记得外部要先创建一个js文件
行内:
vue才会用到
注意: 1.书写的位置尽量写到文档末尾</body>前面
2.外部js标签中间不要写代码,否则会被忽略
JavaScript输入输出语法
输出语法:
输入语法:
ECMAScript(JavaScript语言基础)
1.变量:
语法: let 变量名
多个变量用逗号隔开
命名规范和java变量一样
注意:声明变量我们优先使用const(常量),等发现它后面是要被修改的,再改为let
记住!引用类型储存的是地址,所以只要地址不变,就不会报错,所以!数组和对象都是用const来声明
只有基本数据类型的值或引用类型的地址发生变化的时候才用let
2.数组:
语法: let 数组名 = [数据1, 数据2, ... , 数据n ]
1.操作数组之添加新数据:
(1).末尾添加(push)
语法:数组名.push(元素1,...,元素n)
用法:方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度
例子:
(2).开头添加(unshift)
语法: 数组名.unshift(元素1, ... ,元素n)
用法: 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
例子:
2.操作数组之删除某个数据
(1).删除最后一个元素(pop)
语法: 数组名.pop()
用处:方法从数组中删除最后一个元素,并返回该元素的值
例子:
(2). 删除第一个元素(shift)
语法: 数组名.shift()
用处: 方法从数组中删除第一个元素,并返回该元素的值
例子:
(3). 删除指定元素(splice)
语法: 数组名.splice(start, deleteCount)
用处: 删除指定元素,start(指定修改的开始位置),deleteCount(表示要移除的数组元素的个数,如果不写,就默认从指定位置删除到最后)
3.数组排序:
语法: 数组名.sort()
用处: 用来数组排序的,可升序可降序
例子:
3.常量:
使用场景:当某个变量永远不会改变的时候,就可以使用const来声明,而不是let。
语法: const 常量名 = 常量值
注意:1.常量不允许重新赋值
2.声明的时候必须赋值(初始化)
4.数据类型(和java有些不一样):
和java的不同:
JS是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认
Java是强数据类型 , 例如int a= 3必须是整数
(1).基本数据类型:
①.number 数字型(Number)
即我们数学中学到的数字,可以是整数,小数,正数,复数
②. string 字符串型
单引号,双引号,反引号都行
字符串拼接可以用+,嫌麻烦也可以直接用模板字符串
模板字符串:
注意:1.``是反引号
③.boolean 布尔型
和java一样
④.undefined 未定义型
只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined.
使用场景:当我们不知道这个数据是否传递过来的时候,可以检测这个变量是不是undefined,是就能判断用户没有数据传过来
与null的区别:
null代表赋值了,但是内容为空
undefined代表没有赋值
⑤.null 空类型
和java一样
(2).引用数据类型
①.object 对象
(3).检测数据类型
用法:可以返回被检测的数据类型
语法: typeof x
例子:let age = 18 console.log(typeof age) 就能返回number
(4).数据类型转换
prompt和表单这些默认传过来的数据都是字符串
①.隐式转换
用法:某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:1.+号两边只要有一个是字符串,都会把另外一个转成字符串
2.除了+以外的算术运算符,此如– */等都会把数据转成数字类型
例子: 2 - '2' 结果是0 +'123' 结果是123
②.显示转换
用法:自己写代码告诉系统该转成什么类型
转换为数字型(Number)
例子:let str = '123' console.log(Number(str)) 结果就会是123
parseInt(数据) : 就是只保留整数
parseFloat(数据) : 就是可以保留小数
5.对象
(1).新增(对象名.新属性名 = 新值)
(2).删除(delete 对象名.属性名)
(3).修改(对象名.属性 = 新值)
(4).查询
(1).对象名.属性名
例: console.log(obj.num)
(2).对象名['属性名']
例: console.log(obj['num'])
(5).遍历对象
可以用for循环,但是最推荐用for in
语法:
注意:
1.for in语法中的 k 是一个变量,在循环的过程中依次代表对象的属性名
2.由于 k 是变量, 所以必须使用 [ ] 语法解析
3.k 是获得对象的属性名, 对象名[k] 是获得 属性值
(6).对象中的方法
语法:
注意:
1.方法是由方法名和函数两部分构成,它们之间使用 : 分隔
2.多个属性之间使用英文,分隔
3.方法是依附在对象中的函数
4.方法名可以使用 " " 或 ' ' ,一般情况下省略,除非名称遇到特殊符号如空格、中横线等
(7).随机数(Math.random)
语法:
随机生成N - M之间的随机数
Math.floor(Math.random() * (M - N + 1) ) + N
随机生成N以内的随机数
Math.floor(Math.random() * N+1)
Web APIs
DOM
简介:是浏览器提供的一套专门用来操作网页内容的功能,用于开发网页内容特效和实现用户交互
1.DOM树
简介:将HTML文档以树状结构直观的表现出来,直观体现了标签与标签之间的关系
2.DOM对象
简介:浏览器根据html标签生成的JS对象,把网页内容当作对象来处理
注意:所有的标签属性都可以在这个对象上面找到,修改这个对象的属性会自动映射到标签身上
document对象:
是DOM里提供的一个对象,同时也是网页最大的一个对象,所以网页所有内容都在document里面.
它提供的属性和方法都是用来访问和操作网页内容的
3.获取DOM对象
(1).利用CSS选择器来获取DOM元素
①选择匹配的第一个元素
语法: document.querySelector( ' css选择器 ' )
参数:包含一个或多个有效的CSS选择器 字符串(也就是必须加 ' ' )
返回值: CSS选择器匹配的第一个元素,一个HTMLElement对象,如果没有匹配到,则返回null
②选择匹配的多个元素
语法: document.querySelectorAll( ' css选择器 ' )
参数: 包含一个或多个有效的CSS选择器 字符串(也就是必须加 ' ' )
返回值: CSS选择器匹配的NodeList 对象集合
例子:
4.DOM修改元素内容
因为DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象
(1).对象.innerText 属性
将文本内容添加/更新到任意标签位置,但是不解析标签
例子:
(2).对象.innerHTML 属性
将文本内容添加/更新到任意标签位置,但是会解析标签,多标签建议使用模板字符
例子:
5.修改元素属性
(1).修改元素常见属性
语法: 对象.属性 = 值
例子:
(2).修改元素样式(css)属性
①只修改几个的时候
语法: 对象.style.样式属性 = 值
例子:
注意:1.如果属性有 - 连接符,需要转换为小驼峰命名法
2.赋值的时候,需要加单位时不要忘记加
②全部都要修改的时候
语法: 元素.className = ' css类名 '
例子:
box已经提前写了样式(.box)
③修改一些(这个最常用也最重要)
语法: 元素.classList.add(' 类名 ') 追加一个类
元素.calssList.remove(' 类名 ') 删除一个类
元素.classList.toggle(' 类名 ') 切换一个类
例子:
注意: classList 是追加和删除不影响以前的类名
(3).修改表单属性
正常的修改和其他没什么区别,获取值的时候用value
语法: 表单.value = '值'
(4).自定义属性
在标签上一律以data-开头,在DOM对象上一律以dataset对象方式获取
6.定时器-间歇函数
可以根据时间自动重复执行某些代码,定时器函数可以开启和关闭定时器
(1).开启定时器
语法: setInterval(函数, 间隔时间)
间隔时间单位是毫秒
例子:
(2)关闭定时器
语法: clearInterval(变量名)
例子:
注意: 1.函数名字不需要加括号
2.定时器返回的是一个id数字
7.事件
(1).事件监听
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为注册事件
语法: 元素对象.addEventListener( ' 事件类型 ' , 要执行的函数)
元素对象.on事件 = function(){}(这是以前的写法,因为容易被覆盖,所以现在都不用了)
事件监听三要素:
事件源: 那个dom元素被事件触发了, 要获取dom元素
事件类型: 用什么方式触发, 比如鼠标点击 click, 鼠标经过 mouseover 等
事件调用的函数: 要做什么事
例子:
注意: 1.事件类型要加引号
2.函数是点击之后再去执行,每次点击都会执行一次
(2)事件类型
①鼠标事件
鼠标触发
click 鼠标点击
mouseenter 鼠标经过(没有冒泡效果)推荐
mouseleave 鼠标离开(没有冒泡效果)推荐
mouseover 鼠标经过(有冒泡效果)
mouseout 鼠标离开(有冒泡效果)
②焦点事件
表单获得光标
focus 获得焦点
blur 失去焦点
③键盘事件
键盘触发
keydown 键盘按下触发
keyup 键盘抬起出发
④文本事件
表单输入触发
input 用户输入事件
(3)事件对象
也是一个对象,这个对象里有事件触发时的相关信息(例如鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
使用场景: 可以判断用户按下哪个键, 比如按下回车键可以发布新闻
2.可以判断鼠标点击了哪个元素,从而做相应的操作
语法: 在事件绑定的回调函数的第一个参数就是事件对象(一般命名为event, ev, e)
部分常用属性
①type 获取当前的事件类型
②clientX / clientY 获取光标相对于浏览器可见窗口左上角的位置
③offsetX / offsetY 获取光标相对于当前DOM元素左上角的位置
④key 用户按下的键盘键的值
(4)事件解绑
on事件方式,直接使用null覆盖就可以实现事件的解绑
语法:
addEventListener方式,必须使用removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
语法:
注意: 匿名函数无法被解绑
(5)事件委托
利用事件冒泡特点,给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件
语法: 事件对象.target.tagName 可以获得真正触发事件的元素
例子:
(6)页面加载事件
加载外部资源(如图片,外联CSS和Javascript等)加载完毕时触发的事件
语法:
load是事件名,不能改
注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
(7)页面滚动事件
滚动条在滚动的时候持续触发的事件
语法:
事件名: scroll
scrollLeft和scrollTop是属性
1.获取被卷去的大小
2.获取元素内容往左,往上滚出去看不到的距离
3.这两个是可读写的
8.事件流
指的是事件完整执行过程中的流动路径,会经过两个阶段(捕获阶段, 冒泡阶段)
说明: 假设页面里有个div,当触发事件时, 会经历两个阶段, 分别是捕获阶段(从父到子)和冒泡阶段(从子到父),实际工作都是使用事件冒泡为主
(1)事件捕获
从DOM的根元素开始去执行对应的事件
事件捕获需要写对应代码才能看到效果(因为捕获和冒泡是一种概念,相当于从父到子执行和从子到父执行)
(2).事件冒泡
当一个元素触发事件后,会依次向上调用所有父级元素的同名事件(默认就是事件冒泡)
这个就是先弹'我是儿子'再弹'我是爸爸'最后弹'我是爷爷',而捕获就相反
(3).阻止冒泡
如果想把事件就限制在当前元素内,就需要阻止事件冒泡
语法: 事件对象.stopPropagetion()
注意: 此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
某些情况下需要阻止默认行为的发生,比如 阻止 链接的跳转,表单域跳转等
语法: e.preventDefault()
例子:
9. 日期对象方法
使用场景: 因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
例子:
时间戳:
使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
什么是时间戳: 是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
算法: 1.将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
2.剩余时间毫秒数 转换为 剩余时间的 年月日时秒分 就是倒计时时间
获得时间戳方式:
语法: 简写 + new Date() 无需实例化
例子: console.log(+new Date());
10.节点操作
(1)DOM节点:
dom树里每一个内容都被称之为节点
①父节点查找
语法: 子元素.parentNode
返回最近一级的父节点,找不到返回null
②子节点查找
语法: 父元素.children
③兄弟关系查找
语法: nextElementSibling(下一个兄弟)
previousElementSibling(上一个兄弟)
(2)增加节点:
①插入到父元素的最后一个子元素:
语法: 父元素.appendChild(要插入的元素)
②插入到父元素中某个子元素的前面:
语法: 父元素.insertBefore(要插入的元素, 在哪个元素前面)
例子:插入到最前面
ul.insertBefore(li , ul.children[0])
③克隆节点:
某些情况下我们新增节点需要复制一个原有节点,把复制的节点放入到指定的元素内部
语法: 元素.cloneNode(布尔值)
true:克隆时会包含后代节点一起克隆
false: 克隆时不包含后代节点
默认为false
(3)删除节点:
要删除元素必须通过父元素删除
语法: 父元素.removeChild(要删除的元素)
注意: 如不存在父子关系则删除不成功
11.Swiper(插件)
触摸滑动插件,简单配置即可实现手机、电脑网页大部分滑动功能,焦点图、tab、触摸导航等
使用流程:
1.熟悉官网,知道这个插件可以干什么(https:// www.swiper.com.cn/)
2.看在线演示,找到符合自己需求的demo
3.查看基本使用流程
4.查看APi文档,去配置自己的插件
BOM
BOM是浏览器对象模型
1. window对象是一个全局对象,也可以说是JavaScript中的顶级对象
2.像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
3.所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
4.window对象下的属性和方法调用的时候可以省略window
1.定时器-延时函数
语法:
清除延时函数的语法:
注意点:
1. setTimeout仅仅只执行一次,所以可以理解为就是把一段代码延迟执行,平时省略window
2.延时器需要等待,所以后面的代码先执行
3.每一次调用延时器都会产生一个新的延时器
2.location对象
location的数据类型是对象,它拆分并保存了URL地址的各个组成部分
常用属性和方法:
href: 属性获取完整的URL地址,对其赋值时用于地址的跳转
search: 属性获取地址中携带的参数,符号?后面的部分
hash: 属性获取地址中的哈希值,符号#后面的部分
reload: 方法用来刷新当前页面,传入参数true时表示强制刷新
3.navigator对象
navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息
常用属性和方法:
userAgent: 可以用来检测浏览器的版本及平台
一般用来检测访问者是手机端还是电脑端或是苹果等等,然后跳转到相应的页面
4.history对象
history的数据类型是对象,主要管理历史记录,该对象与浏览器地址栏的操作相对应,如前进,后退,历史记录等
常见属性和方法:
5.本地存储
可以将数据存储在用户浏览器中,设置,读取方便,页面刷新也不会丢失数据,容量较大,约5M左右
(1)localStorage
可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在
存储数据:
localStorage.setItem(key, value)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)
特性:1.可以多窗口(多页面)共享 (同一浏览器可以共享)
2.以键值对的形式存储使用
3.获取出来的都是字符串形式
(2)sessionStorage
语法和localStorage一样,不过特性不一样
特性:1.生命周期为关闭浏览器窗口
2.在同一个窗口(页面)下数据可以共享
3.以键值对的形式存储使用
(3)存储复杂数据类型
首先要将复杂数据类型转换成JSON字符串,存储在本地。取出来的话就是把存进去的字符串先转换为对象然后取出来,因为不转换成对象无法直接使用
复杂数据类型转换成JSON字符串: JSON.stringify(复杂数据类型)
字符串转换成对象: JSON.parse(JSON字符串)
6.拼接字符串(map,join)
(1)map
map也称映射,可以遍历数组处理数据,并且返回新的数组,map重点在于有返回值
(2)join
join()方法用于把数组中的所有元素转换一个字符串
参数:数组元素是通过参数里面指定的分隔符进行分隔的,空字符串(' '),则所有元素之间都没有任 何字符。