Ajax与JQuery
1.Ajax
1.创建ajax对象
var xhr = new XMLHttpRequest()
2.配置本次请求信息
xhr.open(请求方式，请求地址，是否异步(默认ture异步))—按照接口文档来写
get—xhr.open(‘GET’,’http://localhost:8888/test/third?name=aaaa’,true)—-get需要在url中传值
post—xhr.open(‘POST’,’http://localhost:8888/test/third’,true)
—post需要在xhr.send()中传值—xhr.send(‘name=aaa&age=20’)
—post传值还需在传送前说明—xhr.setRequestHeader(‘content-type’,’application/x-www-foem-urlencoded’)
3.注册请求完成事件
xhr.onload = function(){
//后端返回json格式数据解析
var res = JSON.parse(xhr.responseText)
//查看返回结果
console.log(JSON.parse(xhr.reponseText))
}
4.把请求发送出去
xhr.send()
2.JQuery
引入JQuery—<script src=”./jquery/jquerymin.js”></script>
选择器—$(‘标签名’)—返回结果是集合
筛选器
$(‘…’).first()—将匹配元素集合缩减为集合中的第一个元素。
$(‘…’).last()— 将匹配元素集合缩减为集合中的最后一个元素
$(‘…’).eq(3)—索引
$(‘…’).next()—获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。
$(‘…’).nextAll()—获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的。
$(‘…’).prev()—获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
$(‘…’).prevAll()—获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。
$(‘…’).parent()—获取父级元素
$(‘…’).parents()—所有该元素父级元素
$(‘…’).siglings()—所有兄弟元素
$(‘…’).find()—所有后代元素
console.log($(‘div’).html)/输出标签内的内容包括html语言—–$(‘div’).html(‘<p>aaaa</p>’)/可以识别html语言
console.log($(‘div’).textl)/输出标签内的内容不包括html语言—–$(‘div’).text(‘<p>aaaa</p>’)/不可以识别html语言
$(‘…’).val()—-等价于js的value
$(‘…’).addClass(‘类名’)—增加类名
$(‘…’).removeClass(类名)—删除类名
$(‘…’).toggleClass(类名)—替换类名
$(‘…’).css(‘width’)—获取标签css样式（行内与非行内皆可）
$(‘…’).css(‘width’,’300px’)—设置css样式
$(‘…’).attr(属性名)—获取标签属性
$(‘…’).attr(‘id’,’aaa’)—设置标签属性
$(‘…’).removeAttr()—删除
$(‘…’).prop(属性名，设置值)—prop只能获取自己设置的自定义属性，无法获取在标签中设置的自定义属性
$(‘…’).removeProp()—删除
无论是否隐藏都能获取到—无论什么状态都不变
$(‘…’).width()—内容宽度——$(‘…’).height()
$(‘…’).innerWidth()—包含与边框距离—–$(‘…’).innerHeight()
$(‘…’).outerWidth()—包含边框—-$(‘…’).$(‘…’).outerHeight()
$(‘…’).offset()—获取元素相对于页面在左上角的坐标位置
$(‘…’).position()获取元素定位位置
事件绑定
$(‘…’).on(‘事件类型’，选择器（委托可无），事件处理函数)
$(‘div’).on({
click:function(){…},
mouseover:function(){…}—鼠标移入
mouseout:function(){…}—鼠标移出
})
$(‘…’).one()—与on相同，但是只能执行一次
$(‘…’).hover(移入时出发的函数，移出时触发的函数)
常用函数
$(‘…’).click()/mouseover()/mouseout()/change()
$(‘…’).off(事件类型，事件名)—解绑指定类型的事件
$(‘…’).off()—解绑所有事件
$(‘…’).trigger(事件类型)—setInterval(function(){ $(‘div’).trigger(‘click’) },1000)
动画
动画效果斜着显示与隐藏
$(‘…’).show(动画时间/1000，动画方式/’linear’，function(){ … })显示（显示就隐藏，隐藏就显示）
$(‘…’).hidt()隐藏
$(‘…’).toggle()切换
动画效果上下显示与隐藏(折叠)
slideDown(动画时间/1000，动画方式/’linear’，function(){ … })显示
slideUp()隐藏
slideToggle()切换
渐隐渐显动画
fadeIn()(动画时间/1000，动画方式/’linear’，function(){ … })显示
fadeOut()隐藏
fadeToggle()切换
fadeTo(运动时间，指定透明度，运动曲线（方式），运动结束回调函数)
综合动画
$(‘…’).animate({运动样式}，运动时间，运动曲线，运动结束回调函数)
结束动画
$(‘…’).stop()/$(‘…’).stop().show(…)—任何一个元素执行了stop方法之后，会结束所有运动，执行到目前运动位置并停止
finish()—触发后都会把之前的动画执行完成，只执行本次最新的动画
Ajax
$.ajax({ 本次发送请求的配置项 })
url—必填
method—选填（默认GET）
data—选填（默认”）,携带的参数
async—选填（默认ture异步）
success—选填—请求成功后的回调函数
error—选填—请求失败后的回调函数
登陆注册逻辑代码
$(‘form’).on(‘submit’,function(e){
//阻止默认事件
e.preventDefault()
//采集信息
$(‘form’).serialize()—获取表单数据
//发送请求
$.post(url,data,res=>{
if(res.code ===0){
$(‘标签名’).css(‘display’,’block’)—失败提示
return
}
window.alert(‘成功跳转提示！’)
window.location.href = ‘./index.html’ —跳转
})
})