JavaScript 常用基础 - Ajax & jQuery（四）

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常量改变

1. const定义的 “基本数据类型” 的变量确实不能修改

2. const定义的 “引用数据类型” 是可以的!

---