前言
js笔记，好记性不如烂笔头，总结了一些比较常用的知识点。发到csdn上就当作备份。前面的一些较简单所以没有写，只写了一些我认为容易忘记的知识点，有错的地方欢迎指点。
JavaScript
- 前言
1.数值转换
Boolean() // 布尔型 非0即真
Number() // 转换为数字 只有纯数字字符串才能转，不然就是NaN
parseInt() // 转换为int 取整3.14->3 为字符串时100a->100 开头不是数字则NaN
// 转换为十进制 parseInt(nmuber,进制)
parseFloat() // 转换为float 取浮点数
Math.ceil() // 向上取整 3.1->4
JSON.parse(str) // 把字符串解析成对象格式
JSON.stringify(json) // 把对象格式转成字符串
2.作用域
查找变量从最近父级查找，逐层向上
let 作用域为最近{}内
3.存储数据
对象数据类型，键值对集合，json
4.数组
1.设置数组长度
// 例子：数组length-1 =>作用：可以用来删除最后的元素
arr.length = 长度
2.从后面加数据
// 返回数组长度
push（value）
3.在前面加数据
// 返回长度
unshift（value）
4.删除最后一个
// 返回被删除的元素
pop（）
5.删除第一个
// 返回被删除的元素
shift（）
6.数组反转
// 返回反转后的数组
reverse（）
7.删除若干数据
// 删除若干数据，并选择是否插入。默认值(0，0，没有) 返回新数组（被删除的数据）
splice（开始索引，多少个，value）
8.数组排序
// 什么都不传就两个两个换。返回排序好的数组
sort() //例如：1，2，3，4 => 2,1,4,3
// 从小到大排序
sort（function（a,b）{return a - b}）
// 从大到小排序
sort（function（a,b）{return b - a}）
9.拼接成字符串
// join（连接符）。将数组用连接符连接成字符串，返回字符串
join('-') // 例如：1，2，3 => 1-2-3
10.拼接数组
// concat（其他数组）将其他数组与数组拼接。返回拼接好的数组
arr1.concat(arr2)
11.截取数组
// 默认（0，数组长度），返回截取的新数组，包前不包后
slice（开始索引，结束索引）
11.查找value在数组的索引
// 有该数据则返回第一次出现的索引。没有则返回-1
indexOf（value）
12.遍历数组
// item 是数组每一个元素，index 是索引，arr是数组。参数可以不写,没有返回值
forEach（function（item，index，arr）{}）
13.映射数组
// 返回新的数组
map（function（item，index，arr）{return item*10}） // 将数组每一个元素*10
14.过滤数组
// 返回过滤好的新数组
filter（function（item，index，arr）{return item>150}） // 将数组小于150的元素删除
15.判断是否每一项都满足条件
// 返回布尔值
every（function（item，index，arr）{return item>150}） // 判断是否大于150
16.判断是否有某一项都满足条件
// 返回布尔值
some（function（item，index，arr）{return item>150}） // 判断是否有满足大于150的元素
5.字符串
1.获取对应索引位置的字符
// 返回字符
charAt（索引）
2.将字符串的所有字母转换成小写
// 返回转好的字符串
toLowerCase（）
3.将字符串的所有字母转换成大写
// 返回转好的字符串
toUpperCase（）
4.将字符串第一个满足的内容更换
// 返回字符串。注意：第一个
replace（换下内容，换上内容）
5.去除首尾空格
// 返回字符串
trim（）
6.按照分隔符切割组成一个数组
// 返回数组
split（分隔符）
// 多个分隔符（x，y是分隔符）
split（/x|y/）
// 若分隔符是. 要加[]
split（/[.]|y/）
7.截取字符串
有三个方法：
substr(开始索引，个数)
substring(开始索引，结束索引)
slice(开始索引，结束索引)
// 示例
var arr = "01234567"
var res1 = substr(1,6) // 结果为123456，1是开始索引，6是6个字符
var res2 = substring(1,6) // 结果12345，1是开始索引，6是结束索引。包前不包后
var res3 = slice(1,6) // 结果12345，1是开始索引，6是结束索引。包前不包后
6.数字常用方法
1.获取0~1之间的随机小数。
// 返回小数。包前不包后，即可以获取到0，不可以获取到1
Math.random（）
2.对数字进行四舍五入取整
// 返回整数
Math.round（value）
3.对数字进行向上取整
// 返回整数
Math.ceil（value）
4.对数字进行向下取整
// 返回整数。相对于去小数
Math.floor（value）
5.对数字进行取幂运算
// 返回结果
Math.pow（底数，指数）
// 例如2的5次方
Math.pow(2,5)
6.对数字进行二次方根运算
// 返回结果
Math.sqrt（value）
// 例如根号4
Math.sqrt(4)
7.对数字进行绝对值运算
// 返回结果
Math.abs（）
8.获取若干数字中的最大值
// 返回最大值。
Math.max（value1，value2，...）
9.获取若干数字中的最小值
// 返回最小值。
Math.min（value1，value2，...）
10.得到一个近似Π(派：3.14159…)的值
// 返回值
Math.PI
11.示例：
// 获取0~x之间的随机整数，
var a = Math.random()*(x+1)
var result = Math.floor(a)
// 获取x~y之间的随机整数
var b = Math.random()*(y-x+1)
var result1 = Math.floor(b)+x
7.时间常用方法
var time = new data（）
time.getFullYear() // 获取年
time.getMonth() // 获取月份
time.getDate() // 获取日期
time.getHours() // 获取小时
time.getMinutes() // 获取分钟
time.getSeconds() // 获取秒
time.getDay() // 获取星期 0~6 周日到周六
time.getTime() // 获取时间戳 1970/1/1 00:00:00 距离今天的毫秒
// 获取时间差函数
function getDiff(time1,time2){
// 获取时间戳
var ms1 = time1.getTime()
var ms1 = time1.getTime()
// 两个时间戳相减的秒数,向上取整忽略毫秒
var sub = Math.celi((ms2-ms1)/1000)
//换算,向下取整
var day = Math.floor(sub / (60 * 60 * 24))
var hours = Math.floor(sub % (60 * 60 *24) / (60 * 60))
var minutes = Math.floor(sub % (60*60) / 60)
var seconds = sub % 60
return {day:day,hours:hours,minutes:minutes,seconds:seconds}
}
8.BOM操作
操作浏览器
8.1获取浏览器窗口尺寸
// 获取浏览器可视窗口的宽度 包括滚动条
window.innerWidth
// 获取浏览器可视窗口的高度
window.innerHeight
8.2 浏览器的弹出层
// 提示框
window.alert('value')
// 询问框 有返回值，确定true，取消false
window.confirm('value')
// 输入框 有返回值，确定输入的东西，取消null
window.prompt('value')
8.3 开启和关闭标签页
// 开启
window.open('地址/url')
// 关闭当前
window.close()
8.4 浏览器常见事件
// 资源加载完毕
window.onload = function(){}
//可视尺寸改变
window.onresize = function(){}
// 滚动条位置改变
window.onscroll = function(){}
8.5 浏览器的历史记录操作
// 回退页面
window.history.back()
// 前进页面
window.history.forward()
8.6 浏览器卷去的尺寸
有滚动条时，页面隐藏的部分尺寸
// 卷去的高度
document.documentElement.scrollTop //页面有<!DOCTYPE html>
document.body.scrollTop //页面没有<!DOCTYPE html>
//卷去的宽度
document.documentElement.scrollLeft
document.body.scrollLeft
// 卷去的高度/宽度 兼容写法
var height = document.documentElement.scrollTop || document.body.scrollTop
8.7 浏览器滚动到
// left 浏览器卷去的宽度， top 浏览器卷去的高度 ，瞬间移动
window.scrollTo(left,top)
//平滑滚动
window.scrollTo({
left:xx,
top:yy,
behavior:'smooth' //平滑滚动
})
9.定时器
有返回值，返回第几个定时器，不区分定时器类型
1.间隔定时器（按照指定周期毫秒，去执行指定代码）
setInterval(function(){
// 要执行的代码
},1000)
2.延时定时器（在固定的时间毫秒后执行一次代码）
setTimeout(function(){
// 要执行的代码
},1000)
3.关闭定时器，不区分定时器类型
// 语法一
clearInterval(要关闭的定时器返回值)
// 语法二
clearTimeout(要关闭的定时器返回值)
10.DOM
操作文档流相关内容的属性和方法
10.1 获取元素
// 根据id获取元素。有-对应元素，没有-null
document.getElementById('id名称')
// 根据类名获取元素。获取文档流中所有类名对应的元素，返回伪数组
document.getElementsByClassName('类名')
// 根据元素标签名获取。获取文档流中所有标签名对应的元素，返回伪数组
document.getElementsByTagName('标签名')
// 根据选择器获取一个，获取文档流中满足条件的第一个元素
document.querySelector('选择器') //选择器 .nav
// 根据选择器选择一组，获取文档流中所有满足条件的元素，返回伪数组
document.querySelectorAll('选择器')
10.2 操作元素内容
// 文本内容
// 获取
元素.innerText
//设置 覆盖/替换
元素.innerText = '新内容'
// 超文本内容
//获取
元素.innerHTML
//设置 覆盖/替换
元素.innerHTML = '新内容'
10.3 操作元素属性
// 原生属性（标签自带的属性）
//获取
元素.属性
//设置
元素.属性 = '新内容'
// 自定义属性（自己设定的一些属性）
//获取
元素.getAttribute('属性名')
//设置
元素.setAttribute('属性名'，'属性值')
//删除
元素.removeAttribute('属性名')
// 注意：以上方法一般不用做操作元素 类名 和 样式
10.4 操作元素类名
//获取
元素.className
//设置
元素.className = '新类名'
10.5 操作元素行内样式
// 获取
元素.style.样式名
// 设置
元素.style.样式名 = '样式值' //有中划线-的样式，写成驼峰，如backgroundColor
10.6 获取元素非行内样式
// 获取 可以获取非行内样式，也可以获取行内样式，只能获取不能设置
window.getComputedStyle(元素).样式名
10.7 节点操作
// 创建节点，创建一个指定的标签元素，返回节点
document.createElement('标签名称')
// 插入节点向后插入，把子节点放在父节点的内部，并且放在最后的位置
父节点.appendChild(子节点)
// 插入节点向前插入，把子节点放在父节点的内部,放在指定位置
父节点.insertBefore(要插入的子节点，哪个子节点前面)
// 删除节点，删除指定的节点
父节点.removeChild(子节点)
// 删除节点
节点.remove()
// 替换节点
父节点.replaceChild(换上节点，换下节点)
// 克隆节点 true/false
节点.cloneNode(是否克隆后代节点)
// 1.获取元素尺寸,元素 内容 + padding + border 区域的尺寸
元素.offsetHeight
元素.offsetWidth
// 2.获取元素尺寸，元素 内容 + padding 区域的尺寸
元素.clientHeight
元素.clientWidth
11.事件类型
- 图错误点：contextmenu 是右键单击
事件对象，有函数提供，在函数里面用形参接收即可
补充：
offsetX 和 offsetY 相对于促发事件元素，鼠标的坐标信息
clientX 和 clientY 相对于可视窗口，鼠标的坐标信息
pageX 和 pageY 相对于整个页面文档流，鼠标的坐标信息
2.浏览器相应事件的机制
先从外层传递到里层（事件捕获阶段），最后传出来（事件冒泡阶段）
3.阻止事件传播
事件对象.stopPropagation()
4.事件委托
使用事件对象的target可以知道点击的是哪个元素
ul.onclick = function(e){
if(e.target.tagName === 'LI'){
console.log('你点击的是LI')
}
}
12.面向对象
创建工厂
构造函数 首字母大写 与new连用 (内置构造函数Object)
不要随便return。return基本数据类型无效；return复杂数据类型比如数组，构造函数无效。
function Person(){
this.name = 'jack'
}
var obj = new Person() // 小括号不写也行，不推荐不写
如果构造函数里面有函数，每个对象都会新建一个函数
解决方案：使用原型prototype属性，是一个对象。
属性写在构造函数体内，方法写在构造函数的原型上，如果属性不变，也写在原型上
// 所有实例化对象都会加上这个方法
function Person(){}
Person.prototype.sayHi = function(){} //sayHi 方法名
Person.prototype.a = 110
13.原型链
用 "proto"串联起来的对象链状结构
对象访问机制：先去自己身上找，没有就去proto上找，逐级查找 最高级Object的proto，没有就返回undefined
14.ES6
14.1 新增变量命名
ES6以前用var ES6新增let/const
var 函数作用域
14.2 箭头函数
ES6对函数表达式的简写（声明式函数不能使用）就是把function变成=>
var fn1 = function(){}
var fn1 = ()=>{}
// 1.只有一个形参时,可以不写()
var fn1 = function(a){}
var fn1 = a=>{}
// 2.只有一句话时，可以不写{} 会把这句话的结果当做返回值
var fn1 = function(a,b){return a+b}
var fn1 = (a,b)=> a+b
// 3.箭头函数没有arguments
// 4.箭头函数内部没有this，用的是外部作用域的this
14.3 解构赋值
// 解构数组，使用[]
let arr[a,b] = ['1','2']
console.log(a) // 1
console.log(b) // 2
// 解构对象，使用{}
let obj = {name:lhd, id:10}
let{name,id} = obj
console.log(name) //lhd
console.log(id) //10
// 解构对象起别名
let{name:a} = obj //a=lhd
14.4 模板字符串
可以换行，直接在字符串内解析变量
var str = `ab`
var str = `a
b`
// 解析变量
var age = 18
var str = `我今年${age}岁` // 输出我今年18岁
14.5 展开运算符
展开数组 = 去除[]
var arr = [1,2,3]
console.log(arr) //输出数组
console.log(...arr) //输出1,2,3
// 作用1：合并数组
var arr = [1,2,3]
var arr1 = [4,5,6]
var arr2 = [...arr,...arr1] // 输出数组[1,2,3,4,5,6]
// 作用2：给函数传递参数
var arr1 = [10,20,5,6]
var max = Math.max(...arr1) //输出最大值，max()不能直接放数组
展开对象 = 去除{}
// 作用1：用来复制对象。注意：有相同成员，...obj要放在前面，不然会被obj的覆盖
var obj = {name:lhd}
var obj1 = {
id：10，
...obj
}
14.6 类语法
ES6的语法写构造函数，解决之前写构造函数需要分开写的缺点
// 之前的写法
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.sayHi = function(){ console.log('hello world')}
// 静态属性与方法
Person.a = 100
Person.go = function(){ console.log('go') }
// 实例化对象
var p1 = new Person('lhd','19')
console.log(p1) // 输出对象
p1.sayHi() // 输出hello world
console.log(p1.a) // 输出100
Person.go() // 输出go
var p2 = Person('lhd','19') // 注意：不报错，但不能实例化对象
// ES6 写法
class Person{
// 这里按照 ES5 的构造函数体书写
constructor(name,age){
this.name = name
this.age = age
}
// 直接写原型的函数
sayHi(){ console.log('hello world')}
// 静态属性 + static
static a = 100
// 静态方法
static go() = function(){ console.log('go') }
}
// 实例化对象
var p1 = new Person('lhd','19')
console.log(p1)
p1.sayHi()
var p2 = Person('lhd','19') // 注意：报错，一定要用new
console.log(Person.a)
Person.go()
15.立即执行函数
立即执行函数前面的语句必须有分号
(function(){
// xx
}())
16.请求接口
后端给予接口文档，按照接口文档写
16.1 Ajax
var xhr = new XMLHttpRequest()
xhr.open('GET','XXX',true) //请求方式、请求地址、是否异步
xhr.onload = function(){
//返回的是字符串
console.log(xhr.responseText)
//想拿json，要解析
var res = JSON.parse(xhr.responseText)
}
xhr.send()
16.2 GET和POST的区别
GET直接在open函数地址内拼接
xhr.open('GET','xxx?name=lhd&id=10',true) //请求方式、请求地址、是否异步
POST在send函数内写参数，并且要特殊说明
// 语法：xhr.setRequestHeader('content-type',你传递的参数格式) 后端给参数格式
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('name='+lhd+'&id='+age)
16.3 阻止form表单的默认提交行为
loginForm.onsubmit = function(e){
e.preventDefault()
}
17.jQuery
一个大型的简单的第三方类库，对DOM操作进行封装，引入后暴露两个全局变量 $ 和 jquery
17.1 选择器
（返回元素集合）
$('选择器')
17.2 筛选器
$('选择器').筛选器名称()
17.3 操作文本内容
$(‘div’) = 选中div
3.1 html() 等价于原生 JS 的 innerHTML
// 获取
$('div').html()
// 设置
$('div').html('你要设置的内容')
// 可以识别并解析 html 结构字符串
$('div').html('<h2>hello world<h2>')
3.2 text() 等价于原生 JS 的 innerText
// 获取
$('div').text()
// 设置 不可以解析
$('div').text('hello world')
3.3 val() 等价于原生 JS 中 value
// 获取
$('input').val()
// 设置
$('input').val('你要设置的内容')
17.4 操作元素类名
4.1 addClass() 新增类名
$('div').addClass('要添加的类名')
4.2 removeClass() 删除类名
$('div').removeClass('要删除的类名')
4.3 toggleClass() 切换类名
本身有这个类名，那就是删除，如果本身没有这个类名，那就是添加
// 假设div中有a b c d 三个类名
var btn = document.querySelector('button')
btn.onclick = function(){
$('div').toggleClass('box')
}
// 点击一次，添加box到class中，点击第二次，删除box
17.5 操作元素样式
1.css()
// 获取，可以获取行内和非行内样式。
// 元素集合.css(你要获取的样式名称)
$('div').css('width') //获取div的宽
//设置，注意：样式单位是 px 时，可以省略 px
//元素集合.css(样式名，样式值)
$('div').css('width', '300px') //设置div宽为300px
$('div').css('width', 300)
2.css 批量设置样式
// 元素集合.css({ 所有要设置的样式 })
$('div').css({
width:260,
height:320,
'background-color':'purple'
})
17.6 操作元素属性
1.arrt()
// 一般用于操作元素的自定义属性。直接出现在元素的标签里
// 获取自定义属性hello
$('div').attr('hello')
// 设置自定义属性hello
$('div').attr('hello') = 100
2.removeAttr()
// 删除自定义属性hello
$('div').removeAttr('hello')
3.prop()
// 操作元素原生属性时，会直接出现在元素标签里
// 操作自定义属性时，不会直接出现在元素标签里，会响应在元素对象上
// 注意：prop()不能获取元素标签上原有的自定义属性，只能获取prop()自己设定的自定义属性
// 获取原生和自定义属性
$('div').prop('id')
$('div').prop('hello')
// 设置原生和自定义属性
$('div').prop('id') = 1
$('div').prop('hello') = 100
4.removeProp()
// 不能删除原有的自定义属性和原生属性，只能删除prop()设定的自定义属性
$('div').prop('hello') = 100
$('div').removeProp('hello')
17.7 获取元素尺寸
1.width()、height()
// 获取内容区域的尺寸
$('div').width() // 300
$('div').height() // 300
2.innerWidth()、innerHeight()
// 获取内容和 padding 区域尺寸
$('div').innerWidth() // 340
$('div').innerHeight() // 340
3.outerWidth()、outerHeight()
// 获取内容、padding 和 border 区域尺寸
$('div').outerWidth() // 380
$('div').outerHeight() // 380
4.outerWidth(true)、outerHeight(true)
// 获取内容、padding 、border 和 margin 尺寸
// 假设设定margin为20px
$('div').outerWidth(true) // 420
$('div').outerHeight(true) // 420
17.8 获取元素偏移量
1.offset()
// 获取元素相对于页面左上角的坐标位置
// 返回值是对象数据类型 {top:xx,left:xx}
$('div').offset()
2.position()
// 获取元素定位的位置
// 返回值是对象数据类型 {top:xx,left:xx}
// 注意：如果定位设置的是right，bottom，会自动转成top,left
$('div').position()
17.9 绑定事件
1.on()
1-1 基础绑定事件
// 语法：元素集合.on('事件类型','事件处理函数')
$('div').on('click',function(){ console.log('点击div') })
1-2 事件委托绑定事件
// 语法：元素集合.on('事件类型',选择器,事件处理函数)
// 把事件绑定给 div 元素，当你在 div 内的 p 元素触发事件时，执行事件处理函数
// 相对于把 p 元素的事件委托给 div 元素来绑定
$('div').on('click','p',function(){ console.log('点击p') })
1-3 批量绑定事件
// 语法：元素集合.on({事件类型1:处理函数, 事件类型2:处理函数})
// 注意：不能进行事件委托了
$('div').on({
click: function(){ console.log('鼠标点击') }
mouseover: function(){ console.log('鼠标移入') }
mouseout: function(){ console.log('鼠标移出') }
})
2.one()
one() 与 on() 绑定事件的方式一样，区别就是 one() 只能执行一次
2-1 基础绑定事件
$('div').one('click', function(){ console.log('只触发一次') })
2-2 事件委托
$('div').one('click','p', function(){ console.log('只触发一次') })
2-2 批量绑定事件
$('div').one({
click: function(){ console.log('鼠标点击，只触发一次') }
mouseover: function(){ console.log('鼠标移入，只触发一次') }
mouseout: function(){ console.log('鼠标移出，只触发一次') }
})
3.hover()
jQuery 里面一个特殊的事件
// 语法：元素集合.hover(移入时触发的函数,移出时触发的函数)
// 只传一个函数时，会在移入移出都触发这个函数
$('div').hover(
function (){ console.log('鼠标移入') }
function (){ console.log('鼠标移出') }
)
4.常用事件函数
jQuery 把我们最常用的一些事件，单独做成了事件函数
我们通过调用这些事件函数，来达到绑定事件的效果
如 click()，mouseover()，mouseout()，change() …
$('div').click(function(){ console.log('鼠标点击') })
17.10 事件的解绑和触发
1.off() 事件解绑
1-1 解绑全部事件处理函数
// 准备事件处理函数
function A() { console.log('A事件处理函数') }
function B() { console.log('B事件处理函数') }
function C() { console.log('C事件处理函数') }
// 给 div 元素绑定事件
$('div')
.click(A)
.click(B)
.click(C)
// 事件解绑 语法：元素集合.off(事件类型)
// 把 div 的 click 事件对应的所有事件处理函数全部移除
$('div').off('click')
1-2 解绑指定事件处理函数
// 语法：元素集合.off(事件类型,要解绑的事件处理函数)
// 会把 div 的 click 事件对应的 B 事件处理函数移除
$('div').off('click',B)
2.trigger() 事件触发
// 语法：元素集合.trigger(事件类型)
// 触发 div 元素的 click 事件处理函数
$('div').trigger('click')
17.11 基本动画
1.hide() 隐藏动画
2.show() 显示动画
3.toggle() 切换动画
=> 本身如果是显示的，就切换成隐藏
=> 本身如果是隐藏的，就切换成显示
三个函数都有三个参数，分布是运动时间、运动曲线、运动结束后的回调函数
// 1.只写一个参数：运动时间，单位ms
$('div').hide(1000)
$('div').show(1000)
$('div').toggle(1000)
// 2.参数都写上
$('div').hide(1000,'linear', function(){ console.log('动画结束') })
$('div').show(1000,'linear', function(){ console.log('动画结束') })
$('div').toggle(1000,'linear', function(){ console.log('动画结束') })
17.12 折叠动画
与上面动画的使用方法一致，只是隐藏和显示的效果不同
基本动画相对于把宽高都同时缩小到左上角，折叠动画则是只改变高度，由下向上缩小
1.slideDown() 隐藏动画
2.slideUp() 显示动画
3.slideToggle() 切换动画
=> 本身如果是显示的，就切换成隐藏
=> 本身如果是隐藏的，就切换成显示
三个函数都有三个参数，分布是运动时间、运动曲线、运动结束后的回调函数
// 1.只写一个参数：运动时间，单位ms
$('div').slideDown(1000)
$('div').slideUp(1000)
$('div').slideToggle(1000)
// 2.参数都写上
$('div').slideDown(1000,'linear', function(){ console.log('动画结束') })
$('div').slideUp(1000,'linear', function(){ console.log('动画结束') })
$('div').slideToggle(1000,'linear', function(){ console.log('动画结束') })
17.13 渐隐渐显动画
与上面动画的使用方法一致，只是隐藏和显示的效果不同
相对于改变透明度，让元素慢慢消失
1.fadeIn() 隐藏动画
2.fadeOut() 显示动画
3.fadeToggle() 切换动画
=> 本身如果是显示的，就切换成隐藏
=> 本身如果是隐藏的，就切换成显示
以上三个函数都有三个参数，分布是运动时间、运动曲线、运动结束后的回调函数
4.fadeTo(运动时间，指定透明度，运动曲线，回调函数) 改变元素的透明度为指定值
// 1.只写一个参数：运动时间，单位ms
$('div').fadeIn(1000)
$('div').fadeOut(1000)
$('div').fadeToggle(1000)
// 2.参数都写上
$('div').fadeIn(1000,'linear', function(){ console.log('动画结束') })
$('div').fadeOut(1000,'linear', function(){ console.log('动画结束') })
$('div').fadeToggle(1000,'linear', function(){ console.log('动画结束') })
// 3.fadeTo() 改变透明度
$('div').fadeTo(1000,0.68,'linear',function(){console.log('运动到指定透明度') })
17.14 综合动画函数
animate() 有四个参数
=>第一个：要运动的样式，以一个对象数据类型传递
=>第二个：运动时间
=>第三个：运动曲线
=>第四个：运动结束的回调函数
注意：关于 颜色 和 transform 相关的样式不能运动
$('div').animate({
width:500,
height:600
},1000,'linear',function(){console.log('运动结束')})
17.15 运动结束函数
不停点击按钮使动画变化时，会记录次数，即使你停下来也还在继续变化直到执行完所有次数
1.stop()
=>当任何一个元素执行了stop方法后，会立即结束当前所有运动。
=>目前运动到那什么位置，就停留在什么位置。
=>一般对于结束动画的时候，都是在运动开始之前
// 基本用法
$('div').stop()
// 假设有个按钮id为btn，点击切换动画
$("#btn").click(function(){
// 加上stop()后，连续点击，只要不点击了，就只执行到本次的结束，不会继续执行所有次数
$('div').stop().toggle(2000)
})
2.finish()
会立即结束当前所有运动，直接去到动画的结束位置
// 基本用法
$('div').finish()
// 利用完成动画函数书写动画函数
$("#btn").click(function(){
// 每一次触发时，都会把之前的动画瞬间完成，只执行本次最新的动画
$('div').finish().toggle(200)
})
17.16 ajax
语法：$.ajax({ 本次发送 ajax 的配置项 })
配置项：
1.url：必填，表示请求地址
2.method：选填，默认是 GET ，表示请求方式
3.data：选填，默认是 ’ ’ ，表示携带给后端的参数
5.dataType：选填，默认自动识别，表示后端返回给你的数据类型
6.async：选填，默认是 true，表示是否异步
7.success：选填，表示请求成功的回调函数
8.error：选填，表示请求失败的回调函数
// 演示 发送两个数据给后端
$.ajax({
url:'http://localhost:8888/test',
method:'POST',
data:{name:'lhd',id:'19'},
dataType:'JSON',
async:'true',
success:function(res){
console.log(res) //输出后端给你的json
}
})
// 示例：获取表单里所有信息给后端
$('form').on('submit', function(e){
// 阻止默认行为
e.preventDefault()
const data = $('form').serialize() // 获取所有input信息
$.post('http://localhost:8888/user', data, res=>{
console.log(res)
})
})
// 示例：用户退出登录
$.get('http://localhost:8888/logout',{id:id},res=>{
// 退出登录后 直接刷新页面
window.location.reload()
})
18.webStorage
存储大小5M，不同浏览器不同，如果getItem找不到，则值为NULL
18.1 存储localStorage
存储：localStorage.setItem(“key”, “value”);
取出：localStorage.getItem(“key”);
删除：localStorage.removeItem(“key”);
清空：localStorage.clear()
// 示例：用户登录成功后保存后端返回的token，在主页请求拿到用户信息
// 登陆页存储token、id
localStorage.setItem('token',res.token)
// 主页拿到token、id
const token = localStorage.getItem('token')
const id = localStorage.getItem('id')
// 发送请求拿到用户信息
$.ajax({
url:'http://localhost:8888/test'
method:'GET',
data:{id:id}
headers:{
authorization:token // 请求头
},
success(res){
console.log(res)
}
})
18.2 存储sessionStorage
存储：sessionStorage.setItem(“key”, “value”);
取出：sessionStorage.getItem(“key”);
删除：sessionStorage.removeItem(“key”);
清空：sessionStorage.clear()
区别：
localStorage 关闭浏览器还在，除非自己删除或清空浏览器缓存
sessionStorage 关闭浏览器就清空了
19.Const常量改变
-
const定义的 “基本数据类型” 的变量确实不能修改
-
const定义的 “引用数据类型” 是可以的!
总结：看视频写笔记养成好习惯
1248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
